React Navigation

Sentry's React Native SDK package ships with instrumentation for React 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

The code snippet below shows how to initialize the instrumentation.

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

const routingInstrumentation = new Sentry.ReactNavigationInstrumentation({
  enableTimeToInitialDisplay: true,
});

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new Sentry.ReactNativeTracing({ routingInstrumentation }),
  ],
})

function App = () => {
  const navigation = React.useRef();

  return (
    <NavigationContainer
      ref={navigation}
      onReady={() => {
        routingInstrumentation.registerNavigationContainer(navigation);
      }}>
    </NavigationContainer>
  );
};

Options

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

new Sentry.ReactNavigationInstrumentation({
  enableTimeToInitialDisplay: true, // default: false
  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.

enableTimeToInitialDisplay

This option will enable automatic measuring of the time to initial display for each route. To learn more see Time to Initial Display.

Notes

• This instrumentation supports React Navigation version 5 and above. If you use React Navigation version 4, see the instrumentation for React Navigation V4.

• The instrumentation creates a transaction on every route change including goBack navigations.

• If you are coming from a version prior to 2.3.0, make sure you update where registerNavigationContainer is called. For more detailed instructions, see our migration guide.