- 重要な情報
- アプリ内
- インフラストラクチャー
- アプリケーションパフォーマンス
- 継続的インテグレーション
- ログ管理
- セキュリティ
- UX モニタリング
- 管理
Datadog Real User Monitoring (RUM) を使用すると、アプリケーションの個々のユーザーのリアルタイムパフォーマンスとユーザージャーニーを視覚化して分析できます。
RUM React Native SDK をサポートする最低バージョンは、React Native v0.63.4 以降です。それ以前のバージョンに対する互換性は、標準では保証されていません。
RUM React Native SDK は、Expo に対応しています。詳しくは、Expo ドキュメントをご覧ください。
NPM でインストールするには、以下を実行します。
npm install @datadog/mobile-react-native
Yarn でインストールするには、以下を実行します。
yarn add @datadog/mobile-react-native
バージョン 1.0.0-rc5 以降では、Android アプリケーションのセットアップで compileSdkVersion = 31 が必要です。これは Build Tools バージョン 31、Android Gradle Plugin バージョン 7、および Gradle バージョン 7 以上が必要であることを意味します。バージョンを変更するには、アプリケーションのトップレベル build.gradle ファイルの buildscript.ext ブロックの値を変更します。Datadogは、React Native バージョン 0.67 以上の使用を推奨しています。
Datadog アプリで、UX Monitoring > RUM Applications > New Application へ移動します。
アプリケーションタイプとして react-native を選択します。
アプリケーション名を入力して一意の Datadog アプリケーション ID とクライアントトークンを生成します。
クライアント IP またはジオロケーションデータの自動ユーザーデータ収集を無効にするには、これらの設定のチェックボックスをオフにします。
データの安全性を確保するため、クライアントトークンを使用する必要があります。@datadog/mobile-react-native ライブラリの構成に Datadog API キーのみを使用した場合、クライアント側で React Native アプリケーションのコード内で公開されます。
クライアントトークンのセットアップについて、詳しくはクライアントトークンに関するドキュメントを参照してください。
import {
DdSdkReactNative,
DdSdkReactNativeConfiguration
} from '@datadog/mobile-react-native';
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true, // ユーザーインタラクション (ボタンのタップなど) を追跡します。
true, // XHR リソースを追跡します
true // エラーを追跡します
);
config.site = 'US1';
// オプション: ネイティブクラッシュレポートを有効または無効にします
config.nativeCrashReportEnabled = true;
// オプション: RUM セッションのサンプル (この例では、セッションの 80% が Datadog に送信されます。 デフォルトは 100%)
config.sessionSamplingRate = 80;
// オプション: アプリとバックエンド間のネットワークコールのトレースインテグレーションのサンプル (この例では、インスツルメントされたバックエンドへのコールの 80％ が RUM ビューから APM ビューにリンクされます。デフォルトは 20%)
// バックエンドでトレースを有効にするには、バックエンドのホストを指定する必要があります
config.resourceTracingSamplingRate = 80;
config.firstPartyHosts = ['example.com']; // 'example.com' と 'api.example.com' のようなサブドメインにマッチします
// オプション: 報告されるサービス名を設定します (デフォルトでは、Android または iOS アプリのパッケージ名または bundleIdentifier をそれぞれ使用します)
config.serviceName = 'com.example.reactnative';
// オプション: SDK に指定されたレベル以上の内部ログを出力させる。デフォルトは undefined (ログを出力しない)
config.verbosity = SdkVerbosity.WARN;
await DdSdkReactNative.initialize(config);
// Datadog React Native SDK for RUM を初期化したら、RUM ダッシュボードでデータを見ることができるように、ビュー追跡を設定する必要があります。
import {
DdSdkReactNative,
DdSdkReactNativeConfiguration
} from '@datadog/mobile-react-native';
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true, // ユーザーインタラクション (ボタンのタップなど) を追跡します。
true, // XHR リソースを追跡します
true // エラーを追跡します
);
config.site = 'US3';
// オプション: ネイティブクラッシュレポートを有効または無効にします
config.nativeCrashReportEnabled = true;
// オプション: RUM セッションのサンプル (ここでは、セッションの 80% が Datadog に送信されます。 デフォルトは 100%)
config.sessionSamplingRate = 80;
// オプション: アプリとバックエンド間のネットワークコールのトレースインテグレーションのサンプル (ここでは、インスツルメントされたバックエンドへのコールの 80％ が RUM ビューから APM ビューにリンクされます。デフォルトは 20%)
// バックエンドでトレースを有効にするには、バックエンドのホストを指定する必要があります
config.resourceTracingSamplingRate = 80;
config.firstPartyHosts = ['example.com']; // 'example.com' と 'api.example.com' のようなサブドメインにマッチします
await DdSdkReactNative.initialize(config);
// Datadog React Native SDK for RUM を初期化したら、RUM ダッシュボードでデータを見ることができるように、ビュー追跡を設定する必要があります。
import {
DdSdkReactNative,
DdSdkReactNativeConfiguration
} from '@datadog/mobile-react-native';
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true, // ユーザーインタラクション (ボタンのタップなど) を追跡します。
true, // XHR リソースを追跡します
true // エラーを追跡します
);
config.site = 'US5';
// オプション: ネイティブクラッシュレポートを有効または無効にします
config.nativeCrashReportEnabled = true;
// オプション: RUM セッションのサンプル (ここでは、セッションの 80% が Datadog に送信されます。 デフォルトは 100%)
config.sessionSamplingRate = 80;
// オプション: アプリとバックエンド間のネットワークコールのトレースインテグレーションのサンプル (ここでは、インスツルメントされたバックエンドへのコールの 80％ が RUM ビューから APM ビューにリンクされます。デフォルトは 20%)
// バックエンドでトレースを有効にするには、バックエンドのホストを指定する必要があります
config.resourceTracingSamplingRate = 80;
config.firstPartyHosts = ['example.com']; // 'example.com' と 'api.example.com' のようなサブドメインにマッチします
await DdSdkReactNative.initialize(config);
// Datadog React Native SDK for RUM を初期化したら、RUM ダッシュボードでデータを見ることができるように、ビュー追跡を設定する必要があります。
import {
DdSdkReactNative,
DdSdkReactNativeConfiguration
} from '@datadog/mobile-react-native';
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true, // ユーザーインタラクション (ボタンのタップなど) を追跡します。
true, // XHR リソースを追跡します
true // エラーを追跡します
);
config.site = 'EU1';
// オプション: ネイティブクラッシュレポートを有効または無効にします
config.nativeCrashReportEnabled = true;
// オプション: RUM セッションのサンプル (ここでは、セッションの 80% が Datadog に送信されます。 デフォルトは 100%)
config.sessionSamplingRate = 80;
// オプション: アプリとバックエンド間のネットワークコールのトレースインテグレーションのサンプル (ここでは、インスツルメントされたバックエンドへのコールの 80％ が RUM ビューから APM ビューにリンクされます。デフォルトは 20%)
// バックエンドでトレースを有効にするには、バックエンドのホストを指定する必要があります
config.resourceTracingSamplingRate = 80;
config.firstPartyHosts = ['example.com']; // 'example.com' と 'api.example.com' のようなサブドメインにマッチします
await DdSdkReactNative.initialize(config);
// Datadog React Native SDK for RUM を初期化したら、RUM ダッシュボードでデータを見ることができるように、ビュー追跡を設定する必要があります。
import {
DdSdkReactNative,
DdSdkReactNativeConfiguration
} from '@datadog/mobile-react-native';
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true, // ユーザーインタラクション (ボタンのタップなど) を追跡します。
true, // XHR リソースを追跡します
true // エラーを追跡します
);
config.site = 'US1_FED';
// オプション: ネイティブクラッシュレポートを有効または無効にします
config.nativeCrashReportEnabled = true;
// オプション: RUM セッションのサンプル (ここでは、セッションの 80% が Datadog に送信されます。 デフォルトは 100%)
config.sessionSamplingRate = 80;
// オプション: アプリとバックエンド間のネットワークコールのトレースインテグレーションのサンプル (ここでは、インスツルメントされたバックエンドへのコールの 80％ が RUM ビューから APM ビューにリンクされます。デフォルトは 20%)
// バックエンドでトレースを有効にするには、バックエンドのホストを指定する必要があります
config.resourceTracingSamplingRate = 80;
config.firstPartyHosts = ['example.com']; // 'example.com' と 'api.example.com' のようなサブドメインにマッチします
await DdSdkReactNative.initialize(config);
// Datadog React Native SDK for RUM を初期化したら、RUM ダッシュボードでデータを見ることができるように、ビュー追跡を設定する必要があります。
デフォルトでは、Datadog React Native SDK は version をアプリの商用バージョンとして報告します (例えば、“1.2.44”)。
Microsoft の CodePush のような OTA (Over The Air) アップデートプロバイダーを使用している場合、このバージョンをオーバーライドして、JavaScript コードの実行バージョンを表示することができます。
Datadog では、DdSdkReactNativeConfiguration オブジェクトに versionSuffix を使用することを推奨しています。
const config = new DdSdkReactNativeConfiguration(
'<CLIENT_TOKEN>',
'<ENVIRONMENT_NAME>',
'<RUM_APPLICATION_ID>',
true,
true,
true
);
config.versionSuffix = 'codepush.3';
アプリの商用バージョンが “1.2.44” の場合、Datadog では “1.2.44-codepush.3” と報告されます。バージョンとサフィックスの間にダッシュ (-) が自動的に追加されます。
また、version フィールドを指定することで、バージョンを完全にオーバーライドすることもできます。ただし、ソースマップやその他のマッピングファイルのアップロード時に指定したものと一致させる必要があるため、正しく設定してください。
バージョンフィールドの制限については、タグドキュメントを参照してください。
上記のコード例のようにユーザーインタラクションの追跡が有効になっている場合、Datadog React Native SDK は、タップを受け取ったコンポーネントから始まるコンポーネントの階層をトラバースし、dd-action-name プロパティを探します。見つかったら、報告されたアクションの名前として使用されます。
または、accessibilityLabel 要素プロパティを使用して、タップアクションに名前を付けることもできます。それ以外の場合は、要素タイプが報告されます。サンプルアプリで使用例を確認できます。
React Native は、画面ナビゲーションを作成するためのさまざまなライブラリを提供しているため、デフォルトでは手動のビュートラッキングのみがサポートされています。Datadog で RUM セッションの入力を表示するには、ビュートラッキングを実装する必要があります。
次の startView() および stopView メソッドを使用して、ビューを手動で開始および停止できます。
import {
DdSdkReactNative,
DdSdkReactNativeConfiguration,
DdLogs,
DdRum
} from '@datadog/mobile-react-native';
// 一意のビュー識別子、カスタムビュー名、オブジェクトを使用してビューを開始し、ビューに追加の属性をアタッチします
DdRum.startView(
'<view-key>', // <view-key> は一意でなければなりません。例えば ViewName-unique-id とすることができます
'View Name',
{ 'custom.foo': 'something' },
Date.now()
);
// 同じ一意のビュー識別子と、ビューに追加の属性をアタッチするオブジェクトを使用して、以前に開始したビューを停止します
DdRum.stopView('<view-key>', { 'custom.bar': 42 }, Date.now());
次のライブラリには、Datadog のインテグレーションの 1 つを使用して、ビューを自動的に追跡します。
react-native-navigation ライブラリを使用する場合は、@datadog/mobile-react-native-navigation パッケージを追加し、セットアップ手順に従います。react-navigation ライブラリを使用する場合は、@datadog/mobile-react-navigation パッケージを追加し、セットアップ手順に従います。すべての RUM イベントにユーザー情報をアタッチして、RUM セッションのより詳しい情報を入手することができます。
ユーザー特有の情報については、必要に応じてアプリで以下のコードを使用します（SDK の初期化後）。id、name、email 属性は Datadog に組み込まれていますが、アプリに適したその他の属性を追加できます。
DdSdkReactNative.setUser({
id: '1337',
name: 'John Smith',
email: 'john@example.com',
type: 'premium'
});
ユーザー情報を消去したい場合 (例えば、ユーザーがサインアウトしたとき)、以下のように空のオブジェクトを渡すことで消去できます。
DdSdkReactNative.setUser({});
また、グローバル属性を維持して A/B テストのコンフィギュレーション、広告キャンペーン元、カートのステータスなど指定したセッションに関する情報を追跡することも可能です。
DdSdkReactNative.setAttributes({
profile_mode: 'wall',
chat_enabled: true,
campaign_origin: 'example_ad_network'
});
データが Datadog にアップロードされる前に、アプリケーションのキャッシュディレクトリに平文で保存されます。このキャッシュフォルダは、Android のアプリケーションサンドボックスによって保護されており、ほとんどのデバイスで、このデータは他のアプリケーションによって読み取られることはありません。しかし、モバイルデバイスがルート化されていたり、誰かが Linux カーネルをいじったりすると、保存されているデータが読めるようになる可能性があります。
データは Datadog にアップロードされる前に、アプリケーションサンドボックスのキャッシュディレクトリ (Library/Caches) に平文で保存され、デバイスにインストールされた他のアプリからは読み取ることができません。
開発モードでは、アプリケーションは、コード変換エラー、ローカル開発サーバーへの要求など、React Native ツールに関連する追加のイベントを送信できます。
これらのイベントがダッシュボードに表示されないようにするには、__DEV__ フラグを使用して、開発モードでのエラーとリソースの追跡を無効にします。
const config = new DdSdkReactNativeConfiguration(
CLIENT_TOKEN,
ENVIRONMENT,
APPLICATION_ID,
true,
!__DEV__ /* trackResources は DEV モードでは false になり、それ以外の場合は true になります */,
!__DEV__ /* trackErrors は DEV モードでは false になり、それ以外の場合は true になります */,
trackingConsent
)
use_frameworks! での使用もし Podfile で use_frameworks! を有効にしている場合、SDK を追加した後に pod install を実行すると、このようなエラーが発生する可能性があります。
The 'Pods-MyApp' target has transitive dependencies that include statically linked binaries: (DatadogSDKBridge, DatadogSDKCrashReporting)
このエラーを防ぐには、use_frameworks! を上書きして、フレームワークである必要があるものを除いて、すべてのポッドを静的にインストールすることができます。
dynamic_frameworks = ['DatadogSDKBridge','DatadogSDKCrashReporting']
# static_framework? 関数をオーバーライドして、他のすべてのフレームワークを静的フレームワークにし、true を返すようにします
pre_install do |installer|
installer.pod_targets.each do |pod|
if !dynamic_frameworks.include?(pod.name)
def pod.static_framework?;
true
end
def pod.build_type;
Pod::BuildType.static_library
end
end
end
end
注: この解決策は、この StackOverflow の投稿に由来しています。
詳細については、Apache ライセンス、v2.0を参照
お役に立つドキュメント、リンクや記事:
