React Navigation V4
Sentry's React Native SDK package ships with instrumentation for React Navigation V4 and older. 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.
// Construct a new instrumentation instance. This is needed to communicate between the integration and React
const routingInstrumentation = new Sentry.ReactNavigationV4Instrumentation();
Sentry.init({
...
integrations: [
new Sentry.ReactNativeTracing({
// Pass instrumentation to be used as `routingInstrumentation`
routingInstrumentation,
...
}),
],
})
// Functional Component Example
const App = () => {
// Create a ref for the navigation container
const appContainer = React.useRef();
// Register the navigation container with the instrumentation
React.useEffect(() => {
routingInstrumentation.registerAppContainer(appContainer);
}, []);
return (
// Connect the ref to the navigation container
<AppContainer ref={appContainer} />
);
};
You can configure the instrumentation by passing an options object to the constructor:
new Sentry.ReactNavigationV4Instrumentation({
routeChangeTimeoutMs: 1000, // default: 1000
});
This option specifies how long the instrumentation will wait for the initial route to mount after a change has been initiated before the transaction is discarded. The default value is 1000ms.
This instrumentation supports React Navigation version 4 and older. If you use React Navigation version 5 and newer, see the instrumentation for React Navigation.
The instrumentation creates a transaction on every route change including
goBack
navigations.
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").
- Package:
- npm:@sentry/react-native
- Version:
- 5.22.0
- Repository:
- https://github.com/getsentry/sentry-react-native