ブラウザエラーの収集

ドキュメント > RUM および Session Replay > アプリケーションモニタリング > RUM ブラウザモニタリング > ブラウザエラーの収集

概要

Browser SDK は、エラーメッセージやスタックトレースを含むフロントエンドエラーを収集します (利用可能な場合)。Error Tracking 製品でこれらのエラーをトリアージおよび管理する方法については、Browser Error Tracking を参照してください。

Browser SDK がエラーを収集する場合:

エラーは RUM のエラーイベントとしてキャプチャされます。
エラーイベントを含むセッションを対象とする保持フィルターは、現在のセッションを保持します。
RUM メトリクス rum.measure.error、rum.measure.session.error、および rum.measure.view.error_free は、セッションが保持されるかどうかにかかわらず更新されます。
エラーは Error Tracking でキャプチャされます。

Error Tracking ルールは_エラーイベント_には適用されず、RUM は Error Tracking の無視および除外された問題に一致するエラーイベントを引き続き記録します。エラーがエラーイベントとして記録されないようにするには、beforeSend コールバックを使用して Datadog に送信される前にエラーを破棄する必要があります。

エラーソース

フロントエンドのエラーは、いくつかの異なるソースから発生します。

エージェント: SDK の実行から
コンソール: console.error() API 呼び出しから
カスタム: addError APIで送信
レポート: ReportingObserver API から
ソース: ソースコードの未処理の例外または未処理の約束拒否から

エラー属性

すべてのイベントタイプのデフォルト属性については、データ収集を参照してください。サンプリングまたはグローバルコンテキストに対する構成の詳細については、データおよびコンテキストの変更を参照してください。

属性	タイプ	説明
`error.source`	文字列	エラーの発生元 (`console` など)。
`error.type`	文字列	エラーのタイプ (場合によってはエラーコード)。
`error.message`	文字列	イベントについて簡潔にわかりやすく説明する 1 行メッセージ。
`error.stack`	文字列	スタックトレースまたはエラーに関する補足情報。
`error.causes`	配列	追加のコンテキストを提供するエラーのリスト (オプション)。この属性は、エラーを個別に表示し、フォーマットを強化するために使用されます。詳細については、MDN ドキュメントを参照してください。

ソースエラー

ソースエラーには、エラーに関するコードレベルの情報が含まれます。さまざまなエラータイプの詳細については、MDN ドキュメントを参照してください。

属性	タイプ	説明
`error.type`	文字列	エラーのタイプ (場合によってはエラーコード)。

WebAssembly Error Tracking を構成する

WebAssembly (WASM) エラーを追跡するには、Browser SDK WASM プラグインをインストールします。プラグインと RUM Browser SDK には同じバージョンを使用してください。

npm install --save-exact \
  @datadog/browser-rum@<VERSION> \
  @datadog/browser-plugin-wasm@<VERSION>

RUM を初期化する際にプラグインを登録します。

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

datadogRum.init({
  // ...
  plugins: [makeWasmPlugin()],
});

WASM モジュールを読み込む前に RUM を初期化します。このプラグインは、ブラウザの WebAssembly API で作成されたモジュールを監視し、WASM スタックフレームを含むエラーにそれらの URL とビルド ID を追加します。これにより、アプリケーションが複数のモジュールを読み込む際に、Datadog が正しいビルド ID を選択できるようになります。

未処理のエラーは自動的に収集されます。処理済みの WASM エラーを報告するには、Error オブジェクトを addError() に渡します。

次に、WebAssembly シンボルをアップロードして、エラーをシンボル化します。

エラーを手動で収集する

処理済みの例外、処理済みのプロミス拒否、および Browser SDK で自動的に追跡されないその他のエラーを、addError() API を使用して監視します。

addError(
    error: unknown,
    context?: Context
);

注: Error Tracking は、ソースが custom、source、report、または console に設定されて送信され、スタックトレースを含むエラーを処理します。他のソース (例: network) で送信されたエラーや、ブラウザ拡張機能から送信されたエラーは、Error Tracking では処理されません。

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

// Send a custom error with context
const error = new Error('Something wrong occurred.');

datadogRum.addError(error, {
    pageStatus: 'beta',
});

// Send a network error
fetch('<SOME_URL>').catch(function(error) {
    datadogRum.addError(error);
})

// Send a handled exception error
try {
    //Some code logic
} catch (error) {
    datadogRum.addError(error);
}

// Send a custom error with context
const error = new Error('Something wrong occurred.');

window.DD_RUM.onReady(function() {
    window.DD_RUM.addError(error, {
        pageStatus: 'beta',
    });
});

// Send a network error
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    });
})

// Send a handled exception error
try {
    //Some code logic
} catch (error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    })
}

// Send a custom error with context
const error = new Error('Something wrong occurred.');

window.DD_RUM && window.DD_RUM.addError(error, {
    pageStatus: 'beta',
});

// Send a network error
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM && window.DD_RUM.addError(error);
})

// Send a handled exception error
try {
    //Some code logic
} catch (error) {
    window.DD_RUM && window.DD_RUM.addError(error);
}

React エラー境界のインスツルメンテーション

React エラー境界をインスツルメンテーションし、RUM ブラウザ SDK の addError() API を使用して React のレンダリングエラーを監視できます。

収集されたレンダリングエラーにはコンポーネントスタックが含まれます。コンポーネントスタックは、ソースマップをアップロードした後は他のエラースタックトレースと同様に非縮小化されます。

React のエラー境界を監視用にインスツルメンテーションするには、以下を使用します。

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

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

    datadogRum.addError(renderingError);
  }

  ...
}

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

    DD_RUM.onReady(function() {
       DD_RUM.addError(renderingError);
    });
  }

  ...
}

class ErrorBoundary extends React.Component {
  ...

  componentDidCatch(error, info) {
    const renderingError = new Error(error.message);
    renderingError.name = `ReactRenderingError`;
    renderingError.stack = info.componentStack;
    renderingError.cause = error;

     window.DD_RUM &&
       window.DD_RUM.addError(renderingError);

  }

  ...
}

トラブルシューティング

スクリプトエラー

セキュリティ上の理由から、クロスオリジンスクリプトによってトリガーされたエラーの詳細はブラウザに表示されません。この場合、Error Details タブには “Script error.” というエラーメッセージのみが表示されます。

クロスオリジンスクリプトについての詳細と、詳細が表示されない理由については、CORS およびグローバルイベントハンドラーについてのこちらの注釈を参照してください。このエラーが発生する原因としては以下のようなものがあります。

JavaScript ファイルが異なるホスト名 (例: example.com に static.example.com からのアセットが含まれるなど) でホスティングされている。
ウェブサイトに CDN 上でホストされる JavaScript ライブラリが含まれている。
ウェブサイトに、プロバイダーのサーバーをホストとするサードパーティの JavaScript ライブラリが含まれている。

以下の 2 つのステップに従ってクロスオリジンスクリプトを可視化します。

crossorigin="anonymous" を使用して JavaScript ライブラリを呼び出します。
crossorigin="anonymous" で、スクリプトを取得するリクエストが安全に実行されます。Cookie や HTTP 認証を介して機密データが転送されることはありません。
Access-Control-Allow-Origin HTTP レスポンスヘッダーを構成します。
- Access-Control-Allow-Origin: * すべてのオリジンがリソースを取得できるようになります。
- Access-Control-Allow-Origin: example.com 許可する 1 つのオリジンを指定します。サーバーが複数のオリジンのクライアントをサポートする場合、リクエストを行う特定のクライアントのオリジンを返さなければなりません。