React Native is an open-source framework developed by Facebook that enables developers to build mobile applications for iOS, Android, and other platforms using JavaScript and React. React Native allows developers to create native-like apps with a high level of performance while writing most of their codebase in JavaScript, which is familiar to many web developers. React Native uses native components under the hood instead of rendering WebViews like hybrid frameworks, resulting in a better user experience and smoother interactions.
In the complicated arena of mobile application development, it's the responsibility of product managers and developers to design applications that not only provide impeccable functionality but also provide exceptional performance and a compelling user experience. Comprehensive performance monitoring is essential for accomplishing these demanding goals. By continuously monitoring the app's performance, teams may effectively discover and resolve any underlying issues that may adversely affect the app's overall performance, ensuring that users experience nothing less than excellence.
How to get started
Increase the speed of your React Native app analysis and gain valuable insights in under 10 minutes.
1. Install React Native agent.
New Relic provides an SDK (aka the React Native agent) for your application instrumentation. To install the SDK, follow these steps:
- Add the SDK agent.
Using Yarn:
Using NPM:
- Initialize React Native agent. In index.js add the following code to launch New Relic:
Note: Don’t forget to put the proper application token(s) for Android and iOS applications.
2. Install the New Relic native Android agent.
3. Install the New Relic iOS agent using below command:
4. Link the New Relic library to your React Native project and rebuild the application. React Native 0.60+ includes “autolinking” for seamless integration.
- Android applications autolinking:
- iOS applications autolinking:
5. Verify React Native app’s proper function by executing below commands. Fatal JavaScript errors will be visible as crashes in New Relic UI.
After instrumenting your React Native app, you can gather key mobile telemetry data, such as crashes, HTTP requests, failures, and events. Use New Relic analytics to improve your app's speed and UX. Here are few reasons why it's helpful:
1. Data-backed decisions
Performance monitoring tools provide deeper insights into problems faced by users. Visualize significant information on user-friendly dashboards, set alerts to refer problems to relevant features, and proactively manage issues.
2. JavaScript error insight
The Handled Exceptions page in New Relic reveals JavaScript failures and promise rejections. It displays event trails, attributes, and stack traces for each JavaScript error that has been gathered.
Use the following query to access these errors, allowing you to create a dashboard for cohesive visualization.
3. ANR detection and capture
Application not responding (ANR) situations are an unpleasant problem with users that often end up in negative app reviews and ratings. Leading ANR causes include timed-out input dispatch and long-running operations on the main thread.
The native agent detects ANR events efficiently, pointing out situations where activities or service threads are obstructed above Android's allowable level. For foreground activities, this threshold is 5 seconds, and for services, it ranges from 5 to 200 seconds. ANR situations, unlike crashes, are reported as handled exceptions.
4. Spotting rooted devices
Manufacturers restrict devices for safety reasons, while rooted devices provide administrators complete OS control. A rooted smartphone grants you extra privileges and allows you to customize it, but it can also signal disaster. Some of the potential issues linked with rooted devices include security breaches, data loss, and so on.
5. Breadcrumbs
Breadcrumbs are a simplified form of session logging that collects metadata throughout a session and transmits it all at once at the end of the session. This approach minimizes the burden on the device's CPU and RAM, avoids separate network calls, and has no impact on the app's performance. Breadcrumbs can be used to debug crashes, provide insights into user behavior, and track user journeys.
To use breadcrumbs, add this code to your project:
For more details on how to use this method, see Record breadcrumbs.
Once you’ve recorded breadcrumbs, you’ll see them in crash analysis in the UI.
6. Service maps
Service maps are interactive graphical representations of your architecture. These dynamic maps depict detailed relationships and dependencies within the application, comprising critical pieces like databases, hosts, servers, and external services.
7. Unveiling memory exhaustion incidents
You can use the New Relic agent to monitor out of memory (OOM) errors, which are caused by insufficient memory. These errors frequently confuse users because they see it as an abrupt app shutdown, similar to a crash. This degrades the user experience, which may result in app abandonment or unfavorable ratings
8. Crash reports
This provides insights about the crash happening, including:
- Granular device and OS breakdown
- App version analytics
- Occurence enumeration
- User impact assessment
- Sequentially delineated crash-related interactions and events
- Curated subsets of incidents
Conclusion
Monitoring React Native mobile applications is more than just a requirement; it is a beneficial, proactive approach. Building an app is merely the first engagement. Your applications achieve a distinctive advantage within a competitive market landscape, potentially enhancing overall business outcomes, through methodical performance monitoring, preemptive issue resolution, and strategic user engagement optimization.
Next steps
If you’re an existing New Relic customer, see the following links:
- Monitoring your React Native application
- Learn how to configure your mobile monitoring settings and to use pre-built mobile analytics dashboards
- Flutter Mobile application monitoring to boost UX
- New and improved mobile SDK API documentation
Don’t have New Relic yet? Sign up for a free account. Your account includes 100 GB/month of free data ingest, one free full-access user, and unlimited free basic users.
The views expressed on this blog are those of the author and do not necessarily reflect the views of New Relic. Any solutions offered by the author are environment-specific and not part of the commercial solutions or support offered by New Relic. Please join us exclusively at the Explorers Hub (discuss.newrelic.com) for questions and support related to this blog post. This blog may contain links to content on third-party sites. By providing such links, New Relic does not adopt, guarantee, approve or endorse the information, views or products available on such sites.