Navigation libraries

If you use React Navigation 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

Configuration

Install the @bugsnag/vega-plugin-react-navigation plugin:

npm install --save bugsnag-vega-plugin-react-navigation-0.1.0.tgz

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/vega'
import BugsnagPluginReactNavigation from '@bugsnag/vega-plugin-react-navigation'
import { NavigationContainer } from '@amzn/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>
  )
}

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.