DEV Community: Siddhartha Khare

Optimizing React Native app performance

Siddhartha Khare — Sat, 09 Sep 2023 17:22:56 +0000

To read this full New Relic article, click here

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.

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:



yarn add newrelic-react-native-agent

Using NPM:



npm i newrelic-react-native-agent

Initialize React Native agent. In index.js add the following code to launch New Relic:



import NewRelic from 'newrelic-react-native-agent';
import {name, version} from './package.json';
import {Platform} from 'react-native';

    let appToken;

    if (Platform.OS === 'ios') {
        appToken = '<IOS-APP-TOKEN>';
    } else {
        appToken = '<ANDROID-APP-TOKEN>';
    }

 const agentConfiguration = {

    //Android Specific
    // Optional:Enable or disable collection of event data.
    analyticsEventEnabled: true,

    // Optional:Enable or disable crash reporting.
    crashReportingEnabled: true,

    // Optional:Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested. This will disable default and custom interactions.
    interactionTracingEnabled: true,

    // Optional:Enable or disable reporting successful HTTP requests to the MobileRequest event type.
    networkRequestEnabled: true,

    // Optional:Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
    networkErrorRequestEnabled: true,

    // Optional:Enable or disable capture of HTTP response bodies for HTTP error traces, and MobileRequestError events.
    httpRequestBodyCaptureEnabled: true,

   // Optional:Enable or disable agent logging.
    loggingEnabled: true,

    // Optional:Specifies the log level. Omit this field for the default log level.
    // Options include: ERROR (least verbose), WARNING, INFO, VERBOSE, AUDIT (most verbose).
    logLevel: NewRelic.LogLevel.INFO,

    // iOS Specific
    // Optional:Enable/Disable automatic instrumentation of WebViews
    webViewInstrumentation: true,

    // Optional:Set a specific collector address for sending data. Omit this field for default address.
    // collectorAddress: "",

    // Optional:Set a specific crash collector address for sending crashes. Omit this field for default address.
    // crashCollectorAddress: "",

    // Optional:Enable or disable reporting data using different endpoints for US government clients
    // fedRampEnabled: false
  };


NewRelic.startAgent(appToken,agentConfiguration);
NewRelic.setJSAppVersion(version);
AppRegistry.registerComponent(name, () => App);

Note: Don’t forget to put the proper application token(s) for Android and iOS applications.

Install the New Relic native Android agent.
Install the New Relic iOS agent using below command:



npx pod-install

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:
```
   npx react-native run-android
```

   - iOS applications autolinking:

       ```


       cd ios/ 
       pod install –-repo-update
       cd ..
       npx react-native run-ios

Verify React Native app’s proper function by executing below commands. Fatal JavaScript errors will be visible as crashes in New Relic UI.



npx react-native run-android --variant=release



npx react-native run-ios --configuration Release

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:

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.

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.



SELECT * FROM MobileHandledException SINCE 24 hours ago

SELECT JSAppVersion, JSEngine, name, exceptionMessage, exceptionCause, isFatal FROM MobileHandledException SINCE 7 DAYS AGO limit MAX

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.

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.

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:



NewRelic.recordBreadcrumb("Start Download Image",{"imageColor":"blue"});

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.

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.

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

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.

Read the full blog post at New Relic: Optimizing React Native app performance

Not an existing New Relic user? Sign up for a free account to get started! 👨‍💻

Boost UX: Monitor Flutter mobile apps efficiently

Siddhartha Khare — Fri, 04 Aug 2023 16:40:10 +0000

To read this full New Relic article, click here.

In today's dynamic digital environment, mobile applications have become an indispensable part of our daily lives. While there are many hybrid mobile platforms available, this blog will focus primarily on the Flutter platform.

Flutter, a Google-developed open-source User Interface (UI) software development kit, has become highly popular among mobile developers because of its ability to produce robust, cross-platform solutions. However, building a Flutter application is just the start. If you want your app to succeed and keep your user base happy, it is essential to implement a thorough application monitoring system. New Relic can help you do just that!

Prerequisite: Instrument your Flutter mobile app with New Relic

To get started monitoring your Flutter mobile app with New Relic, follow these steps:

Install the Flutter agent

New Relic provides an SDK (AKA the Flutter agent) for Flutter application instrumentation. To install the SDK, follow these steps:

Add the newrelic_flutter package to your pubspec.yaml file:

dependencies:
    newrelic_mobile: 1.0.1

Make sure to use the latest version of the package:

Run flutter pub get in your project directory to fetch the package.
Import the newrelic_flutter package in your Flutter application code:

import 'package:newrelic_flutter/newrelic_flutter.dart';

Initialize the Flutter agent

In your Flutter application's entry point (usually main.dart), add the following code to initialize New Relic:

import 'package:newrelic_mobile/newrelic_mobile.dart';

    var appToken = "";

    if (Platform.isAndroid) {
        appToken = "<android app token>"; // Replace with your application token copied from the New Relic UI. 
    } else if (Platform.isIOS) {
        appToken = "<ios app token>"; // Replace with your application token copied from the New Relic UI. 
    }

    Config config =
        Config(accessToken: appToken,

        //Android Specific
        // Optional: Enable or disable collection of event data.
        analyticsEventEnabled: true,

        // Optional: Enable or disable reporting successful HTTP requests to the MobileRequest event type.
        networkErrorRequestEnabled: true,

        // Optional: Enable or disable reporting network and HTTP request errors to the MobileRequestError event type.
        networkRequestEnabled: true,

        // Optional: Enable or disable crash reporting.
        crashReportingEnabled: true,

        // Optional: Enable or disable interaction tracing. Trace instrumentation still occurs, but no traces are harvested. This will disable default and custom interactions.
        interactionTracingEnabled: true,

        // Optional: Enable or disable capture of HTTP response bodies for HTTP error traces and MobileRequestError events.
        httpResponseBodyCaptureEnabled: true,

        // Optional: Enable or disable agent logging.
        loggingEnabled: true,

        // iOS specific
        // Optional: Enable or disable automatic instrumentation of WebViews
        webViewInstrumentation: true,

        //Optional: Enable or disable Print Statements as Analytics Events
        printStatementAsEventsEnabled : true,

        // Optional: Enable or disable automatic instrumentation of HTTP Request
        httpInstrumentationEnabled:true
        );

    NewrelicMobile.instance.start(config, () {
        runApp(MyApp());
    });

    class MyApp extends StatelessWidget {
    ....

Make sure to replace your application token(s) in the above code with the token generated at this step of the documentation.

Note: If you are instrumenting both Android and iOS native apps, ensure to create and add both tokens in the code.

Build and deploy your application

Build your Flutter application as you normally would and deploy it to your desired platform (Android, iOS, or both). The Flutter agent will automatically start collecting performance data and sending it to your New Relic account.

Analyze and view your flutter application data in New Relic

Login to your New Relic portal.
Click on Mobile and select your Flutter application.
The Summary page is where you will find the curated view of your data over time.

After instrumenting your Flutter app, you can gather mobile telemetry data about crashes, HTTP requests, handled exceptions, event trails, and other crucial metrics. Keep reading to learn how you can use New Relic's mobile monitoring features to collect critical performance data and gain valuable insights to improve your app's performance and user experience.

Detect Performance Bottlenecks

Flutter apps run on various devices and operating systems, each with its own specifications and constraints. Performance bottlenecks must be found to ensure a seamless user experience. Monitoring apps provides real-time information on CPU/memory usage, network requests, and rendering performance. Monitoring this data allows developers to optimize code to handle issues such as UI lags, slow loading, and excessive resource consumption in responsive apps.

Track and Debug Errors in Real Time

Despite comprehensive testing and quality assurance, production errors and incidents can occur. Flutter application monitoring tools enable developers to capture and trace errors in real time, providing helpful insights into app stability. With this knowledge, developers can release hotfixes quickly while minimizing any impact on user experience.

Use New Relic Errors Inbox, our error tracking capability offers a centralized hub, to effortlessly view, prioritize, and resolve errors across the entire application stack. It seamlessly integrates with the mobile UI, streamlining the triaging of mobile errors without requiring any additional workload setup.

Optimize the User Experience

In the real world, mobile app user interfaces may behave differently on various screen sizes, which can cause a poor user experience for some users. For instance, text could overflow on an iPhone14 but display correctly on an iPhone14 max. We capture such errors and store them in the mobile Dart Errors table for future iterations. With this data, you can easily pinpoint the issue and fix it, improving the user experience.

You can use the below query to view the UI Errors Details page, which shows the line of code that is causing errors in your application's UI. To visualize and track these errors in your New Relic’s account you can create a dashboard, which can help you quickly identify and fix the problems.

FROM `Mobile Dart Errors` SELECT * since 1 week ago

FROM `Mobile Dart Errors` SELECT count(*) FACET deviceManufacturer, reason, stackTrace since 1 week ago

Note: You can also use our awesome pre-built dashboards for mobile crash and mobile network analysis.

Utilize Distributed Tracing

Obtain a holistic view of request journeys, commencing from your mobile app and traversing through intricate distributed systems, facilitating comprehensive monitoring and analysis capabilities.

The goal of distributed tracing is to figure out how the whole system performs across all the different parts like an app, a backend, cloud functions, databases, and so on. In this article, I’m just covering the app and a simple backend, though. In order to figure out how the system performs, we trace the flow of a request from the app to the backend. Based on that data, you should, later on, be able to troubleshoot requests that exhibit high latency or errors.

Analyze Event Trails

Delve into the mobile monitoring crash event trail, a comprehensive chronicle unveiling the precise sequence of events leading to app crashes. This unlocks the true essence of the crash event trail and harnesses its invaluable insights by visualizing what caused the crash.

Conclusion

In the ever-evolving realm of mobile app development, Flutter application monitoring emerges as a pivotal game-changer for organizations. It empowers you to outshine the ordinary and deliver truly exceptional user experiences. By systematically monitoring performance, proactively resolving issues, and optimizing user engagement, your applications gain a competitive edge in a crowded market and ultimately can improve business outcomes.

Read the full blog post at New Relic: Boost UX: Monitor Flutter mobile apps efficiently

Not an existing New Relic user? Sign up for a free account to get started! 👨‍💻