- 重要な情報
- はじめに
- 用語集
- ガイド
- エージェント
- インテグレーション
- OpenTelemetry
- 開発者
- API
- CoScreen
- アプリ内
- Service Management
- インフラストラクチャー
- アプリケーションパフォーマンス
- 継続的インテグレーション
- ログ管理
- セキュリティ
- 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
追加したポッドをインストールします。
(cd ios && pod install)
バージョン 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 DatadogProviderConfiguration(
'<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;
//App コンポーネントのコンテンツを DatadogProvider コンポーネントでラップし、 構成を渡します。
export default function App() {
return (
<DatadogProvider configuration={config}>
<Navigation />
</DatadogProvider>
);
}
// 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
パッケージを追加し、セットアップ手順に従います。@datadog/mobile-react-navigation
で View 追跡を設定する際に問題がある場合は、弊社のサンプルアプリケーションを参考にすることができます。
すべての 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 サポートまでお問い合わせください。
アプリケーションがバックグラウンドにあるとき (例えば、アクティブなビューがないとき)、クラッシュやネットワークリクエストなどのイベントを追跡することができます。
Datadog の構成で、初期化時に以下のスニペットを追加します。
configuration.trackBackgroundEvents = true;
データが 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)
このエラーを防ぐには、Podfile
を編集して、React Native SDK ポッドを静的ライブラリとしてインストールします。
static_libraries = ['DatadogSDKReactNative']
# static_framework? 関数をオーバーライドして true を返すようにすることで、静的依存関係を持つポッドを静的ライブラリに変えます
pre_install do |installer|
installer.pod_targets.each do |pod|
if static_libraries.include?(pod.name)
def pod.static_framework?;
true
end
def pod.build_type;
Pod::BuildType.static_library
end
end
end
end
注: この解決策は、この StackOverflow の投稿に由来しています。
お役に立つドキュメント、リンクや記事: