Collecting Browser Errors このページは日本語には対応しておりません。随時翻訳に取り組んでいます。翻訳に関してご質問やご意見ございましたら、お気軽にご連絡ください。
概要 Front-end errors are collected with with Browser SDK. The error message and stack trace are included when available.
エラーソース フロントエンドのエラーは、いくつかの異なるソースから発生します。
agent : SDK の実行からconsole : console.error()
API コールからcustom : Sent with the addError
APIreport : ReportingObserver
API からsource : ソースコードの未処理の例外または未処理の約束拒否からエラー属性 For information about the default attributes for all event types, see Data Collected . For information about configuring for sampling or global context see Modifying Data and Context .
属性 タイプ 説明 error.source
文字列 エラーの発生元 (console
など)。 error.type
文字列 エラーのタイプ (場合によってはエラーコード)。 error.message
文字列 イベントについて簡潔にわかりやすく説明する 1 行メッセージ。 error.stack
文字列 スタックトレースまたはエラーに関する補足情報。
ソースエラー ソースエラーには、エラーに関するコードレベルの情報が含まれます。エラーの種類に関する詳細は、 MDN ドキュメント を参照してください。
属性 タイプ 説明 error.type
文字列 エラーのタイプ (場合によってはエラーコード)。
エラーを手動で収集する Monitor handled exceptions, handled promise rejections, and other errors not tracked automatically by the Browser SDK with the addError()
API:
Copy
addError (
error : unknown ,
context ?: Context
);
Note : Error Tracking processes errors that are sent with the source set to custom
, source
or report
, and contain a stack trace. Errors sent with any other source (such as console
) or sent from browser extensions are not processed by Error Tracking.
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 );
}
React error boundaries instrumentation 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: *
許可された 1 つのオリジンを指定する Access-Control-Allow-Origin: example.com
。サーバーが複数のオリジンのクライアントをサポートする場合、リクエストを行う特定のクライアントのオリジンを返さなければなりません。 その他の参考資料