Enhance user experience with full insight into your React Native apps

Dynatrace is the first platform to offer auto-instrumentation for React Native UI elements and web requests.

React Native is a development framework for native iOS and Android apps. With its basis in modern web technologies, React Native enables you to leverage existing web development experience and significantly reduces development time for cross-platform mobile apps. React Native is already successfully being used in production environments by Shopify, Discord, Walmart, and many other companies. To keep your users continuously delighted with great user experience, you need full visibility into your React Native apps so you can quickly identify performance issues.

Get full visibility into your React Native app out of the box

With the release of the Dynatrace version 1.189, we now provide a React Native plugin that gives you the same monitoring capabilities for cross-platform apps that you already have for your apps written in native technologies. Dynatrace is the first platform to offer auto-instrumentation for React Native UI elements and web requests, providing full transparency into app performance out of the box, with quick and easy installation and configuration.

See the example user session of an instrumented React Native app below.

Here’s what you get

This overview describes what the Dynatrace React Native plugin helps you capture.

Quickly and easily add OneAgent to your apps

React Native is compiled for Android and iOS with the same build pipeline as native apps, using Gradle and Xcode. The Dynatrace plugin takes care of adding the respective OneAgent to the apps. The configuration is placed in a central file and distributed to the OneAgents by the plugin.

Get instant visibility into user action performance

You get a comprehensive look into the performance and health of your deployed apps.

OneAgent adds auto-instrumentation by extending React Native components and adding calls to the appropriate app life-cycle methods. Events such as app start and user actions are sent to Dynatrace so you can analyze them. Also, each web request that the app sends is monitored by OneAgent.

Instantly see the root cause of crashes and errors

Whether crashes and errors occur in the JavaScript or the native part of your app, OneAgent sends the appropriate information to Dynatrace. Crashes are summarized in the app crash analysis overview and are available for a deep dive from the web UI.

Adapt it to your needs

Autogenerated actions can be modified manually, for example, to change a name or report a value, which, in turn, can be used as session properties (support for mobile will be released very soon). You can also provide user information to be used later in analysis.

You can create user actions manually as well:

How to get started

Here’s what you need to do to get insights into any React Native app in less than 10 minutes!

1. Set up your monitored mobile app

Start by setting up a new monitored mobile app via Deploy Dynatrace in the navigation menu, choose a name, and select React Native in the instrumentation wizard.

Note: As of this writing, the instructions in the wizard have been verified for the latest React Native versions starting with version 0.60. If your project uses an older version, please check the extensive Readme at npmjs.com.

2. Install and configure OneAgent

To install and configure OneAgent for your iOS and Android apps, follow the instructions in the instrumentation wizard.

For iOS:

• If your project uses CocoaPods, run pod install after the installation.
• If you don’t use CocoaPods, the plugin handles everything for you.

For Android: The installer modifies the Gradle file so that OneAgent dependencies get resolved and native auto-instrumentation runs during the build.

The Dynatrace transformer is responsible for adding the instrumentation calls to UI elements and important app events such as app start.

Note: Every time you refine or change the configuration of the app in Dynatrace, you must re-download the configuration file in the wizard and replace the one in your project.

3. Run and verify

To verify that the setup was successful and OneAgent is instrumenting the React Native app, compile it and keep an eye on the log output of your project. A working OneAgent is shown by console messages indicating its successful startup.

The output below shows a successfully instrumented iOS project running from the command line.

If OneAgent is configured correctly, you’ll also see user actions and web requests in the Dynatrace web UI.

If no console messages mentioning OneAgent are visible, you’ll need to redo the setup. If so, you might want to first ensure the correct process by creating and instrumenting a test React Native project and then copying the configuration to the existing project.

4. Analyze your app

Analyze your app in the Dynatrace web UI. The image below shows an example of what you can expect with our out-of-the-box configuration for a user action. The monitoring capabilities of the Dynatrace platform can easily be customized and extended with manual instrumentation options. Our documentation contains all the details, and our Support team is always there to answer any questions.

The image below shows the detailed waterfall analysis of a single user action instance.

5. Dig deeper

By default, user interactions with UI elements are instrumented. For more refined monitoring, custom value reporting, and life cycle instrumentation of React Native components, check out the Readme at npmjs.com. Especially if one of your components is prone to a longer rendering time in certain circumstances, these options give you the appropriate level of insight so that you can optimize the experience of all your users.

How to stay up to date

We will release regular updates to the React Native plugin. The best way to check for the most recent version is directly at npmjs.com.

Feedback

If you use React Native or want to give it a try, let us know how we can improve your life as an app owner. The best place to reach out to us is community.dynatrace.com.

As always, you can find all relevant information in Dynatrace help.