React Native Web ビュー追跡

Docs > RUM & セッションリプレイ > React Native のモニタリング > React Native Web ビュー追跡

概要

Real User Monitoring (RUM) により、React Native のハイブリッドアプリケーションの Web ビューを監視し、死角をなくすことができます。

以下を実行できます。

モバイルアプリケーションの Web とネイティブコンポーネントにまたがるユーザージャーニーの追跡
モバイルアプリケーションの Web ページやネイティブコンポーネントへのレイテンシーの根本原因を特定する
モバイルデバイスで Web ページの読み込みが困難なユーザーへの対応

RUM は react-native-webview を使って作成した Web ビューをサポートしています。

セットアップ

前提条件

モバイル React Native アプリケーションでレンダリングしたい Web ページで RUM ブラウザ SDK を設定します。詳しくは、RUM ブラウザモニタリングをご参照ください。

公式インストールドキュメントに従って、react-native-webview をアプリケーションに追加します。

Web ビューをインスツルメントする

react-native-webview ではなく、@datadog/mobile-react-native-webview から WebView をインポートします。

import { WebView } from '@datadog/mobile-react-native-webview';
// または
import WebView from '@datadog/mobile-react-native-webview';

@datadog/mobile-react-native-webview の WebViewコンポーネントは react-native-webview コンポーネントをラップしているので、react-native-webview の既存のすべての機能を使用することができます。

WebView コンポーネントの allowedHosts プロップを使用して、Datadog が追跡するホストのリストを Web ビュー内に提供します。

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

Web ビューにアクセスする

Web ビューは、関連する service と source 属性とともに RUM エクスプローラーに表示されます。service 属性は Web ビューが生成された Web コンポーネントを示し、source 属性は React Native などのモバイルアプリケーションのプラットフォームを表します。

React Native アプリケーションでフィルタリングし、セッションをクリックします。セッションのイベント一覧が表示されたサイドパネルが表示されます。

Open View waterfall をクリックすると、セッションからビューの Performance タブにあるリソースウォーターフォールの視覚化へ移動します。