ブラウザエラーの収集

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

概要

フロントエンドのエラーは Browser SDK で収集されます。エラーメッセージとスタックトレースが利用できる場合は含まれます。

エラーソース

フロントエンドのエラーは、いくつかの異なるソースから発生します。

agent: SDK の実行から
console: console.error() API コールから
custom: addError API を使用して送信される
report: ReportingObserver API から
source: ソースコードの未処理の例外または未処理の約束拒否から

エラー属性

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

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

ソースエラー

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

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

エラーを手動で収集する

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

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

注: Error Tracking は、ソースを custom、source または report に設定し、スタックトレースを含むエラーを処理します。その他のソース (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);
}

React エラー境界のインスツルメンテーション

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。サーバーが複数のオリジンのクライアントをサポートする場合、リクエストを行う特定のクライアントのオリジンを返さなければなりません。