- はじめに
- エージェント
- インテグレーション
- Watchdog
- イベント
- ダッシュボード
- モバイルアプリケーション
- インフラストラクチャー
- サーバーレス
- メトリクス
- ノートブック
- アラート設定
- APM & Continuous Profiler
- CI Visibility
- RUM & セッションリプレイ
- データベース モニタリング
- ログ管理
- セキュリティプラットフォーム
- Synthetic モニタリング
- ネットワークモニタリング
- 開発者
- API
- アカウントの管理
- データセキュリティ
- ヘルプ
セッションリプレイは、ユーザーのウェブ閲覧体験をキャプチャし、視覚的に再生することで、ユーザー体験のモニタリングを拡張します。
セッションリプレイを RUM パフォーマンスデータと組み合わせることで、エラーの特定、再現、解決に役立ち、ウェブアプリケーションの使用パターンや設計上の落とし穴を把握することができます。
セッションリプレイを使用するには、Datadog RUM ブラウザモニタリングを設定します。次のセクションを設定します: アプリケーションの作成、クライアントトークンの生成、RUM SDK の設定。
セッションリプレイは、RUM ブラウザ SDK の専用ビルドを通じて利用できます。セッションリプレイを有効にするには、選択したインストール方法に応じて、npm パッケージ名または CDN URL を変更します。
@datadog/browser-rum package
を @datadog/browser-rum
のバージョン >3.6.0 に置き換えます。記録を開始するには、datadogRum.startSessionReplayRecording()
を呼び出します。
import { datadogRum } from '@datadog/browser-rum';
datadogRum.init({
applicationId: '<DATADOG_APPLICATION_ID>',
clientToken: '<DATADOG_CLIENT_TOKEN>',
site: '<DATADOG_SITE>',
// service: 'my-web-application',
// env: 'production',
// version: '1.0.0',
sampleRate: 100,
premiumSampleRate: 100,
trackInteractions: true
});
datadogRum.startSessionReplayRecording();
ブラウザ SDK URL https://www.datadoghq-browser-agent.com/datadog-rum.js
を https://www.datadoghq-browser-agent.com/datadog-rum-v4.js
に置き換えます。DD_RUM.init()
が呼び出されると、DD_RUM.startSessionReplayRecording()
も呼び出されるまで、セッションリプレイの記録は開始されません。
セッションリプレイレコーダーは、IE11 を除き、RUM ブラウザ SDK でサポートされているすべてのブラウザをサポートしています。詳しくは、ブラウザサポートテーブルを参照してください。
通常の RUM 初期化パラメータはすべてサポートされています。
init()
を呼び出しても、セッションリプレイは自動的に記録を開始しません。記録を開始するには、startSessionReplayRecording()
を呼び出します。これは、条件付きで記録を開始する場合に役立ちます。たとえば、認証されたユーザーセッションのみを記録する場合などです。
if (user.isAuthenticated) {
DD_RUM.startSessionReplayRecording();
}
セッションリプレイの記録は、stopSessionReplayRecording()
を呼び出すことで停止できます。
セッションリプレイは現在、次の HTML 要素をサポートしていません: iframe
、video
、audio
、canvas
、ウェブコンポーネント。
セッションリプレイはビデオではなく、DOM のスナップショットに基づいて再構築された実際の iframe です。したがって、リプレイはページのさまざまなアセット (フォントと画像) に依存します。
いくつかの理由により、リプレイ時にアセットが利用できない理由が説明される場合があります。
session-replay-datadoghq.com
サンドボックスドメインでレンダリングされ、アセットリクエストはブラウザによるクロスオリジンセキュリティチェックの対象となります。指定されたアセットがドメインに対して許可されていない場合、ブラウザはリクエストをブロックします。Access-Control-Allow-Origin
ヘッダーを通して session-replay-datadoghq.com
を許可し、これらのリソースが再生時にアクセスできることを確認します。フォントや画像とは異なり、レコーダーは CSSStyleSheet インターフェイスを利用して、記録データの一部として適用されるさまざまな CSS ルールをバンドルしようとします。これが不可能な場合は、CSS ファイルへのリンクの記録にフォールバックします。
注: マウスホバーを適切にサポートするには、CSSStyleSheet インターフェイスから CSS ルールにアクセスできる必要があります。
スタイルシートがウェブページとは異なるドメインでホストされている場合、CSS ルールへのアクセスはブラウザによるクロスオリジンセキュリティチェックの対象となり、ブラウザはクロスオリジン属性を使用して CORS を利用してスタイルシートをロードするように指示される必要があります。
たとえば、アプリケーションが example.com
ドメインにあり、リンク要素を介して assets.example.com
の CSS ファイルに依存している場合、資格情報が必要な場合を除き、crossorigin
属性を anonymous
に設定する必要があります。
<link rel="stylesheet" crossorigin="anonymous"
href="https://assets.example.com/style.css”>
さらに、assets.example.com
の example.com
ドメインを承認します。これにより、Access-Control-Allow-Origin
ヘッダーを設定することにより、アセットファイルがリソースをロードできるようになります。
RUM ブラウザ SDK の一部であるセッションリプレイレコーダーは、DOM と CSS のスナップショットを取得します。ウェブページで発生するイベント (DOM の変更、マウスの移動、クリック、入力イベントなど) をタイムスタンプとともに追跡および記録します。
Datadog のリプレイビュー上では、ページが再構築され、記録されたイベントが適切なタイミングで再適用されます。
ブラウザ SDK はオープンソースで、オープンソースプロジェクト rrweb を活用しています。
セッションリプレイレコーダーがアプリケーションのパフォーマンスに与える影響を最小限に抑えるため、Datadog は、
予想されるネットワーク帯域の影響は 100Kb/分以下です。
セッションリプレイは、通常の RUM セッションと同じ 30 日間の保持ポリシーに従います。
startSessionReplayRecording()
を削除します。replaySampleRate
を 0
に設定します。これらの構成を適用するには、Browser RUM SDK をバージョン 3.6 以降にアップグレードしてください。