Sentry SDK for React Native

repository·main·Indexed 23 days ago

https://github.com/getsentry/sentry-react-native

Sentry SDK for React Native provides error tracking and performance monitoring across JavaScript and native (iOS/Android) layers. It includes support for Expo via specialized integrations and sourcemap upload tools, React Navigation tracking, Turbo Module instrumentation for the New Architecture, and built-in Error Boundaries and user feedback widgets.

Tokens
14.7K
Snippets
28
Records
93
Agent score
83%

What's inside sentry-react-native

  1. How the Expo handler stubs work

    main

    The expo-stubs module provides mock implementations of expo-modules-core interfaces, specifically Package and ReactNativeHostHandler.

    In a real Expo project, the Expo handler (android/expo-handler/) is compiled against the actual expo-modules-core library. It uses a ReactNativeHostHandler to capture native exceptions that are otherwise swallowed by Expo's bridgeless error handling mechanism (ExpoReactHostDelegate.handleInstanceException).

    These stubs are used during unit testing in RNSentryAndroidTester to provide these necessary interfaces at compile time in environments where Expo is not present.

  2. Initialize Sentry in your React Native application

    main

    To start capturing errors and performance data, import the Sentry SDK and call Sentry.init. You must provide your project's dsn. You can also configure tracesSampleRate to control the volume of performance monitoring transactions (use 1.0 to capture 100%).

    import * as Sentry from "@sentry/react-native";
    
    Sentry.init({
      dsn: "__DSN__",
    
      // Set tracesSampleRate to 1.0 to capture 100%
      // of transactions for performance monitoring.
      // We recommend adjusting this value in production.
      tracesSampleRate: 1.0,
    });
  3. Exclude Sentry Android Replay to reduce APK size

    main

    If you need to reduce your Android bundle or APK size by excluding the sentry-android-replay module from your host app's classpath, you can do so in your android/build.gradle file.

    Note that if you exclude this module, the React Native SDK requires the replay-stubs module to compile successfully. The stubs are provided as a compileOnly dependency, meaning they are available during compilation but are not included in the final runtime package, thus not affecting your app's size or runtime behavior.

    subprojects {
        configurations.all {
            exclude group: 'io.sentry', module: 'sentry-android-replay'
        }
    }
  4. Update the Sentry SDK versions table

    main

    The SDK versions table in the documentation is automatically updated during releases. If you need to manually update the table to reflect the current versions of the bundled Sentry Android SDK, Sentry Cocoa SDK, or Sentry JavaScript SDK, run the update script from the repository root.

    ./scripts/update-sdk-versions-table.sh
  5. Upload JavaScript bundles and source maps from Expo builds

    main

    Use the @sentry/expo-upload-sourcemaps command-line tool to upload JavaScript bundles and source maps from Expo builds to Sentry. This ensures that production error stack traces are symbolicated back to your original source code.

    To use the tool, point it to the output directory produced by npx expo export or eas update (commonly named dist).

    SENTRY_AUTH_TOKEN=<your-auth-token> \
    npx @sentry/expo-upload-sourcemaps dist
  6. Install and setup Sentry for React Native

    main

    The easiest way to install the Sentry SDK and configure your project is by using the Sentry Wizard CLI. This command automates the installation and setup process.

    Run the following command in your terminal:

    npx @sentry/wizard -s -i reactNative
  7. Understand the native SDK initialization lifecycle

    main

    The autoInitializeNativeSdk option (default: true) determines if the Sentry SDK initializes the native layer immediately upon JS initialization.

    Warning: If you set this to false because you are managing a native SDK manually, ensure the native SDK is running before the JS Engine initializes. Otherwise, events occurring during startup might not be captured. Additionally, ensure the DSN used in both the React Native and native sides is identical.

  8. Initialize the native SDK via ReactNativeClient

    main

    When ReactNativeClient.init() is called, it triggers _initNativeSdk(). This process:

    1. Sets up a native log listener if debug is enabled.
    2. Configures Mobile Replay options (if the integration is present).
    3. Calls NATIVE.initNativeSdk with merged options, including devServerUrl and defaultSidecarUrl.
    4. Emits the afterInit event once the native initialization is complete.