React Native Web View Tracking

Overview

Real User Monitoring (RUM) allows you to monitor web views and eliminate blind spots in your hybrid React Native applications.

You can perform the following:

  • Track user journeys across web and native components in mobile applications
  • Scope the root cause of latency to web pages or native components in mobile applications
  • Support users that have difficulty loading web pages on mobile devices

RUM supports web views created using react-native-webview.

Setup

Prerequisites

Set up the RUM Browser SDK on the web page you want rendered on your mobile React Native application. For more information, see RUM Browser Monitoring.

Add react-native-webview to your application following the official installation documentation.

Instrument your web views

Import WebView from @datadog/mobile-react-native-webview instead of react-native-webview:

import { WebView } from '@datadog/mobile-react-native-webview';
// or
import WebView from '@datadog/mobile-react-native-webview';

You can use all existing functionalities from react-native-webview as the WebView component from @datadog/mobile-react-native-webview wraps the react-native-webview component.

Provide the list of hosts to be tracked by Datadog inside the web view by using the allowedHosts prop of your WebView component:

<WebView
    source={{ uri: 'https://www.example.com' }}
    allowedHosts={['example.com']}
/>

Access your web views

Your web views appear in the RUM Explorer with associated service and source attributes. The service attribute indicates the web component the web view is generated from, and the source attribute denotes the mobile application’s platform, such as React Native.

Filter on your React Native applications, and click a session. A side panel with a list of events in the session appears.

webview session example

Click Open View waterfall to navigate from the session to a resource waterfall visualization in the view’s Performance tab.