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.
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.
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']}
/>
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.
{{< 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.