ブラウザエラーの収集

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

概要

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

エラーソース

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

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

エラー属性

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

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

ソースエラー

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

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

エラーを手動で収集する

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

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