Debugging and Monitoring

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.

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.

Quick check: Why upload source maps to a crash reporter?

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