Navigation libraries

If you use React Navigation in your app, you can record the timings of app navigation events shown on the BugSnag Performance dashboard.

React Navigation

Installation

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

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

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

import BugsnagPerformance from '@bugsnag/react-native-performance'
import { ReactNavigationNativePlugin } from '@bugsnag/react-navigation-performance'

const bugsnagNavigationPlugin = new ReactNavigationNativePlugin()

Bugsnag.start({
  apiKey: 'YOUR_API_KEY',
  plugins: [bugsnagNavigationPlugin]
})

Tracking new navigation events

To track navigation events, use the plugin to wrap your NavigationContainer at the root of your app:

const { createNavigationContainer } =
    BugsnagPerformance.getPlugin(ReactNavigationNativePlugin)

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

function App() {
  return (
    <BugsnagPerformanceNavigationContainer>
      { /* your navigation stack here */ }
    </BugsnagPerformanceNavigationContainer>
  )
}

Ending navigation spans

React Navigation doesn’t provide a way for us to detect when a navigation has ended. To mark the end of the navigation span, we therefore provide a CompleteNavigation component.

The CompleteNavigation component is used to wrap individual screens or components and ends the navigation span depending on the value of the on prop, which can be "mount", "unmount" or a boolean expression.

For example, wrapping a given screen, providing a boolean expression to the on prop.

import { CompleteNavigation } from '@bugsnag/react-navigation-performance';

export function HomeScreen() {
  const { data, dataLoading } = useStateManagement(); 

  return (
    <CompleteNavigation on={data && !dataLoading}>
      <SafeAreaView>
        <Text>Home Screen</Text>
      </SafeAreaView>
    </CompleteNavigation>
  );
}

The value "unmount" is designed for adding to a component such as a placeholder view or loading spinner. Once all wrapped loading components are unmounted (and once any other CompleteNavigation conditions are met), the navigation will complete:

import { CompleteNavigation } from '@bugsnag/react-navigation-performance';

export function LoadingComponent() {
  return (
    <CompleteNavigation on="unmount">
      <View>
        <Text>Loading...</Text>
      </View>
    </CompleteNavigation>
  );
}
export function Screen () {
  const { data, loading } = useStateManagement();

  return (
    <View>
      {loading ? <LoadingComponent /> : <SomeOtherComponent data={data} />}
    </View>
  )
}

React Native Navigation

Support for React Native Navigation is coming soon. To find out more about these integrations, or if you are using a different navigation library, please let us know.