React Navigation

Learn how to use Sentry's React Navigation instrumentation.

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.

The code snippet below shows how to initialize the instrumentation.

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

const navigationIntegration = Sentry.reactNavigationintegration({
  enableTimeToInitialDisplay: true,
});

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

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

  return (
    <NavigationContainer
      ref={containerRef}
      onReady={() => {
        navigationIntegration.registerNavigationContainer(containerRef);
      }}>
    </NavigationContainer>
  );
};

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

Copied
Sentry.reactNavigationintegration({
  enableTimeToInitialDisplay: true, // default: false
  routeChangeTimeoutMs: 1_000, // default: 1_000
  ignoreEmptyBackNavigationTransactions: true, // default: true
});

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 1_000.

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

Does not sample transactions that are from routes that have been seen any more and don't have any spans. This removes a lot of the clutter as most back navigation transactions are now ignored. The default value is true.

  • This instrumentation supports React Navigation version 5 and above. Starting the SDK version 6 React Navigation 4 is not supported, please upgrade.

  • 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.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").