Introduction to Mobile React Native


When developing mobile apps with React Native, major challenges include:

  • Improving performance
  • Keeping a consistent user flow across iOS and Android platforms without crashes

Web developers now directed to build and support the associated mobile apps may think, "The app is slow and sometimes crashes, but you know, that happens." But crashes and errors can quickly drive away your customers. To monitor performance before problems occur, and to troubleshoot crashes if they do occur, use New Relic Mobile's React Native agent.

Why it matters

React Native's ability to use the same language to develop for any mobile platform is powerful: write once, use everywhere. But that versatility comes at a cost. Performance and stability take a big hit if disregarded, and monitoring both factors across platforms can be challenging.

Mobile React Native: Crash analysis
In this example, notice the crash spike shortly before noon. New Relic Mobile's Crash analysis page highlights the app versions, crash rate, number of users affected, location in the code, and more. The UI tools also let you quickly query and share this information.

New Relic Mobile offers a flexible and extensible agent, which extends from iOS and Android to React Native. Mobile React Native ensures the same levels of data security that our other Mobile products provide.

What you can do Why it matters
Get actionable data.

Regardless of whether your apps are for iOS or Android users, easy installation gets you up and running quickly. Use our automatic instrumentation and UI to monitor your current mobile app performance. This helps you more easily see (not guess) where there are opportunities to improve and optimize performance.

Add custom data (breadcrumbs, sessions, interactions, and other custom events).

By using the default data that New Relic automatically provides and supplementing it with your own key performance indicators, you can focus on the most important parts of your application's flow. For example:

  • Track the success or failure of each step in your user login process with breadcrumbs.
  • Track a single value for a key that can be true across a session, such as a user's subscription level, whether SAML was used to log in, etc.
  • Start a custom interaction to force the agent to start recording a trace beginning at that point in your app code and continuing across the subsequent methods and network calls.
  • Record a custom event each time a user taps a button or accesses a certain feature, and then use NRQL to track how often that feature was used.
Troubleshoot and prevent problems.

With notifications about critical situations from New Relic Alerts, you can investigate and resolve problems before they impact your customers.

Query and explore your data.

Having a wealth of mobile app data is useful, but what do you do with it? Query your data with NRQL, and share the results visually with charts and dashboards. Showing other teams and decision makers what you're monitoring will help them understand and prioritize improvements for your organization's overall end user experience.

Used separately or together, these tools help you to clearly understand which users are affected and to prioritize your issues with data-driven decisions.

Analyze crashes and JavaScript errors

Mobile React Native monitoring can help you identify and solve performance issues, including mobile crashes and JavaScript errors. Start with New Relic Mobile's Overview page, or explore the Crash analysis UI and JavaScript error UI to:

  • Understand how many app versions, devices, and users are affected by crashes and JS errors.
  • Filter and facet crash and error information to gain a deeper understanding of common problems.
  • Dive in deeper to a specific crash or error, and use these symbolicated errors to pinpoint the exact location of a crash, rather than spending precious time looking through logs.
  • Use the stack trace and event trail to understand what the app and the user were doing before the crash or error occurred.

You can also add custom events and custom attributes for improved filtering.

Get started with the React Native agent

Ready to get started? Make sure your mobile application meets the compatibility and requirements for the React Native agent, then follow the installation procedures. Within a few minutes, you will be able to view data from your application in your New Relic account's UI.

New to developing mobile applications? Check out our mobile developer's tools reference.

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 here.