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

Custom Navigation

Sentry's React Native SDK package ships with instrumentation for React Navigation and React Native Navigation. This allows you to see the performance of your navigation transitions and the errors that occur during them.

If you use a navigation library that we don't yet support, or have a custom routing solution, you can use the basic RoutingInstrumentation. This page will guide you through setting it up and configuring it to your needs.

Every routing instrumentation revolves around one method:

onRouteWillChange (context: TransactionContext): Transaction | undefined

You need to ensure that this method is called before the route change occurs, and an IdleTransaction is created and set on the scope.

Copied
// Construct a new instrumentation instance. This is needed to communicate between the integration and React
const routingInstrumentation = new Sentry.RoutingInstrumentation();

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

const App = () => {
  <SomeNavigationLibrary
    onRouteWillChange={(newRoute) => {
        // Call this before the route changes
      routingInstrumentation.onRouteWillChange({
        name: newRoute.name,
        op: 'navigation'
      })
    }}
  />
};

To create a custom routing instrumentation, look at how the RoutingInstrumentation class is implemented. If you need an example of how to implement routing instrumentation, review the code of the existing official instrumentation such as the one for React Navigation V4

Copied
class CustomInstrumentation extends RoutingInstrumentation {
  constructor(navigator) {
    super();

    this.navigator.registerRouteChangeListener(this.routeListener.bind(this));
  }

  routeListener(newRoute) {
    // Again, ensure this is called BEFORE the route changes and BEFORE the route is mounted.
    this.onRouteWillChange({
      name: newRoute.name,
      op: "navigation",
    });
  }
}
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