React Native Navigation

Sentry's React Native SDK package ships with instrumentation for React Native Navigation. This allows you to see the performance of your navigation transitions and the errors that occur during them. This page will guide you through setting up the instrumentation and configuring it to your needs.

Initialization

You will need to pass the Navigation object imported from the library to initialize our routing instrumentation. It is recommended that you initialize our SDK and the routing instrumentation as early as possible in the lifecycle of your app; this would most likely be before the point where you initialize your screens.

import * as Sentry from "@sentry/react-native";
import { Navigation } from 'react-native-navigation';

Sentry.init({
  ...
  integrations: [
    new Sentry.ReactNativeTracing({
      // Pass instrumentation to be used as `routingInstrumentation`
      routingInstrumentation: new Sentry.ReactNativeNavigationInstrumentation(
        Navigation,
      )
      // ...
    }),
  ],
})

Options

You can configure the instrumentation by passing an options object to the constructor:

new Sentry.ReactNativeNavigationInstrumentation({
  routeChangeTimeoutMs: 1000, // default: 1000
});

routeChangeTimeoutMs

This option specifies how long the instrumentation will wait for the route to mount after a change has been initiated before the transaction is discarded. The default value is 1000ms.