App performance

  • Latest Dynatrace
  • Explanation
  • 1-min read
  • Published Jan 12, 2025

Dynatrace provides comprehensive app performance monitoring for React Native applications. This includes tracking app startup times, monitoring navigation between screens, and capturing view-level metrics that help you understand user experience and identify performance bottlenecks.

App start event

The app start event is automatically captured by the native OneAgent when your application launches. This event provides insights into how long it takes for your app to become usable.

What is captured

The native Android and iOS agents automatically capture:

  • Cold start—time from app process creation to the first frame rendered.
  • Warm start—time when the app is brought back from the background.
  • App lifecycle events—key milestones during the startup process.

React Native enhancements

The Dynatrace React Native plugin enhances the app start event with additional timestamps specific to React Native application lifecycle. These timestamps provide deeper insights into the JavaScript bundle loading and initialization process.

The following timestamps may be added to the app start event, depending on availability and the type of start:

  • app_start.react_native.download.start_time—when the JavaScript bundle download begins.
  • app_start.react_native.download.end_time—when the JavaScript bundle download completes.
  • app_start.react_native.run_js_bundle.start_time—when JavaScript bundle execution starts.
  • app_start.react_native.run_js_bundle.end_time—when JavaScript bundle execution completes.
  • app_start.react_native.content_appeared—when the first content appears on screen.
  • app_start.react_native.run_js_bundle.load_time—timestamp for application reload events.

These timestamps are provided internally by React Native and may not all be available for every app start, depending on the startup scenario and React Native version.

Configuration

App start monitoring is enabled by default. No additional configuration is required in your React Native code—the native agents handle this automatically.

View monitoring

Views represent individual screens of content in your application. Tracking views helps you understand user navigation patterns, identify slow-loading screens, and contextualize errors and performance issues.

There are two ways to monitor views:

  • Automatic view monitoring—enable navigation tracking in your configuration to automatically capture view changes through supported navigation libraries (enabled by default).
  • Manual view monitoring—use the startView() API to manually control when view contexts are created and updated.

These approaches should not be mixed, as the outcome is unpredictable. Choose either automatic or manual view monitoring for your application.

Automatic navigation tracking

This feature only works with @react-navigation versions 5.x through 7.x.

The following is an example of how this feature can be configured in your dynatrace.config.js file. Note that this feature is enabled by default.

react: {
  navigation: {
    enabled: true
  }
}

When this feature is enabled, the view context will represent the current state of the @react-navigation NavigationContainer. The state gets represented as a URL-style route. All subsequent events get associated with the view context and thus with the current route.

For instance, assume the following setup:

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';


const Drawer = createDrawerNavigator();


function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Feature" component={FeatureScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}


const Stack = createStackNavigator();


function FeatureScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenOne" component={ScreenOne} />
      <Stack.Screen name="ScreenTwo" component={ScreenTwo} />
    </Stack.Navigator>
  );
}

When navigating to Home, the view context will be set to /Home. When navigating to Feature and being redirected to the nested ScreenOne, the view context will be set to /Home/ScreenOne. When navigating to ScreenTwo within Feature, the view context will be set to /Feature/ScreenTwo.

Manual view instrumentation

Use the startView() method to manually track when a user enters a new screen:

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { Dynatrace } from '@dynatrace/react-native-plugin';


function ProductDetailScreen({ route }) {
  useEffect(() => {
    Dynatrace.startView('ProductDetail');
  }, []);


  return (
    <View>
      <Text>Product Details</Text>
    </View>
  );
}


export default ProductDetailScreen;

Use consistent, meaningful view names across your application. For example: Home, ProductList, ProductDetail, Checkout, OrderConfirmation.

View behavior

  • Single active view—only one view can be active at a time. Starting a new view automatically stops the previous one.
  • Event association—all events captured after startView() are associated with that view until another view is started.
  • View names—view names should be meaningful and consistent across your application.
Related tags
Digital Experience