ブラウザエラーの収集

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

概要

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

エラーの原因

origin によって、フロントエンドのエラーは 4 つの異なるカテゴリーに分類されます。

source: 未処理の例外または未処理のプロミス拒否 (ソースコード関連)。
console: console.error() API 呼び出し。
custom: RUM 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);
}

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