reactotron icon indicating copy to clipboard operation
reactotron copied to clipboard

console.error() calls are not tracked in Reactotron

Open silasjmatson opened this issue 2 months ago • 1 comments

Description

When using Reactotron in a React Native app, calls to console.error() are not displayed in Reactotron, while thrown errors are properly captured and shown.

Expected Behavior

console.error() calls should be intercepted and displayed in Reactotron's timeline, similar to how console.log(), console.warn(), and console.debug() are tracked.

Actual Behavior

  • console.log(), console.warn(), console.debug() - ✅ Displayed in Reactotron
  • console.error() - ❌ Not displayed in Reactotron
  • throw new Error() - ✅ Displayed in Reactotron (via trackGlobalErrors plugin)

Reproduction

Reproducer App

A complete reproduction case is available at: https://github.com/silasjmatson/PizzaApp

Steps to Reproduce

  1. Clone the reproducer app

    git clone https://github.com/silasjmatson/PizzaApp
    cd PizzaApp
    yarn install
    
  2. Start Reactotron desktop app

  3. Run the React Native app

    yarn ios
    # or
    yarn android
    
  4. Navigate to the "Debug" screen in the app

  5. Tap the "Send Error to Reactotron" button

    • This calls console.error(new Error("This is a test error from DemoDebugScreen"))
  6. Observe that nothing appears in Reactotron

  7. For comparison, tap other demo buttons that use console.log() or throw errors to see those work correctly

Root Cause

The issue exists in the trackGlobalLogs plugin:

File: lib/reactotron-react-native/src/plugins/trackGlobalLogs.ts:36

// console.error is taken care of by ./trackGlobalErrors.ts

However, trackGlobalErrors.ts only intercepts errors via LogBox.addException, which is only called when errors are thrown, not when console.error() is called directly.

File: lib/reactotron-react-native/src/plugins/trackGlobalErrors.ts:160-166

LogBox.addException = new Proxy(LogBox.addException, {
  apply: function (target, thisArg, argumentsList: Parameters<typeof LogBox.addException>) {
    const error = argumentsList[0]
    reportError(error)
    return target.apply(thisArg, argumentsList)
  },
})

This proxy only triggers when React Native's error handling system calls LogBox.addException, leaving direct console.error() calls untracked.

Proposed Solution

Add console.error interception to the trackGlobalLogs plugin, similar to how console.log, console.warn, and console.debug are handled:

const originalConsoleError = console.error
console.error = (...args: Parameters<typeof console.error>) => {
  originalConsoleError(...args)
  client.error(args[0], []) // or format the stack trace if available
}

Environment

  • Reactotron: latest (from source)
  • React Native: 0.76.1
  • Platform: iOS/Android

silasjmatson avatar Oct 10 '25 23:10 silasjmatson

@joshuayoes Would appreciate if you could clone my test repo and reproduce the issue yourself.

silasjmatson avatar Oct 10 '25 23:10 silasjmatson