- 重要な情報
- はじめに
- 用語集
- エージェント
- インテグレーション
- OpenTelemetry
- 開発者
- API
- CoScreen
- アプリ内
- インフラストラクチャー
- アプリケーションパフォーマンス
- 継続的インテグレーション
- ログ管理
- セキュリティ
- UX モニタリング
- 管理
RUM によって収集されたデータを変更して、次のニーズをサポートするには、さまざまな方法があります。
RUM SDK は、ユーザーが新しいページにアクセスするたびに、またはページの URL が変更されたときに (シングルページアプリケーションの場合)、ビューイベントを自動的に生成します。ビュー名は現在のページの URL から計算され、可変英数字 ID は自動的に削除されます。たとえば、/dashboard/1234
は /dashboard/?
になります。
バージョン 2.17.0 からは、trackViewsManually
オプションでビューイベントを手動で追跡することにより、ビュー名を追加して、チームが所有する専用サービスに割り当てることができます。
trackViewsManually
を true に設定します。import { datadogRum } from '@datadog/browser-rum';
datadogRum.init({
...,
trackViewsManually: true,
...
});
window.DD_RUM.onReady(function() {
window.DD_RUM.init({
...,
trackViewsManually: true,
...
})
})
window.DD_RUM &&
window.DD_RUM.init({
...,
trackViewsManually: true,
...
});
新しいページまたはルート変更 (単一ページアプリケーションの場合) ごとにビューを開始する必要があります。RUM データは、ビューの開始時に収集されます。バージョン 4.13.0 からは、オプションで、関連するサービス名およびバージョンを定義できます。
詳しくは、ブラウザモニタリングの設定をご覧ください。
checkout
ページのページビューを手動で追跡しています。ビュー名には checkout
を使用し、purchase
サービスをバージョン 1.2.3
に関連付けます。datadogRum.startView({
name: 'checkout',
service: 'purchase',
version: '1.2.3'
})
window.DD_RUM.onReady(function() {
window.DD_RUM.startView({
name: 'checkout',
service: 'purchase',
version: '1.2.3'
})
})
window.DD_RUM && window.DD_RUM.startView({
name: 'checkout',
service: 'purchase',
version: '1.2.3'
})
v4.13.0
より前checkout
ページのページビューを手動で追跡しています。サービスやバージョンを指定することはできません。datadogRum.startView('checkout')
window.DD_RUM.onReady(function() {
window.DD_RUM.startView('checkout')
})
window.DD_RUM && window.DD_RUM.startView('checkout')
React、Angular、Vue、またはその他のフロントエンドフレームワークを使用している場合、Datadog はフレームワークルーターレベルで startView
ロジックを実装することをお勧めします。
RUM ブラウザ SDK は RUM イベントをキャプチャし、それらの主な属性を設定します。beforeSend
コールバック関数を使用すると、RUM ブラウザ SDK によって収集されたイベントが Datadog に送信される前に、そのすべてのイベントにアクセスできます。
RUM イベントをインターセプトすると、次のことが可能になります。
バージョン 2.13.0 以降、beforeSend
は 2 つの引数を取ります。RUM ブラウザ SDK によって生成された event
と、RUM イベントの作成をトリガーした context
です。
function beforeSend(event, context)
潜在的な context
値は次のとおりです。
RUM イベントタイプ | コンテキスト |
---|---|
ビュー | 場所 |
アクション | イベント |
リソース (XHR) | XMLHttpRequest と PerformanceResourceTiming |
リソース (フェッチ) | リクエスト、リソース、PerformanceResourceTiming |
リソース (その他) | PerformanceResourceTiming |
Error | エラー |
ロングタスク | PerformanceLongTaskTiming |
詳細については、RUM データの強化と制御ガイドを参照してください。
グローバルコンテキスト API や 機能フラグのデータ収集で追加された属性に加えて、イベントにコンテキスト属性を追加できます。たとえば、フェッチ応答オブジェクトから抽出されたデータで RUM リソースイベントにタグを付けます。
import { datadogRum } from '@datadog/browser-rum';
datadogRum.init({
...,
beforeSend: (event, context) => {
// RUM リソースの応答ヘッダーを収集します
if (event.type === 'resource' && event.resource.type === 'fetch') {
event.context = {...event.context, responseHeaders: context.response.headers}
}
},
...
});
window.DD_RUM.onReady(function() {
window.DD_RUM.init({
...,
beforeSend: (event, context) => {
// RUM リソースの応答ヘッダーを収集します
if (event.type === 'resource' && event.resource.type === 'fetch') {
event.context = {...event.context, responseHeaders: context.response.headers}
}
},
...
})
})
window.DD_RUM &&
window.DD_RUM.init({
...,
beforeSend: (event, context) => {
// RUM リソースの応答ヘッダーを収集します
if (event.type === 'resource' && event.resource.type === 'fetch') {
event.context = {...event.context, responseHeaders: context.response.headers}
}
},
...
});
ユーザーが複数のチームに所属している場合は、グローバルコンテキスト API を呼び出す際に、Key-Value ペアを追加してください。
RUM ブラウザ SDK は以下を無視します。
event.context
の外に追加された属性機能フラグ追跡ベータ版に参加するために、データ収集の設定を行います。
RUM イベントデータを機能フラグでリッチ化することで、パフォーマンスモニタリングにさらなるコンテキストと可視性を得ることができます。これにより、どのユーザーに特定のユーザーエクスペリエンスが表示され、それがユーザーのパフォーマンスに悪影響を及ぼしているかどうかを判断することができます。
たとえば、Web アプリケーションの URL からメールアドレスを編集するには
import { datadogRum } from '@datadog/browser-rum';
datadogRum.init({
...,
beforeSend: (event) => {
// ビューの URL からメールを削除します
event.view.url = event.view.url.replace(/email=[^&]*/, "email=REDACTED")
},
...
});
window.DD_RUM.onReady(function() {
window.DD_RUM.init({
...,
beforeSend: (event) => {
// ビューの URL からメールを削除します
event.view.url = event.view.url.replace(/email=[^&]*/, "email=REDACTED")
},
...
})
})
window.DD_RUM &&
window.DD_RUM.init({
...,
beforeSend: (event) => {
// ビューの URL からメールを削除します
event.view.url = event.view.url.replace(/email=[^&]*/, "email=REDACTED")
},
...
});
次のイベントプロパティを更新できます。
属性 | タイプ | 説明 |
---|---|---|
view.url | 文字列 | アクティブな Web ページの URL。 |
view.referrer | 文字列 | 現在リクエストされているページへのリンクがたどられた前のウェブページの URL。 |
action.target.name | 文字列 | ユーザーが操作した要素。自動的に収集されたアクションの場合のみ。 |
error.message | 文字列 | エラーについて簡潔にわかりやすく説明する 1 行メッセージ。 |
error.stack | 文字列 | スタックトレースまたはエラーに関する補足情報。 |
error.resource.url | 文字列 | エラーをトリガーしたリソース URL。 |
resource.url | 文字列 | リソースの URL。 |
context | オブジェクト | グローバルコンテキスト API を使って、またはイベントを手動で生成するときに追加される属性 (例: addError および addAction )。RUM ビューイベント context は読み取り専用です。 |
RUM ブラウザ SDK は、上記にリストされていないイベントプロパティに加えられた変更を無視します。イベントプロパティの詳細については、RUM ブラウザ SDK GitHub リポジトリを参照してください。
beforeSend
API で、false
を返し RUM イベントを破棄します。
import { datadogRum } from '@datadog/browser-rum';
datadogRum.init({
...,
beforeSend: (event) => {
if (shouldDiscard(event)) {
return false
}
...
},
...
});
window.DD_RUM.onReady(function() {
window.DD_RUM.init({
...,
beforeSend: (event) => {
if (shouldDiscard(event)) {
return false
},
...
},
...
})
})
window.DD_RUM &&
window.DD_RUM.init({
...,
beforeSend: (event) => {
if (shouldDiscard(event)) {
return false
}
...
},
...
});
RUM セッションにユーザー情報を追加すると、次の役に立ちます。
次の属性はオプションですが、Datadog は少なくとも 1 つを指定することを推奨しています。
属性 | タイプ | 説明 |
---|---|---|
usr.id | 文字列 | 一意のユーザー識別子。 |
usr.name | 文字列 | RUM UI にデフォルトで表示されるユーザーフレンドリーな名前。 |
usr.email | 文字列 | ユーザー名が存在しない場合に RUM UI に表示されるユーザーのメール。Gravatar をフェッチするためにも使用されます。 |
推奨される属性に加えてさらに属性を追加することで、フィルタリング機能を向上できます。たとえば、ユーザープランに関する情報や、所属するユーザーグループなどを追加します。
ユーザーセッションオブジェクトに変更を加えた場合、変更後に収集されるすべての RUM イベントには、更新された情報が含まれます。
注: ログアウトのようにユーザーセッション情報を削除すると、ログアウト前の最後のビューではユーザー情報が保持されますが、それ以降のビューやセッションレベルでは、セッションデータは最後のビューの値を使用するため保持されません。
datadogRum.setUser(<USER_CONFIG_OBJECT>)
datadogRum.setUser({
id: '1234',
name: 'John Doe',
email: 'john@doe.com',
plan: 'premium',
...
})
window.DD_RUM.onReady(function() {
window.DD_RUM.setUser({
id: '1234',
name: 'John Doe',
email: 'john@doe.com',
plan: 'premium',
...
})
})
window.DD_RUM && window.DD_RUM.setUser({
id: '1234',
name: 'John Doe',
email: 'john@doe.com',
plan: 'premium',
...
})
datadogRum.getUser()
datadogRum.getUser()
window.DD_RUM.onReady(function() {
window.DD_RUM.getUser()
})
window.DD_RUM && window.DD_RUM.getUser()
datadogRum.setUserProperty('<USER_KEY>', <USER_VALUE>)
datadogRum.setUserProperty('name', 'John Doe')
window.DD_RUM.onReady(function() {
window.DD_RUM.setUserProperty('name', 'John Doe')
})
window.DD_RUM && window.DD_RUM.setUserProperty('name', 'John Doe')
datadogRum.removeUserProperty('<USER_KEY>')
datadogRum.removeUserProperty('name')
window.DD_RUM.onReady(function() {
window.DD_RUM.removeUserProperty('name')
})
window.DD_RUM && window.DD_RUM.removeUserProperty('name')
datadogRum.clearUser()
datadogRum.clearUser()
window.DD_RUM.onReady(function() {
window.DD_RUM.clearUser()
})
window.DD_RUM && window.DD_RUM.clearUser()
デフォルトでは、収集セッション数にサンプリングは適用されていません。収集セッション数に相対サンプリング (% 表示) を適用するには、RUM を初期化する際に sessionSampleRate
パラメーターを使用します。
下記の例では、RUM アプリケーションの全セッションの 90% のみを収集します。
import { datadogRum } from '@datadog/browser-rum';
datadogRum.init({
applicationId: '<DATADOG_APPLICATION_ID>',
clientToken: '<DATADOG_CLIENT_TOKEN>',
site: '<DATADOG_SITE>',
sessionSampleRate: 90,
});
window.DD_RUM.onReady(function() {
window.DD_RUM.init({
clientToken: '<CLIENT_TOKEN>',
applicationId: '<APPLICATION_ID>',
site: '<DATADOG_SITE>',
sessionSampleRate: 90,
})
})
window.DD_RUM &&
window.DD_RUM.init({
clientToken: '<CLIENT_TOKEN>',
applicationId: '<APPLICATION_ID>',
site: '<DATADOG_SITE>',
sessionSampleRate: 90,
});
サンプルとして抽出したセッションでは、すべてのページビューとそのセッションに紐付くテレメトリーは収集されません。
RUM を初期化した後、setGlobalContextProperty(key: string, value: any)
API を使用してアプリケーションから収集したすべての RUM イベントにコンテキストを追加します。
import { datadogRum } from '@datadog/browser-rum';
datadogRum.setGlobalContextProperty('<CONTEXT_KEY>', <CONTEXT_VALUE>);
// コード例
datadogRum.setGlobalContextProperty('activity', {
hasPaid: true,
amount: 23.42
});
window.DD_RUM.onReady(function() {
window.DD_RUM.setGlobalContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');
})
// コード例
window.DD_RUM.onReady(function() {
window.DD_RUM.setGlobalContextProperty('activity', {
hasPaid: true,
amount: 23.42
});
})
window.DD_RUM && window.DD_RUM.setGlobalContextProperty('<CONTEXT_KEY>', '<CONTEXT_VALUE>');
// コード例
window.DD_RUM && window.DD_RUM.setGlobalContextProperty('activity', {
hasPaid: true,
amount: 23.42
});
以前に定義したグローバルコンテキストプロパティを削除することができます。
import { datadogRum } from '@datadog/browser-rum';
datadogRum.removeGlobalContextProperty('<CONTEXT_KEY>');
// コード例
datadogRum.removeGlobalContextProperty('codeVersion');
window.DD_RUM.onReady(function() {
window.DD_RUM.removeGlobalContextProperty('<CONTEXT_KEY>');
})
// コード例
window.DD_RUM.onReady(function() {
window.DD_RUM.removeGlobalContextProperty('codeVersion');
})
window.DD_RUM &&
window.DD_RUM.removeGlobalContextProperty('<CONTEXT_KEY>');
// コード例
window.DD_RUM &&
window.DD_RUM.removeGlobalContextProperty('codeVersion');
setGlobalContext(context: Context)
API を使用してすべての RUM イベントのデフォルトコンテキストを置換します。
import { datadogRum } from '@datadog/browser-rum';
datadogRum.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });
// コード例
datadogRum.setGlobalContext({
codeVersion: 34,
});
window.DD_RUM.onReady(function() {
window.DD_RUM.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });
})
// コード例
window.DD_RUM.onReady(function() {
window.DD_RUM.setGlobalContext({
codeVersion: 34,
})
})
window.DD_RUM &&
window.DD_RUM.setGlobalContext({ '<CONTEXT_KEY>': '<CONTEXT_VALUE>' });
// コード例
window.DD_RUM &&
window.DD_RUM.setGlobalContext({
codeVersion: 34,
});
グローバルコンテキストをクリアするには、clearGlobalContext
を使用します。
import { datadogRum } from '@datadog/browser-rum';
datadogRum.clearGlobalContext();
window.DD_RUM.onReady(function() {
window.DD_RUM.clearGlobalContext();
});
window.DD_RUM && window.DD_RUM.clearGlobalContext();
RUM を初期化したら、getGlobalContext()
API を使用してグローバルコンテキストを読み取ります。
import { datadogRum } from '@datadog/browser-rum';
const context = datadogRum.getRumGlobalContext();
window.DD_RUM.onReady(function() {
const context = window.DD_RUM.getRumGlobalContext();
});
const context = window.DD_RUM && window.DD_RUM.getRumGlobalContext();