- 重要な情報
- はじめに
- 用語集
- エージェント
- インテグレーション
- OpenTelemetry
- 開発者
- API
- CoScreen
- アプリ内
- インフラストラクチャー
- アプリケーションパフォーマンス
- 継続的インテグレーション
- ログ管理
- セキュリティ
- UX モニタリング
- 管理
フロントエンドのエラーはリアルタイムモニタリング (RUM) で収集されます。エラーメッセージとスタックトレースが利用できる場合は含まれます。
フロントエンドのエラーは、それぞれの error.origin
により 4 つのカテゴリーに分類されます。
console.error()
API 呼び出し。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 および グローバルイベントハンドラーについてのこちらの注釈を参照してください。このエラーが発生する原因としては以下のようなものがあります。
example.com
に static.example.com
からのアセットが含まれるなど) でホスティングされている。以下の 2 つのステップに従ってクロスオリジンスクリプトを可視化します。
crossorigin="anonymous"
で JavaScript ライブラリをコールします。
crossorigin="anonymous"
で、スクリプトをフェッチするリクエストが安全に実行されます。Cookie や HTTP 認証を介して機密データが転送されることはありません。
Access-Control-Allow-Origin
HTTP レスポンスヘッダーを構成します。
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: example.com
。サーバーが複数のオリジンのクライアントをサポートする場合、リクエストを行う特定のクライアントのオリジンを返さなければなりません。