console.error() calls are not tracked in Reactotron
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 Reactotronconsole.error()- ❌ Not displayed in Reactotronthrow 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
-
Clone the reproducer app
git clone https://github.com/silasjmatson/PizzaApp cd PizzaApp yarn install -
Start Reactotron desktop app
-
Run the React Native app
yarn ios # or yarn android -
Navigate to the "Debug" screen in the app
-
Tap the "Send Error to Reactotron" button
- This calls
console.error(new Error("This is a test error from DemoDebugScreen"))
- This calls
-
Observe that nothing appears in Reactotron
-
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
@joshuayoes Would appreciate if you could clone my test repo and reproduce the issue yourself.