LogBox, DevTools and Source Maps
Sprout crashes when you open a plant with no photo. The screen turns red, a stack trace appears, and you need to find the exact line. React Native gives you three tools for this: LogBox on the phone, DevTools on your computer, and source maps connecting both to your real files.
The rule
Yellow warns, red stops; DevTools digs; source maps point home.
LogBox is the in-app error and warning display, active only in development.
console.warn(...)shows a yellow notice at the bottom of the screen.console.error(...)shows a red notice at the bottom.- An unhandled error during rendering, or a syntax error, fills the whole screen in red.
Tap a notice to see the full message and a stack trace. To silence a known, harmless warning from a library, list part of its text:
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Some library warning text']);Ignore sparingly. A hidden warning is still happening.
DevTools is the debugging window on your computer. In current React Native it is React Native DevTools, which you open by pressing j in the Expo terminal or choosing it from the developer menu. It has a Console for logs, Sources for breakpoints and stepping through code, and React's Components and Profiler panels to inspect props, state and slow renders.
Source maps connect the bundle back to your files. Metro combines everything into one large bundle, so without a map an error would point to "line 48,210 of the bundle". The source map translates that into components/PlantCard.js, line 12. Metro creates them automatically in development. For release builds, you upload them to your crash-reporting service so production stack traces stay readable too.
The shortcut
Follow the colour, then the file, then the cause path: read the colour to judge urgency, open the trace to find the first line in your own code, then set a breakpoint there in DevTools.
Colour
Full-screen red: a render error. The app cannot continue until it is fixed.
Drills
Answer fast — trust the rule.
What does console.warn('Low water') show in development?
A component throws an error while rendering. What does LogBox do?
Why do stack traces name PlantCard.js instead of a line in the bundle?
In the Expo terminal, which key opens React Native DevTools?
Remember
- Yellow warns, red stops, DevTools digs, source maps point home.
- Path: colour, then the first line of your own code, then the cause in DevTools.
- Trap:
LogBox.ignoreLogshides a warning but does not fix it.