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.
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
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:
Important
Please be sure to enter your proper application tokens. appToken
is platform-specific. You will need to generate the separate token for Android and iOS apps.
import NewRelic from 'newrelic-react-native-agent';import * as appVesrion 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(appVesrion.version);AppRegistry.registerComponent(appName, () => App);
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.6.0"}Update
app/build.gradle
:apply plugin: "com.android.application"apply plugin: 'newrelic' // <-- add thisMake sure your app requests
INTERNET
andACCESS_NETWORK_STATE
permissions by adding these lines to yourAndroidManifest.xml
:<uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
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-updatecd ..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
.
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.
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
In the New Relic data explorer, 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.