Monitor your React Native application

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. Then the agent sends that data for you to analyze in the UI.

The agent 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.

Requirements

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

• Android API 24+
• iOS 10
• iOS native requirements
• Android native requirements

Native support levels are based on React Native requirements.

Setup

If you haven't already, create your free New Relic account below to start monitoring your data today.

Complete these five steps to monitor your React Native applications.

Step one: Agent installation

Run the following:

$
npm i newrelic-react-native-agent

Step two: React Native setup

Now open your index.js and add the following code to launch NewRelic:

import NewRelic from 'newrelic-react-native-agent';
import {name, version} from './package.json';
import {Platform} from 'react-native';

    let appToken;

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

 const agentConfiguration = {
    
    //Android Specific
    // Optional:Enable or disable collection of event data.
    analyticsEventEnabled: true,

    // Optional:Enable or disable crash reporting.
    crashReportingEnabled: true,

    // Optional:Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested. This will disable default and custom interactions.
    interactionTracingEnabled: true,

    // Optional:Enable or disable reporting successful HTTP requests to the MobileRequest event type.
    networkRequestEnabled: true,

    // Optional:Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
    networkErrorRequestEnabled: true,

    // Optional:Enable or disable capture of HTTP response bodies for HTTP error traces, and MobileRequestError events.
    httpRequestBodyCaptureEnabled: true,

   // Optional:Enable or disable agent logging.
    loggingEnabled: true,

    // Optional:Specifies the log level. Omit this field for the default log level.
    // Options include: ERROR (least verbose), WARNING, INFO, VERBOSE, AUDIT (most verbose).
    logLevel: NewRelic.LogLevel.INFO,

    // iOS Specific
    // Optional:Enable/Disable automatic instrumentation of WebViews
    webViewInstrumentation: true,

    // Optional:Set a specific collector address for sending data. Omit this field for default address.
    // collectorAddress: "",

    // Optional:Set a specific crash collector address for sending crashes. Omit this field for default address.
    // crashCollectorAddress: ""
  };


NewRelic.startAgent(appToken,agentConfiguration);
NewRelic.setJSAppVersion(version);
AppRegistry.registerComponent(name, () => App);

Step three: Android setup

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

1. Install the New Relic native Android agent using these instructions .

2. Update build.gradle:

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

   Copy

3. Update app/build.gradle:

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

   Copy

4. 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" />

   Copy

Step four: iOS setup

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

$
npx pod-install

Step five: Autolinking and rebuilding

The React Native New Relic library must be linked to your project and your application needs to be rebuilt. If you use React Native 0.60+, you automatically have access to autolinking, requiring no further manual installation steps.

Android applications

npx react-native run-android

iOS applications

cd ios/
pod install --repo-update
cd ..
npx react-native run-ios

In order to make sure that the React Native application functioning properly, you can run following commands, and fatal JS errors will show up as a crash in the New Relic UI.

npx react-native run-ios --configuration Release

npx react-native run-android --variant=release

Expo integration (optional)

Integration with Expo is automatic with bare workflow but requires some extra steps for custom managed workflow via config plugins.

To set up custom managed workflow, after installing our package, add the config plugin to the plugins array of your app.json or app.config.js.

{
      "name": "my app",
      "plugins": ["newrelic-react-native-agent"]
    }

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. For Expo Go users, the agent will require using native code. Since Expo Go does not support sending custom native code over-the-air, you can follow Expo's documentation on how to use custom native code in Expo Go.

Routing Instrumentation(Capturing Current Screen Name)

We currently provide two routing instrumentations out of the box to instrument route changes for and route changes record as Breadcrumb.

• React Navigation

• React Native Navigation

• react-navigation

  • v5 set the onStateChange to NewRelic.onStateChange in your NavigationContainer as follows:

    <NavigationContainer
        onStateChange={  NewRelic.onStateChange  }  />

    Copy

  • <=v4 set the onNavigationStateChange to NewRelic.onNavigationStateChange in your App wrapper as follows:

    export  default () => (
    <App
    onNavigationStateChange={ NewRelic.onNavigationStateChange  }  />
    );

    Copy

• react-native-navigation

  Register NewRelic.componentDidAppearListener listener using:

  Navigation.events().registerComponentDidAppearListener( NewRelic.componentDidAppearListener );

  Copy

  Alternatively, you can report your screen changes manually using the following API:

var params = {
    'screenName':'screenName'
  };
  
  NewRelic.recordBreadcrumb('navigation',params);

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.

For errors specific to React Native, you can call NewRelic.recordError(error) as follows:

import ErrorBoundary from 'react-native-error-boundary';
const errorHandler = (error: Error, stackTrace: string) => {
  NewRelic.recordError(error);
};
const App = () => (
  <ErrorBoundary onError={errorHandler}>
    <ChildrenThatCouldThrowEror />
  </ErrorBoundary>
);

JavaScript errors

React Native Agent v1.2.0 and above:

JavaScript errors and promise rejections can be seen in the Handled Exceptions tab in New Relic One. You will be able to see the event trail, attributes, and stack trace for each JavaScript error recorded.

You can also find these errors by running this query:

SELECT * FROM MobileHandledException SINCE 24 hours ago

React Native Agent v1.1.0 and below:

The React Native agent creates custom events for JavaScript errors and reports them to New Relic. In the UI, you can track these JavaScript error events with a custom dashboard.

To create a custom dashboard:

1. Go to one.newrelic.com.

2. Click Query builder.

3. Run this query:

   SELECT * FROM `JS Errors`

   Copy

4. Click Add to dashboard.

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