diff --git a/src/content/docs/mobile-monitoring/new-relic-monitoring-react-native/monitor-your-react-native-application.mdx b/src/content/docs/mobile-monitoring/new-relic-monitoring-react-native/monitor-your-react-native-application.mdx index 44471b9619f..22e2146ecdd 100644 --- a/src/content/docs/mobile-monitoring/new-relic-monitoring-react-native/monitor-your-react-native-application.mdx +++ b/src/content/docs/mobile-monitoring/new-relic-monitoring-react-native/monitor-your-react-native-application.mdx @@ -13,7 +13,7 @@ import mobileReactNativeSummary from 'images/mobile_screenshot-full_react-native import mobileQueryExample from 'images/mobile_screenshot-full_query-example.webp' -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. +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. + +### Agent installation [#step-one-of-install] Run the following: @@ -54,9 +56,12 @@ Run the following: npm i newrelic-react-native-agent ``` -### Step two: React Native setup [#step-two-of-install] + -Now open your `index.js` and add the following code to launch NewRelic: + +### React Native setup [#step-two-of-install] + +Now open your `index.js` and add the following code to launch New Relic: 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. @@ -123,14 +128,18 @@ NewRelic.setJSAppVersion(version); AppRegistry.registerComponent(name, () => App); ``` -### Step three: Android setup [#step-three-android-setup] + + + +### Android setup [#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 ](/docs/mobile-monitoring/new-relic-mobile-android/install-configure/install-android-apps-gradle-android-studio). +1. Install the New Relic native Android agent using these [instructions](/docs/mobile-monitoring/new-relic-mobile-android/install-configure/install-android-apps-gradle-android-studio). + 2. Update `build.gradle`: - ```js - buildscript { + + ``` buildscript { ... repositories { ... @@ -143,6 +152,7 @@ To ensure that the React Native agent is compatible with Android, install the An ``` 3. Update `app/build.gradle`: + ``` apply plugin: "com.android.application" apply plugin: 'newrelic' // <-- add this @@ -155,18 +165,25 @@ To ensure that the React Native agent is compatible with Android, install the An ``` -### Step four: iOS setup [#step-four-iOS-setup] + + + + +### iOS setup [#step-four-iOS-setup] To ensure that the React Native agent is compatible with all iOS frameworks, install the New Relic iOS agent: ```shell npx pod-install ``` + -### Step five: Autolinking and rebuilding [#step-five-autolinking-and-rebuilding] + +### Autolinking and rebuilding [#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 [#android-linking] ``` @@ -191,6 +208,9 @@ npx react-native run-ios --configuration Release ``` npx react-native run-android --variant=release ``` + + + @@ -199,6 +219,7 @@ npx react-native run-android --variant=release Integration with Expo is automatic with [bare workflow](https://docs.expo.dev/introduction/managed-vs-bare/#bare-workflow) but requires some extra steps for [custom managed workflow](https://docs.expo.io/workflow/customizing/) via [config plugins](https://docs.expo.io/guides/config-plugins/). To set up [custom managed workflow](https://docs.expo.dev/introduction/managed-vs-bare/#bare-workflow), after installing our package, add the config plugin to the plugins array of your `app.json` or `app.config.js`. + ```javascript { "name": "my app", @@ -208,7 +229,7 @@ To set up [custom managed workflow](https://docs.expo.dev/introduction/managed-v For the managed work flow, you need to use the `expo prebuild --clean` command as described in the [Adding custom native code](https://docs.expo.dev/workflow/customizing/) 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](https://docs.expo.dev/bare/using-expo-client/). -## Routing Instrumentation(Capturing Current Screen Name) +## 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. @@ -238,6 +259,7 @@ We currently provide two routing instrumentations out of the box to instrument r * **[react-native-navigation](https://github.com/wix/react-native-navigation)** Register `NewRelic.componentDidAppearListener` listener using: + ```javascript Navigation.events().registerComponentDidAppearListener( NewRelic.componentDidAppearListener ); ``` @@ -275,7 +297,7 @@ const App = () => ( ## JavaScript errors [#javascript-errors] -### React Native Agent v1.2.0 and above: +### React Native Agent v1.2.0 and higher: 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: @@ -284,12 +306,12 @@ 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: +### React Native Agent v1.1.0 and lower: 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](https://one.newrelic.com/all-capabilities). -2. Click **Query builder**. +2. Click **Query your data**. 3. Run this query: ```sql @@ -297,13 +319,21 @@ To create a custom dashboard: ``` 4. Click **Add to dashboard**. This is an image of a sample query in the Query builder.
- **[one.newrelic.com](https://one.newrelic.com/all-capabilities) > Query builder**: Use the **Query builder** to create a custom dashboard for tracking JavaScript errors from your React app. + **[one.newrelic.com](https://one.newrelic.com/all-capabilities)** > **Query your data**: Use the **Query builder** to create a custom dashboard for tracking JavaScript errors from your React app.
If you need help getting started with dashboards, see [Introduction to dashboards](/docs/query-your-data/explore-query-data/dashboards/introduction-dashboards/#get-started). + +## JavaScript console logs [#javascript-logs] + +We capture console logs from JavaScript. Go to **[one.newrelic.com](https://one.newrelic.com/all-capabilities)** > **Query your data** and add this query to find those JavaScript console logs: + +```sql +SELECT * FROM consoleEvents SINCE 24 HOURS AGO +``` \ No newline at end of file diff --git a/src/images/mobile_screenshot-full_query-example.webp b/src/images/mobile_screenshot-full_query-example.webp index 2f81f163c03..d9899e5d1de 100644 Binary files a/src/images/mobile_screenshot-full_query-example.webp and b/src/images/mobile_screenshot-full_query-example.webp differ diff --git a/src/images/mobile_screenshot-full_react-native-summary.webp b/src/images/mobile_screenshot-full_react-native-summary.webp index 0437600f9be..5a6539d1f75 100644 Binary files a/src/images/mobile_screenshot-full_react-native-summary.webp and b/src/images/mobile_screenshot-full_react-native-summary.webp differ