Monitor your React Native application | New Relic Documentation

With our React Native agent, your team can monitor the performance of its hybrid apps and identify code errors. Our agent collects crash data, network traffic, and other information for hybrid apps using native components. This allows your team to understand the health of your hybrid app regardless of the platform. We empower your team to make more informed development choices by providing insight into Javascript errors, distributed tracing, network instrumentation, and more.

Install the React Native agent

Requirements

Before you install the React Native agent, ensure your app meets these requirements:

Android API 21 or higher
iOS 10
React Native version 0.63 or higher
- iOS native requirements
- Android native requirements
Native support levels are based on React Native requirements.

Step one of install

To install the agent:

Run this yarn command:
bash
```
$yarn add newrelic-react-native-agent
```
Run the following:
bash
```
$npm i newrelic-react-native-agent
```

Step two of install

To set up the React Native agent, you need to start it with index.js. AppToken is platform-specific so you will need to generate the separate token for Android and iOS apps. Open your index.js and add the following code to launch NewRelic:

import NewRelic from 'newrelic-react-native-agent';
import * as appVersion from './package.json';
import {Platform} from 'react-native';

    let appToken;

    if (Platform.OS === 'ios') {
        appToken = '<IOS-APP-TOKEN>';
    } else {
        appToken = '<ANDROID-APP-TOKEN>';
    }


NewRelic.startAgent(appToken);
NewRelic.setJSAppVersion(appVersion.version);

Step three: Android setup

To ensure that the React Native agent is compatible with Android, install the Android specific agent:

Install the New Relic native Android agent using these instructions .

Update build.gradle:

buildscript {
    ...
    repositories {
      ...
      mavenCentral()
    }
    dependencies {
      ...
      classpath "com.newrelic.agent.android:agent-gradle-plugin:6.4.1"
    }
  }

Update app/build.gradle:

apply plugin: "com.android.application"
  apply plugin: 'newrelic' // <-- add this

Make sure your app requests INTERNET and ACCESS_NETWORK_STATE permissions by adding these lines to your AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Step four: XCFramework setup

To ensure that the React Native agent is compatible with all iOS frameworks, install the New Relic XCFramework agent:

Install the New Relic XCFramework agent:
bash
```
$npx pod-install
```

Optional: Expo integration

Integration with Expo is possible in both bare workflow and custom managed workflow via config plugins.

Bare workflow: Please follow the above installation steps instead.
Managed workflow: After installing our package, add the config plugin to the plugins array of your app.json or app.config.js.

For the managed work flow, you need to use the expo prebuild --clean command as described in the Adding custom native code guide to rebuild your app with the plugin changes. If this command is not running, you'll get errors when starting the New Relic agent.

Modify and understand your data

API calls

Our React Native agent utilizes the same API calls as our iOS and Android SDK agents. Please refer to New Relic iOS SDK doc or Android SDK.

JavaScript errors

You can see JavaScript errors under the custom events section and you can also query them using NRQL.

You can also build a dashboard for errors using this query:

SELECT jsAppVersion,name,Message,errorStack,isFatal FROM `JS Errors` SINCE 24 hours ago

If you need help getting started with dashboards, see Introduction to dashboards.