React Native performance integration guide

Step-by-step instructions for adding performance monitoring to your React Native projects.

The BugSnag Performance React Native integration automatically instruments your app’s start time – within the JavaScript engine – and the network requests it makes. You can instrument your app to record navigation events and other arbitrary operations in your code.

New to BugSnag? Create an account

Looking for error monitoring? See our integration guide

Installation

The BugSnag React Native Performance SDK is compatible with React Native version 0.71 and above.

If you use npm or yarn in your project, install the @bugsnag/react-native-performance package:

npm install --save @bugsnag/react-native-performance react-native-file-access @react-native-community/netinfo
# or
yarn add @bugsnag/react-native-performance react-native-file-access @react-native-community/netinfo

and ensure dependencies are linked to your iOS project:

npx pod-install

The latest available version of @bugsnag/react-native-performance is v2.2.0.

Basic configuration

In index.js, import and start the BugSnag Performance JavaScript client:

import BugsnagPerformance from '@bugsnag/react-native-performance'

Then start sending performance data by providing your API key as a string:

BugsnagPerformance.start('YOUR_API_KEY')

This is the same API key used by the BugSnag Error Monitoring library.

You can find your API key in Project Settings from your BugSnag dashboard.

We recommend you also set your app’s version and the release stage of the build so that performance data can be easily filtered on the BugSnag dashboard. This is done by passing a configuration object when you start the library:

BugsnagPerformance.start({
  apiKey: 'YOUR_API_KEY',
  appVersion: '4.10.0',
  releaseStage: 'testing'
})

See Configuration options for details on the options available.

If you would like to monitor the performance of native code in your React Native Android or iOS apps, our native SDKs can be installed and configured independently to report their data to the same project as you are using for the JavaScript code in your app.

Please follow the Android and iOS guides for integration instructions.

Instrumenting app starts

BugSnag will automatically detect and report the app’s startup time within the JavaScript engine. This is measured as the time taken from when the BugSnag Performance SDK is imported until the top-level App component completes its first render. These timings are shown under the “App starts” tab in the BugSnag Performance dashboard.

To disable automatic instrumentation of app starts, see the autoInstrumentAppStarts configuration option.

Instrumenting navigation

By instrumenting the views in your app, the timings for app navigation events can be shown on the BugSnag Performance dashboard.

Wrap view elements in your app with calls to BugsnagPeformance.startNavigationSpan and end the resulting Span to create a measurement:

const span = BugsnagPerformance.startNavigationSpan('HomeScreen')

// When your screen has finished rendering
span.end()

If you use React Navigation in your app, we have an integration that will automatically instrument navigation events. See the Navigation libraries guide for more details.

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.

Instrumenting network requests

BugSnag will automatically detect and report XMLHttpRequest (XHR) and fetch network requests made by your app. These timings are shown under the “Network requests” tab in the BugSnag Performance dashboard.

The networkRequestCallback configuration option allows you to control the data sent in these network request spans using a callback.

To disable the capture of these requests, use the autoInstrumentNetworkRequests configuration option:

BugsnagPerformance.start({
  apiKey: 'YOUR_API_KEY',
  autoInstrumentNetworkRequests: false
})

Sending custom spans

To send custom spans to BugSnag for any other operations you wish to measure, use BugsnagPerformance.startSpan to start a span, and call the span’s end method to end the measurement:

let span = BugsnagPerformance.startSpan("Login")
await LoginApi.login()
span.end()

The spanOptions parameter allows you to customize some elements of the span’s behavior:

Reporting child-only spans

If a custom span is “first class”, its performance characteristics will be aggregated and shown in the “Custom” tab of the BugSnag dashboard. If the custom span is useful only for adding insight into the performance of its parent (through the waterfall diagram on the span instance page), you should set the isFirstClass span option to false:

BugsnagPerformance.startSpan("always-nested", { isFirstClass: false });

Controlling span hierarchies

When viewing a single instance of a span in the BugSnag dashboard, a waterfall diagram will show you that instance’s children and their children, and so on. This allows you to see in more detail where the time was spent, and aid diagnosing and fixing any problems. When creating your own spans, you can use the options parameter to control their parent-child relationships to produce a meaningfully representative hierarchy in your dashboard. See Maintaining span context for more information.

Start time override

By default, a span will use the current timestamp as its start time. However, you can use the startTime span option to report spans that have already started by providing your own timestamp. You can also end a span with your own timestamp to provide a retrospective end time:

let activityStartTime = new Date()
// Do some work
let activityEndTime = new Date()

BugsnagPerformance.startSpan("retro-span", { startTime: activityStartTime })
  .end(activityEndTime)