Browser Error Tracking

ドキュメント > Error Tracking > フロントエンドの Error Tracking > Browser Error Tracking

概要

Error Tracking は、Browser SDK によってブラウザから収集されたエラーを処理します。スタックトレースを含む source、custom、report、または console エラーが収集されるたびに、Error Tracking はそれを処理し、Error Tracking Explorer で確認できる Issue、つまり類似したエラーのグループとしてまとめます。

前提条件

Browser SDK の最新バージョンをダウンロードします。

セットアップ

ブラウザアプリケーションから Datadog に Error Tracking データの送信を開始するには、「アプリ内のセットアップ手順」に従うか、以下の手順に従ってください。

ステップ 1 – アプリケーションを作成する

Datadog で、Errors > Settings > Browser and Mobile > Add an Application ページに移動し、[JavaScript (JS)] アプリケーションタイプを選択します。
アプリケーション名を入力し、[Create Application] をクリックします。これにより、アプリケーションの clientToken と applicationId が生成されます。

ステップ 2 – 適切なインストール方法を選択する

Browser SDK のインストールタイプを選択します。

最新の Web アプリケーションでは、npm (Node Package Manager) を使用したインストールが推奨されます。Browser SDK は、フロントエンドの JavaScript コードの残りの部分と一緒にパッケージ化されています。それで、ページのロードパフォーマンスには影響しません。ただし、SDK が初期化される前にトリガーされたエラー、リソース、ユーザーアクションは、SDK で捕捉できない場合があります。Datadog では、Browser Logs SDK と一致するバージョンの使用を推奨しています。

@datadog/browser-rum を package.json ファイルに追加し、次のように初期化します。

import { datadogRum } from '@datadog/browser-rum';

datadogRum.init({

   applicationId: '<APP_ID>',
   clientToken: '<CLIENT_TOKEN>',
   service: '<SERVICE>',
   env: '<ENV_NAME>',
   // site: '<SITE>',
   // version: '1.0.0',
   trackUserInteractions: true,
   trackResources: true
});

trackUserInteractions パラメーターを使用すると、アプリケーション内でのユーザーのクリック操作を自動的に収集できます。操作対象の要素を特定するために、ページに含まれる機密情報や個人情報が収集データに含まれる場合があります。

パフォーマンス目標がある Web アプリケーションには、CDN 経由での非同期インストールが推奨されます。Browser SDK は Datadog の CDN から非同期でロードされ、SDK のダウンロードがページのロードパフォーマンスに影響を与えることはありません。ただし、SDK が初期化される前にトリガーされたエラー、リソース、ユーザーアクションは、SDK で捕捉できない場合があります。

生成されたコードスニペットを、アプリケーションで監視するすべての HTML ページの head タグに追加します。サイトの場合:

<script>
  (function(h,o,u,n,d) {
    h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
    d=o.createElement(u);d.async=1;d.src=n;d.crossOrigin=''
    n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js','DD_RUM')
  window.DD_RUM.onReady(function() {
    window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // site: '<SITE>',
      service: '<APP_ID>',
      env: '<ENV_NAME>',
      // version: '1.0.0'
    });
  })
</script>

すべてのイベントを収集するには、CDN 経由での同期インストールが推奨されます。Browser SDK は Datadog の CDN から同期的にロードされ、最初にロードされること、すべてのエラー、リソース、およびユーザーアクションを収集できることを保証します。この方法はページのロードパフォーマンスに影響を与える可能性があります。

生成されたコードスニペットを、アプリケーションで監視するすべての HTML ページの head タグ (他の script タグの前) に追加します。script タグを上部に配置し、同期的にロードすることで、Datadog RUM によりすべてのパフォーマンスデータとエラーを収集できるようになります。サイトの場合:

<script
    src="https://www.datadoghq-browser-agent.com/us1/v7/datadog-rum.js"
    type="text/javascript"
    crossorigin>
</script>
<script>
    window.DD_RUM && window.DD_RUM.init({
      clientToken: '<CLIENT_TOKEN>',
      applicationId: '<APP_ID>',
      // site: '<SITE>',
      service: '<APP_ID>',
      env: '<ENV_NAME>',
      // version: '1.0.0'
    });
</script>

TypeScript (オプション)

TypeScript プロジェクトで SDK を初期化する場合は、以下のコードスニペットを使用してください。型定義は TypeScript 3.8.2 以降と互換性があります。

それより前のバージョンの TypeScript を使用している場合は、コンパイル時の問題を避けるため、JavaScript ソースをインポートし、グローバル変数を使用してください。

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

window.DD_RUM.init({
  applicationId: 'XXX',
  clientToken: 'XXX',
  site: 'datadoghq.com',
  trackUserInteractions: true,
  trackResources: true,
  ...
})

ステップ 3 – 環境と設定を構成する

unified service tagging を使用するために、[Environment] フィールドでアプリケーションの環境 (env) を定義します。
unified service tagging を使用するために、[Service] フィールドでアプリケーションのサービス (service) を定義します。
ユーザー入力のプライバシーレベルを設定します。詳細については、「Session Replay ブラウザのプライバシーオプション」を参照してください。
初期化スニペットで、デプロイするアプリケーションのバージョン番号 (version) を設定します。詳細については、「タグ付け」を参照してください。
必要に応じて追加のパラメーターを設定します。利用可能なすべてのオプションについては、以下の」構成リファレンス」セクションを参照してください。