ブラウザエラーの収集
Incident Management が一般に使用できるようになりました。 Incident Management が広範に使用できるようになりました。

ブラウザエラーの収集

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

エラーの原因

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

  • network: AJAX リクエストが原因の XHR または Fetch エラー。ネットワークエラーの特定の属性はネットワークエラーのドキュメントを参照してください。
  • source: 未処理の例外または未処理の約束拒否(ソースコード関連)。
  • console: console.error() API 呼び出し。
  • custom: RUM addError API (デフォルトは custom) と共に送信されるエラー。

エラー属性

すべての RUM イベントタイプのデフォルト属性に関する詳細は、収集されるデータをご覧ください。サンプリング、グローバルコンテキスト、カスタムユーザーアクションの構成に関する情報は、高度なコンフィギュレーションをご覧ください。

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

ネットワークエラー

ネットワークエラーには失敗した HTTP リクエストに関する情報が含まれます。次のファセットが収集されます。

属性タイプ説明
error.resource.status_code数値応答ステータスコード。
error.resource.method文字列HTTP メソッド (POSTGET など)。
error.resource.url文字列リソースの URL。
error.resource.url_host文字列URL のホスト部分。
error.resource.url_path文字列URL のパス部分。
error.resource.url_queryオブジェクトクエリパラメーターの key/value 属性として分解された、URL のクエリ文字列部分。
error.resource.url_scheme文字列URL のプロトコル名 (HTTP または HTTPS)。
error.resource.provider.name文字列リソースプロバイダー名。デフォルトは unknown となります。
error.resource.provider.domain文字列リソースプロバイダーのドメイン。
error.resource.provider.type文字列リソースプロバイダーのタイプ (first-partycdnadanalytics など)。

ソースエラー

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

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

エラーを手動で収集する

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

addError(
    error: unknown,
    context?: Context,
    source: ErrorSource.CUSTOM | ErrorSource.NETWORK | ErrorSource.SOURCE = ErrorSource.CUSTOM
);

: エラー追跡機能では、custom または source に設定されたソースに送信され、スタックトレースを含むエラーが処理します。

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, undefined, 'network');
})

// 処理済みの例外エラーを送信
try {
    //Some code logic
} catch (error) {
    datadogRum.addError(error, undefined, 'source');
}
// コンテキスト付きでカスタムエラーを送信
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, undefined, 'network');
    });
})

// 処理済みの例外エラーを送信
try {
    //Some code logic
} catch (error) {
    DD_RUM.onReady(function() {
        DD_RUM.addError(error, undefined, 'source');
    })
}
// コンテキスト付きでカスタムエラーを送信
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, undefined, 'network');
})

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

その他の参考資料