# Debugging and Monitoring — React Native

Source: https://www.skillbyai.com/en/react-native/x-debug

> Find problems in development and production.

## DevTools, logs and crash reporting

**React Native DevTools** is the modern debugger for Hermes apps: open it from the dev menu or by pressing `j` in the Expo CLI or Metro terminal to get a console, source-level breakpoints, React component inspection and the profiler. The in-app **dev menu** also offers reload and performance monitoring, and native issues appear in Xcode and Android Studio logs (Logcat). In production you cannot attach a debugger, so add **crash and error reporting** such as Sentry, Bugsnag or Firebase Crashlytics, upload **source maps** so stack traces point to your source, and track key metrics such as start-up time, crash-free sessions and failed requests. Tag reports with the app version and update id to see which release caused a problem.

## Reporting errors with Sentry

Sketch using @sentry/react-native; check the docs for your version.

```tsx
import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.2,          // sample a share of sessions for performance data
  enabled: !__DEV__,              // report only from release builds
});

export async function placeOrder(cartId: string) {
  try {
    const res = await fetch(`https://api.example.com/carts/${cartId}/order`, { method: "POST" });
    if (!res.ok) throw new Error(`Order failed: ${res.status}`);
  } catch (err) {
    Sentry.captureException(err, { tags: { feature: "checkout" } });
    throw err;
  }
}
```

## Add an error boundary

A React error boundary at the root shows a friendly fallback screen instead of a blank app and reports the error to your monitoring tool.

**Quiz:** Why upload source maps to a crash reporter?

- [ ] To enable OTA updates
- [ ] To make the app bundle smaller
- [x] So minified production stack traces map back to your original source
- [ ] To request permissions

*Answer:* So minified production stack traces map back to your original source. Readable traces make crashes fixable.