React Native is an open source framework for building cross-platform mobile applications. With React Native, developers can easily reuse the same JavaScript code for iOS, Android, and the browser, with only minimal need to accommodate specific platforms. But while React Native is designed to abstract away device-specific architecture and APIs, developers still need to monitor their applications in production in order to ensure the best experience for their customers—and prevent customer churn.

While React Native’s built-in profiler provides performance insights in your development environment, it doesn’t allow you to monitor what’s actually running on your users’ devices. Datadog Real User Monitoring (RUM) gives you detailed insight into user behavior and application performance, regardless of whether your applications run on mobile devices or in the browser. Mobile RUM supports React Native monitoring, so you can track errors, crashes, launch time, user actions, and network requests, as well as:

• Get comprehensive visibility into user behavior
• Determine which errors you need to investigate first
• Find the causes of long load times and dropped frames

Get a window into user behavior

To spot possible issues or performance bottlenecks, you’ll need to understand how users interact with your UI—regardless of whether they’ve downloaded your application from the Google Play Store or Apple App Store. Additionally, because many apps built with React Native include hybrid components, you’ll want to combine related data from your web and native mobile views for a complete picture of your user journeys and frustration points. Datadog automatically groups user actions from the same session, so you can see which users loaded each view of your application, how they interacted with it, and whether any errors disrupted their experience. And with hybrid app monitoring, you can analyze web actions right alongside mobile ones, giving you seamless visibility into your UX.

For example, after deploying a change to the checkout flow of our shopping application, we receive notifications from a RUM alert that our application is emitting more errors than usual. When we investigate the issue via the RUM Explorer, we see that some users are encountering Payment information was invalid errors after tapping the screen within the Checkout view. Since checkout errors can affect the core of our business, we want to determine how pervasive the errors are so we can investigate further.

We filter the RUM Explorer by the number of views, time spent, and number of actions, to see how extensively users interact with our application in a given session, and how often users are abandoning their sessions. We find the critical piece of evidence by navigating from the RUM Explorer to RUM Analytics, where we can visualize trends in user experience over time. In this case, we see that sessions ending in the Checkout view comprise a small portion of our overall application usage, and decide to address this issue during the next sprint without declaring an incident.

Investigate errors faster

Errors in React Native applications can be difficult to debug without real-time telemetry from user devices. Not all errors lead to crashes—and users must opt into crash reporting on iOS and Android—so it’s not always possible to rely on crash reports to know that there is a problem. Datadog Mobile RUM automatically reports errors from your applications, so you can catch problems in your applications before your users leave negative reviews.

We use the RUM Explorer to investigate the checkout errors we triaged earlier, and notice more errors than usual over a one-hour period, not only with invalid payment information (as we first noticed), but also with adding items to carts. Further, after noticing that these errors tend to affect Android users rather than iOS users, we can drill down to analyze RUM data from that specific subset of customers. Since the errors tend to originate within our application source code (seen in the “ERROR SOURCE” above), rather than our backend API, we know that we have to contact members of our mobile application team, rather than our infrastructure or web application teams.

Find performance bottlenecks

If your React Native application fails to render each UI change in under 16.67 ms, the reduction in frame rate will cause visible lag for users. But because of the declarative nature of React Native code, your applications might unexpectedly re-render components behind the scenes. You’ll also need to check whether images, fonts, and other resources are slowing down loading times. React Native supports loading images and other media by either bundling them with your application or using HTTP requests, so you should make sure that the architecture you choose is right for your application.

With Mobile RUM, Datadog helps you discover the sources of bottlenecks by automatically tracking the time your application spends during various events, such as handling screen taps or loading resources (as shown in the below screenshot). Mobile RUM also provides Mobile Vitals for your React Native apps, so you can easily spot slow refresh rates for both native and JavaScript processes, as well as frozen frames and poor resource usage.

While debugging our new checkout flow during our sprint, we notice that the JSON responses from our checkout API take seconds to load for some users (as shown above). To get more context, we use RUM Analytics to see how many resources our application needs to load from the network, and how long these network requests tend to take. It turns out that our application relies entirely on asynchronous HTTP requests for its external resources and that, on average, these requests take a very long time to complete (as shown below).

From here, we can use a geomap to see where in the world our React Native API traffic tends to originate, and whether geographic distance could be behind the latency. We can also explore the traces connected to our RUM data to figure out why the API backend is returning 500 errors.

React faster with RUM

Now that Datadog Mobile RUM supports React Native monitoring, you can get unified visibility into your React-based applications, whether they run in the browser or on iOS and Android devices. To set up RUM for your React Native applications, import Datadog’s RUM SDK in your React Native code. For most use cases, the SDK will automatically instrument your application, so you can track performance, errors, and user behavior with minimal configuration. You can also add custom instrumentation to get the precise visibility you need. For more information on our React Native RUM SDK, check out our documentation. If you’re new to Datadog, sign up for a free trial to get started.