ブラウザエラーの収集

Docs > RUM & セッションリプレイ > RUM ブラウザモニタリング > ブラウザエラーの収集

フロントエンドのエラーはリアルタイムモニタリング (RUM) で収集されます。エラーメッセージとスタックトレースが利用できる場合は含まれます。

エラーの原因

フロントエンドのエラーは、それぞれの error.origin により 4 つのカテゴリーに分類されます。

source: 未処理の例外または未処理の約束拒否（ソースコード関連）。
console: console.error() API 呼び出し。
custom: RUM addError API と共に送信されるエラー。

エラー属性

すべての RUM イベントタイプのデフォルト属性に関する詳細は、収集されるデータをご覧ください。サンプリングまたはグローバルコンテキストの構成に関する情報は、RUM データとコンテキストの変更をご覧ください。

属性	タイプ	説明
`error.source`	文字列	エラーの発生元 (`console` など)。
`error.type`	文字列	エラーのタイプ (場合によってはエラーコード)。
`error.message`	文字列	イベントについて簡潔にわかりやすく説明する 1 行メッセージ。
`error.stack`	文字列	スタックトレースまたはエラーに関する補足情報。

ソースエラー

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

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

エラーを手動で収集する

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

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

注: エラー追跡機能では、custom または source に設定されたソースに送信され、スタックトレースを含むエラーが処理します。その他のソース（console など）で送信されたエラーは、エラー追跡で処理されません。

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

// コンテキスト付きでカスタムエラーを送信
const error = new Error('Something wrong occurred.');

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

// ネットワークエラーを送信
fetch('<SOME_URL>').catch(function(error) {
    datadogRum.addError(error);
})

// 処理済みの例外エラーを送信
try {
    //コードロジック
} catch (error) {
    datadogRum.addError(error);
}

// コンテキスト付きでカスタムエラーを送信
const error = new Error('Something wrong occurred.');

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

// ネットワークエラーを送信
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    });
})

// 処理済みの例外エラーを送信
try {
    //コードロジック
} catch (error) {
    window.DD_RUM.onReady(function() {
        window.DD_RUM.addError(error);
    })
}

// コンテキスト付きでカスタムエラーを送信
const error = new Error('Something wrong occurred.');

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

// ネットワークエラーを送信
fetch('<SOME_URL>').catch(function(error) {
    window.DD_RUM && window.DD_RUM.addError(error);
})

// 処理済みの例外エラーを送信
try {
    //コードロジック
} catch (error) {
    window.DD_RUM && window.DD_RUM.addError(error);
}

トラブルシューティング

スクリプトエラー

セキュリティ上の理由から、クロスオリジンスクリプトによりトリガーされるエラーの詳細はブラウザに表示されません。この場合、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: *
- 許可された 1 つのオリジンを指定する Access-Control-Allow-Origin: example.com。サーバーが複数のオリジンのクライアントをサポートする場合、リクエストを行う特定のクライアントのオリジンを返さなければなりません。