ブラウザエラーの収集

ブラウザエラーの収集

フロントエンドのエラーはリアルタイムモニタリング (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.');

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

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

// 処理済みの例外エラーを送信
try {
    //コードロジック
} catch (error) {
    DD_RUM.onReady(function() {
        DD_RUM.addError(error);
    })
}
// コンテキスト付きでカスタムエラーを送信
const error = new Error('Something wrong occurred.');

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

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

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

トラブルシューティング

スクリプトエラー

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

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

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

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

  1. crossorigin="anonymous" で JavaScript ライブラリをコールします。

    crossorigin="anonymous" で、スクリプトをフェッチするリクエストが安全に実行されます。Cookie や HTTP 認証を介して機密データが転送されることはありません。

  2. Access-Control-Allow-Origin HTTP ヘッダーを構成します。 

    このヘッダーで最も一般的な値は Access-Control-Allow-Origin: * で、すべてのオリジンとリソースのフェッチを許可します。代わりに、設定 (例: Access-Control-Allow-Origin: www.example.com) でリソースにアクセスできるオリジンの種類を制限することもできます。

その他の参考資料