Debugging
Debug React Native apps with Metro, Flipper, React DevTools, and structured error boundaries.
Developer Tools
Shake device or Cmd+D in simulator opens dev menu: reload, enable Fast Refresh, open debugger. Metro logs appear in terminal running npx react-native start.
React DevTools inspect component props and hooks. Flipper integrates logs, network, layout, and crash reports.
Use console.log sparingly; prefer structured logging libraries forwarding to remote services in beta builds.
- Disable dev menu in production builds
- Symbolicate crash stacks with source maps uploaded to Sentry
- Reproduce on release builds when performance-related
Error Boundaries and Red Screens
React error boundaries catch render errors in children, showing fallback UI instead of redbox. Log componentStack to monitoring.
Red screens indicate JS exceptions; yellow boxes warn. Read top stack frame first—often your code not RN internals.
Native crashes require Xcode Organizer or Android logcat. bisect recent native dependency upgrades when crashes start after release.
- Wrap navigator roots with error boundaries
- Report errors with user id and build number context
- Test offline and airplane mode scenarios explicitly