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

React Navigation

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')

// The returned BugsnagNavigationContainer has exactly the same usage
// except now it tracks route information to send with your error reports
const BugsnagNavigationContainer = createNavigationContainer(NavigationContainer)

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

React Native Navigation

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)]
})