Navigation libraries

If you use either React Navigation or React Native Navigation packages in your app, you can automatically capture your users’ navigation history.

Follow the integration instructions below to set a meaningful context and capture navigation breadcrumbs in your BugSnag events:

React Navigation breadcrumbs

If you’re using React Navigation (version 5 and above), install the @bugsnag/plugin-react-navigation plugin:

yarn add @bugsnag/plugin-react-navigation
# or
npm install --save @bugsnag/plugin-react-navigation

To use the plugin, pass it in when you start BugSnag, and then use it to wrap your NavigationContainer component as follows:

import Bugsnag from '@bugsnag/react-native'
import BugsnagPluginReactNavigation from '@bugsnag/plugin-react-navigation'
import { NavigationContainer } from '@react-navigation/native'

Bugsnag.start({
  plugins: [new BugsnagPluginReactNavigation()]
})

const { createNavigationContainer } = Bugsnag.getPlugin('reactNavigation')

const BugsnagNavigationContainer = createNavigationContainer(NavigationContainer)

function App() {
  return (
    <BugsnagNavigationContainer>
      { /* your navigator and screens here */ }
    </BugsnagNavigationContainer>
  )
}

The BugsnagNavigationContainer will forward a ref to the underlying React Navigation NavigationContainer, which gives you access to various helper methods – for example to dispatch navigation actions.

If you’re using React Native Navigation (version 2 and above), install the @bugsnag/plugin-react-native-navigation plugin:

yarn add @bugsnag/plugin-react-native-navigation
# or
npm install --save @bugsnag/plugin-react-native-navigation

To use the plugin, pass it in when you start BugSnag with your Navigation object:

import Bugsnag from '@bugsnag/react-native'
import BugsnagPluginReactNativeNavigation from '@bugsnag/plugin-react-native-navigation'
import { Navigation } from 'react-native-navigation'

Bugsnag.start({
  plugins: [new BugsnagPluginReactNativeNavigation(Navigation)]
})