React Native performance integration guide

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

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.

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

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.

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.

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

Alternatively you can instrument navigations manually by calling BugsnagPeformance.startNavigationSpan when a navigation is started and end on the resulting Span when the navigation is complete:

const span = BugsnagPerformance.startNavigationSpan('HomeScreen')

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

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 and end time overrides

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.

Note that the values you provide must either be Dates, or numbers relative to performance.now(). The number produced by Date.now() will not have the desired effect.

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

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