Custom Navigation
Learn how to use Sentry's Generic Navigation instrumentation.
Sentry's React Native SDK package ships with instrumentation for React Navigation, React Native Navigation, and Expo Router. This allows you to see the performance of your navigation transitions and the errors that may occur.
If you use a navigation library that we don't yet support, or have a custom routing solution, you can use startIdleNavigationSpan function to implement your own navigation integration. This page will guide you through setting it up and configuring it to your needs.
customNavigationIntegration.jsCopied
import Sentry from "@sentry/react-native";
const customNavigationIntegration = ({ navigator }) => {
navigator.registerRouteChangeListener((newRoute) => {
Sentry.startIdleNavigationSpan({
name: newRoute.name,
op: "navigation",
});
});
return {
name: "CustomNavigation",
};
};
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
// Set tracesSampleRate to 1.0 to capture 100% of transactions for tracing.
// We recommend adjusting this value in production.
// Learn more at
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
tracesSampleRate: 1.0,
integrations: [customNavigationIntegration({ navigator })],
});
To lear more about the Integration lifecycle, see the Integration API.
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").
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").