React-Native Monitoring for react-native-webview

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][3].

Setup

$3

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][1].

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

$3

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

``javascript
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:

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

Access your web views

Your web views appear in the [RUM Explorer][2] 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.

{{< img src="real_user_monitoring/react_native/reactnative_webview_session.png" alt="webview session example" >}}

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

[1]: https://docs.datadoghq.com/real_user_monitoring/browser/#npm
[2]: https://app.datadoghq.com/rum/explorer
[3]: https://github.com/react-native-webview/react-native-webview
[4]: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md