skip to content

In React Native 0.87, how does LogBox treat console warnings, console errors and fatal errors differently during development?

level: middleimportance: should knowfreq 40%

answer

  1. development builds only
  2. warnings: one banner pointing to DevTools
  3. errors: red notification with a count
  4. fatal or syntax: full screen
  5. same-category logs roll up

basics

~20 s

LogBox, in development builds only, shows console errors as red notifications you can expand, and fatal or syntax errors as a full-screen view. Warnings are no longer listed in-app: a single banner tells you to open React Native DevTools, where the console holds them.

solid answer

~40 s

LogBox is the in-app log viewer that replaced YellowBox, and it runs only when `__DEV__` is true. In 0.87 it treats three kinds of message differently. **Warnings** are sent to the console, and when DevTools has full console support LogBox shows just one "Open debugger to view warnings." notification. **Errors** from `console.error` or non-fatal exceptions appear as a red notification with a count that you tap to page through. **Fatal errors**, such as an uncaught exception or a syntax error, open full screen with a symbolicated stack; a syntax error cannot be dismissed until it is fixed. Repeated logs of the same category roll up into one entry, and in release builds LogBox does nothing at all.

go deeper

for a junior

Recall that LogBox exists only in development and that errors show as red notifications while syntax errors take over the screen.

for a middle

Explain the three treatments, warnings routed to DevTools, errors as notifications, fatal errors full screen, and why the Console is the source of truth.

for a senior

Show you know what happens to the same errors in a release build, and that a quiet LogBox does not mean a quiet console.

for a principal

Decide how development warnings are triaged across a team so that noise in the console does not hide real regressions.

## What LogBox is **LogBox** is React Native's in-app log viewer for development builds. It is installed during startup only when `__DEV__` is true, and it replaced the old YellowBox; the deprecated `YellowBox` module and `console.ignoredYellowBox` were removed in React Native 0.79. LogBox does not replace the console: every message still goes to the console, which React Native DevTools shows. ## Three kinds of message, three treatments | Kind | Typical source | What LogBox shows in React Native 0.87 | |---|---|---| | **Warning** | `console.warn`, native warnings | no per-warning toast; a single "Open debugger to view warnings." notification that opens DevTools | | **Error** | `console.error`, a non-fatal exception such as an uncaught promise rejection | a red notification at the bottom with a count; tap to open and page through the logs | | **Fatal / syntax error** | an uncaught exception, a JavaScript syntax error | a full-screen view with the error's location; a syntax error cannot be dismissed until it is fixed | A few details from the source are worth knowing: - **Warnings go to DevTools.** When the runtime reports full console support to React Native DevTools, which is the normal case in current development builds, LogBox stops listing warnings and shows the one-time "Open debugger" notification instead; the React Native docs describe it as a banner without details that prompts you to open DevTools. - **Identical logs roll up.** If the next log has the same category as the previous one, LogBox increments a count instead of adding a new entry. - **Fatal errors are symbolicated first.** LogBox waits up to about a second for symbolication before opening a fatal error, so the stack shows your source files. - **DevTools open means fewer overlays.** The docs say that while DevTools is open, errors other than fatal ones are hidden from LogBox, and they recommend the Console panel as the source of truth because LogBox options can hide or re-level logs. ## The full-screen view When an **unrecoverable** error occurs — a syntax error, or an exception nothing caught — LogBox opens full screen with the message, the component stack where available, and the symbolicated call stack. For a syntax error it cannot be dismissed, because none of your code can run; it closes on its own once the file is fixed, through Fast Refresh or a manual reload. ## Release builds None of this appears in a release build: LogBox is not installed, and its API calls are no-ops. `console.error` in production does not open anything on screen; React Native forwards non-fatal errors to the native exceptions manager instead, except messages starting with `Warning: `. What users see is whatever your app renders — or a crash for a fatal error. ## A legacy loyalty-card app, before and after An old loyalty-card app used to show dozens of yellow boxes — deprecated lifecycle warnings, a third-party barcode library complaining about props. On React Native 0.87: 1. The warnings no longer cover the screen; one notification points to DevTools, where the full list is in the Console. 2. `console.error` calls from a failing points API still appear as red notifications with a count. 3. A typo in the card screen still takes over the whole screen until it is fixed. The warning flood has not gone away — it has moved to the console, where it still deserves triage.

  • What happens to console.error calls in a React Native release build?
    LogBox is not installed, so nothing appears on screen. React Native's error handler forwards non-fatal errors to the native exceptions manager instead, skipping messages that start with `Warning: `, so they leave the JavaScript side rather than being displayed.
  • Why does the React Native documentation recommend the DevTools Console over LogBox as the source of truth?
    LogBox options such as ignore patterns can hide or re-level messages, warnings are no longer listed in-app, and non-fatal errors are hidden from LogBox while DevTools is open. The Console receives every message unfiltered.

saying these in an interview costs you the question

  • LogBox also shows errors to users in production
  • Every console.warn appears as its own yellow toast in 0.87
  • A syntax error overlay can be dismissed to keep using the app
  • LogBox replaces the console, so logs no longer reach DevTools
  • console.error in development only prints to the terminal