Mobile React Native best practices guide

BETA

By eliminating crashes and increasing speed across the stack, you can build better performance into every app release. Here are some best practices to take full advantage of New Relic Mobile with React Native monitoring.

1. Start collecting data in production

You’ll see immediate value by adding New Relic Mobile to your app for its next release to the app store. We recommend adding the React Native agent to your production release even during your initial trial of New Relic, as it will ensure you’ll get an adequate amount of data to really understand all the features of New Relic Mobile and your end users’ experience.

How to do it

Best practices for collecting data in production:

  1. Add a new app in New Relic Mobile’s user interface.
  2. Download the latest version of the New Relic React Native SDK and add it to your mobile app. To take advantage of MobileRequest and MobileRequestError event data for error rates and response times of specific endpoints, use React Native agent releases 0.60 or higher. For instructions for release 0.59 or lower, see the compatibility and requirements documentation. (Full steps)

  3. Configure your installation as needed. For example: To avoid surprises, follow the standard pattern of where you start the New Relic agent. In addition, start the New Relic agent before you initiate any other SDKs. (See the React Native agent installation and configuration documentation.) If you are considering a different approach, see For more help.

  4. Deploy a new release of your application.

2. Explore key features

Take the time to explore the following features as soon as New Relic Mobile starts reporting data about your apps.

Mobile monitoring resources Comments
Crash analysis

Go to our Crash analysis UI page to analyze crash data so that you can see and fix the most impactful crashes.

JavaScript errors

View the JS errors UI page in order to pinpoint and resolve critical JS errors.

Crash event trails for crashes and JS errors

Use the Crash event trail tab in the Crash analysis and JS errors UI pages to fix crashes and resolve critical errors more easily by using breadcrumbs.

Mobile breadcrumbs

Use breadcrumbs to monitor key workflows, such as your app's login or checkout process, track user clicks, optimize timing, and identify crash locations for faster MTTR.

Session data from NRQL

Borrow from our example NRQL queries to:

  • See how much of your user base has upgraded to your latest app version.
  • Track adoption over time.
  • Get a count of new installs as compared to upgrades from an earlier version.
  • See the distribution of usage across geographical locations, carriers, ASN owners (wi-fi providers), devices, connection types, and more.
How to do it

Once your application is in production with the New Relic agent, go to rpm.newrelic.com/mobile and explore your mobile app's data. For more information, see:

3. Focus on mobile crashes

Once you are running New Relic Mobile for React Native in production and have explored some of its key features, you can use it to uncover critical issues with your mobile application, in particular, focusing on crashes and JS errors.

  1. Use metric-based alerts as a starting point to gain high-level visibility into problems.
  2. Then, as new services or functionalities are added, use New Relic’s more targeted, event-based (NRQL) alerts to make sure that the most critical issues are handled swiftly.

Use these alerts to determine whether a crash is impacting a large number of users. If it is, the relevant people (for example, both the mobile app team’s on-call member and the owner of the related back-end service) will be alerted.

Make sure that your team knows how to respond to changes in crash rate (crashes/sessions) and the percentage of users impacted by crashes of your mobile app.

How to do it: Metric-based alerts

Leverage our metric-based alerts and New Relic Mobile UI.

  1. Ensure that key members of your mobile team have opted in to receive "new crash" emails. These emails will take you to the crash type in the Mobile UI page for your React Native app.
  2. Create a crash-rate-threshold alert that key members of your team can view in Slack or any other Alerts notification channel you choose. This alert will take you to the Alerts UI to view a chart with the exceeded threshold. A link from there will take you to the relevant UI page in New Relic Mobile.
How to do it: Event-based alerts

Combine the metric-based workflow with event-based alerts and dashboards specific to your mobile app and system.

  1. Create a NRQL alert that focuses on crashes of your most recently released production version.
  2. Create a NRQL alert that focuses on the percentage of users impacted by crashes in your latest app version (to check the overall impact on your user base).

4. Take your crash reporting to the next level

Now it’s time to tackle some of those harder-to-reproduce crashes by:

  1. Applying additional instrumentation to your application.
  2. Leveraging crash event trails, NRQL queries, and dashboards to visualize your data.
How to do it: Crash analysis

Crashes are an inevitable part of running mobile applications at scale. New Relic gives you the tools to understand your highest-impact crashes. Use the Crash analysis UI to see which crashes are occurring most often, the percentage of crash-free users, which files and methods are associated with perhaps 80 percent of your crashes, which crashes a particular user just experienced, and more.

Go after high-impact crashes with crash analysis:

  1. Add custom attributes to categorize the highest-value customers, and then use them to segment crashes according to your most valuable audiences.
  2. Add breadcrumbs and custom events to produce a detailed trail of events leading up to every crash occurrence (over the last 90 days). You can then view this crash event trail in the Crash analysis UI.
  3. Use the Mobile UI's Versions trends page to make sure you’re improving the crash rate over subsequent releases and avoiding regressions.
How to do it: Breadcrumbs

Use breadcrumbs and custom attributes to better reproduce and debug crashes. For example, use Mobile's recordBreadrumb API to track mid-session changes in state that can help debug crashes, such as:

  • Change of connection type
  • Change of orientation
  • CPU and memory state at key points in the app code
How to do it: Custom attributes

Add custom attributes to existing events, so you can ask even more precise questions of your mobile app. Add dimensions such as:

  • User ID: Use to react to specific user concerns and to better understand which customers and segments are most impacted.
  • Store ID: Use to address problems with out-of-date devices, bad wi-fi, and so on.
  • User segments: Use to better understand which customers and segments are most impacted; for example, logged in vs. non-logged in.
  • Money in the cart at session end
  • Origin or attribution of entry into the app

Standardize custom attribute names across your mobile apps, and align with your website (if monitored by New Relic Browser), so that you can compare and contrast performance across end-user channels. New Relic Mobile tracks the last interaction of crashed and non-crashed sessions to provide visibility into what the user viewed before exiting your app (either intentionally or due to a crash).

5. Bring your key performance indicators to life

Create custom interactions and events to hone in on the most important signals, including user activity for the business-critical aspects of your app. Using these powerful APIs, you can add custom instrumentation to just about anything. The following are some example use cases.

How to do it: Track and query feature use

Use custom events to track feature use. For example:

  • Use custom events to track user flow between app and website.
  • Use custom events or mobile breadcrumbs to optimize the performance of key user flows (log in, shopping cart, etc.).
  • use custom events to provide faster, contextualized support experiences for your digital customers.
  • Use the recordCustomEvent API. Then compare the use of different features using:

    SELECT count(*) FROM MyNewMobileEventType FACET name
How to do it: Measure page load times

Use custom events to measure page load time:

  1. Create an app-launch timer to measure the time that elapses between a user-tap to launch your app and the point in your app code where the first screen is available. Record the timer value in New Relic using something like the following:

    recordCustomEvent(<myMobileTimers>, <appLaunch>, {attributes})
  2. Define start and stop timers to measure spinner durations, and then record this time in New Relic using something like the following:

    recordCustomEvent(<myMobileTimers>, <spinnerOnScreenA>, {attributes})
  3. Track specific user actions or funnel steps in the app (like "add to cart"), and include the price as an attribute on that event.

  4. Measure flows through the application by viewing the related funnel steps with custom events in Insights. For example, create a timer to track the start and end times of a subflow or an entire flow across multiple funnel steps to understand how long it took users to get through the process.

How to do it: Examine data about webpage interactions

Use custom interactions to see traces associated with the same webpages.

  1. Use the agent API to disable default interactions, and focus on custom interactions so that you can review the page loads that are most crucial to your primary funnel.
  2. Define the start and stop times of these custom interactions to trace activities associated with individual steps of that funnel (for example, a specific user action or a page load).
  3. Track the last interactions of crashed and non-crashed sessions so that you can see what the user viewed before exiting your app (either intentionally or from a crash).

Example query for non-crashed sessions:

SELECT count(*) FROM Mobile WHERE sessionCrashed is null FACET lastInteraction SINCE 90 days ago

Example query for crashed sessions:

SELECT count(*) FROM Mobile WHERE sessionCrashed is true FACET lastInteraction SINCE 90 days ago

Want more tips?

Want more tips about New Relic Mobile?

For more help

During the public beta, we welcome your questions and comments through the React Native beta discussion board in New Relic's Explorers Hub. Support requests also will be routed there.