Feeling bold?
Sentry's Docs BotAsk A Bot
Product
API
Changelog
Sandbox
Sign In

Expo Router

Sentry's React Native SDK package ships with instrumentation for Expo Router. 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 React from 'react';
import { Slot, useNavigationContainerRef } from 'expo-router';
import Constants from 'expo-constants';
import * as Sentry from '@sentry/react-native';

const routingInstrumentation = new Sentry.ReactNavigationInstrumentation({
  enableTimeToInitialDisplay: Constants.appOwnership !== 'expo', // Only in native builds, not in Expo Go.
});

Sentry.init({
  dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
  integrations: [
    new Sentry.ReactNativeTracing({
      routingInstrumentation,
      enableNativeFramesTracking: Constants.appOwnership !== 'expo', // Only in native builds, not in Expo Go.
    }),
  ],
});

function RootLayout() {
  const ref = useNavigationContainerRef();

  React.useEffect(() => {
    if (ref) {
      routingInstrumentation.registerNavigationContainer(ref);
    }
  }, [ref]);

  return <Slot />;
}

export default Sentry.wrap(RootLayout);

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

Copied
new Sentry.ReactNavigationInstrumentation({
  enableTimeToInitialDisplay: true, // default: false
  routeChangeTimeoutMs: 1000, // default: 1000
});

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.

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

  • Slow and Frozen frames, Time To Initial Display and Time To Full Display are only available in native builds, not in Expo Go.
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").
Suggest an edit to this page   |  Contribute to Docs   |  Report a problem
Package:
npm:@sentry/react-native
Version:
5.22.0
Repository:
https://github.com/getsentry/sentry-react-native