RUM ブラウザモニタリング
Dash が新機能を発表!インシデントマネジメント、Continuous Profiler など多数の機能が追加されました! Dash イベントで発表された新機能!

RUM ブラウザモニタリング

概要

Datadog Real User Monitoring (RUM) を使用すると、アプリケーションの個々のユーザーのリアルタイムパフォーマンスとユーザージャーニーを視覚化して分析できます。

セットアップ

Datadog

Datadog RUM ブラウザモニタリングを設定するには

  1. Datadog で、リアルユーザーモニタリングのページに移動し、New Application ボタンをクリックします。
  2. アプリケーションの名前を入力し、Generate Client Token をクリックします。これにより、アプリケーションの clientTokenapplicationId が生成されます。
  3. Datadog RUM SDK NPM または生成されたコードスニペットをセットアップします。
  4. 変更をアプリケーションにデプロイします。実行が開始されると、ユーザーブラウザから Datadog によってイベントが収集されます。
  5. 収集されたデータは、Datadog のダッシュボードで視覚的に確認できます。

: Datadog がデータの受信を開始するまで、アプリケーションはアプリケーションリストページに「保留中」として表示されます。

NPM

@datadog/browser-rumpackage.json ファイルに追加したら、次のコマンドを実行して初期化します。

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,
  trackInteractions: true,
})

: trackInteractions パラメーターは、アプリケーション内のユーザークリックの自動収集を有効にします。ページに含まれている機密データと非公開データは、やり取りされた要素を特定するために含まれる場合があります。

バンドル

生成されたコードスニペットを、アプリケーションで監視するすべての HTML ページの head タグ(他のスクリプトタグの前にあるタグ)に追加します。同期型のスクリプトタグをより高い位置に含めると、Datadog RUM ですべてのパフォーマンスデータとエラーを収集できます。

<script src="https://www.datadoghq-browser-agent.com/datadog-rum.js" type="text/javascript"></script>
<script>
  window.DD_RUM &&
    window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APPLICATION_ID>',
      site: '<DATADOG_SITE>',
      //  service: 'my-web-application',
      //  env: 'production',
      //  version: '1.0.0',
      sampleRate: 100,
      trackInteractions: true,
    })
</script>

:

  • trackInteractions パラメーターは、アプリケーション内のユーザークリックの自動収集を有効にします。ページに含まれている機密データと非公開データは、やり取りされた要素を特定するために含まれる場合があります。
  • window.DD_RUM チェックは、RUM SDK で読み込みエラーが起きた際に問題を防ぐために使用されます。

TypeScript

タイプは TypeScript >= 3.0 と互換性があります。以前のバージョンの場合は、JS ソースをインポートし、グローバル変数を使用してコンパイルの問題を回避します。

import '@datadog/browser-rum/bundle/datadog-rum'

window.DD_RUM.init({
  applicationId: 'XXX',
  clientToken: 'XXX',
  site: 'datadoghq.com',
  resourceSampleRate: 100,
  sampleRate: 100,
})

コンフィギュレーション

初期化パラメーター

次のパラメーターを使用できます。

パラメータータイプ必須デフォルト説明
applicationId文字列RUM アプリケーションの ID。
clientToken文字列Datadog クライアントトークン
site文字列datadoghq.com組織の Datadog サイト。US: datadoghq.com、EU: datadoghq.eu
service文字列アプリケーションのサービス名。
env文字列アプリケーションの環境 (例: prod、pre-prod、staging)
version文字列アプリケーションのバージョン (例: 1.2.3、6c44da20、2020.02.13)
trackInteractionsBooleanfalseユーザーアクションの自動収集を有効にします。
resourceSampleRate数値100リソースを収集するセッションのうち追跡されるセッションの割合。100 は全てのセッションが追跡されることを、0 は追跡されるセッションがないことを意味します。
sampleRate数値100追跡するセッションの割合。100 は全てを、0 は皆無を意味します。追跡されたセッションのみが rum イベントを送信します。
silentMultipleInitBooleanfalseDatadog の RUM がページ上ですでに初期化されている場合、初期化が暗黙に失敗します。
proxyHost文字列オプションのプロキシホスト (例: www.proxy.com)。詳細については、完全なプロキシ設定ガイドを参照してください。
allowedTracingOriginsリストトレースヘッダーを挿入するために使用されるリクエスト元のリスト。

logs SDK も使用する場合、一致するコンフィギュレーションが必要なオプション:

パラメータータイプ必須デフォルト説明
trackSessionAcrossSubdomainsBooleanfalse同じサイトのサブドメイン間でセッションを保持します。
useSecureSessionCookieBooleanfalse安全なセッション Cookie を使用します。これにより、安全でない (HTTPS 以外の) 接続で送信される RUM イベントが無効になります。
useCrossSiteSessionCookieBooleanfalse安全なクロスサイトセッション Cookie を使用します。これにより、サイトが別のサイトから読み込まれたときに、logs SDK を実行できます (iframe)。useSecureSessionCookie を意味します。

追跡を開始するには、Init を呼び出す必要があります。

init(configuration: {
    applicationId: string,
    clientToken: string,
    site?: string,
    resourceSampleRate?: number
    sampleRate?: number,
    silentMultipleInit?: boolean,
    trackInteractions?: boolean,
    service?: string,
    env?: string,
    version?: string,
    allowedTracingOrigins?: Array<String|Regexp>,
    trackSessionAcrossSubdomains?: boolean,
    useSecureSessionCookie?: boolean,
    useCrossSiteSessionCookie?: boolean,
})

クリックアクションに名前を付ける

RUM ライブラリは、さまざまな戦略を使用して、クリックアクションに自動的に名前を付けます。さらにコントロールする必要がある場合は、クリック可能な要素 (またはその親のいずれか) に data-dd-action-name 属性を定義して、アクションに名前を付けます。次に例を示します。

<a class="btn btn-default" href="#" role="button" data-dd-action-name="Login button">Login</a>
<div class="alert alert-danger" role="alert" data-dd-action-name="Dismiss alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>