本文へスキップ

エラートレース

Browser Monitoringは、ブラウザのフロントエンド(Front-End) エラーを収集します。 エラーメッセージおよびエラースタック情報、ブラウザ、OS、デバイス、ページのURL情報が含まれています。

エラー検索

時間の経過とともに発生したブラウザエラーを確認できます。

エラートレース

  1. 数字1希望する時間を設定してください。 最大1日前まで設定できます。

  2. チャートに表示された 数字 2棒グラフから1つを選択します。

    数字 3時間一覧から10分単位で収集したデータの中からエラーが発生した詳細時間を選択できます。

  3. 選択時点に発生したブラウザエラーのチャートの下に一覧として表示されます。

    数字 5テキスト入力ボックスに特定のキーワードを入力すると、一覧から一致するテキストをハイライト表示します。

  4. エラーの詳細を確認するには、一番左の 数字 4 詳細アイコンボタンを選択します。

エラー詳細情報を確認する

ブラウザエラーには、次の情報が含まれています。

  • errorType:エラーのタイプを意味します。 AJAXエラー、コンソールエラー、Syntaxエラーを含むソースエラーがあります。

  • pageLocation:ユーザーがアクセスしたページURLです。

  • title:ユーザーがアクセスしたページのタイトル情報です。

  • browser:ユーザーが使用したブラウザの種類です。

  • borwserVer:ユーザーが使用しているブラウザのバージョンです。

  • os:ユーザーが使用している機器のOSの種類です。

  • osVer:ユーザーが使用している機器のOSバージョンです。

  • device:ユーザーが使用している機器の種類です。

  • host:ユーザーが訪問したサーバーのドメイン名です。

  • userAgent:ユーザーが使用したブラウザから受け取った User-Agent 文字列です。

  • message:エラーメッセージです。

  • stack:エラースタック情報です。 エラースタックには、基本的に難読化されたファイル名とライン、カラム情報が含まれます。

ソースマップのアップロードとエラーコードの提供

配布されたフロントエンドコードが難読化または圧縮された場合、収集されたブラウザエラーのスタック情報を実際のコードレベルで提供することは困難です。 フロントエンドコードを配布する時点でビルドされたsource-mapを使用すると、ブラウザエラーが発生したファイル、コードラインにアクセスできます。

  1. エラースタックカラムの分析ボタンを選択します。

    エラーログ

  2. 選択したエラーログのエラースタック情報を確認できるウィンドウが表示されたらUploadボタンを選択します。

    エラースタック

  3. コードスタックのソースマップをロードしてください。

難読化されたスタック情報とJavaScriptのソースマップ情報を比較して、実際にエラーが発生したコードを確認できます。

AIエラースタック分析

Beta

エラースタック領域でエラースタック分析ボタンをクリックすると、AIがエラースタック、環境情報(ブラウザ、OS、デバイス)、ユーザー行動ログ、エラー統計を自動的に分析します。エラーの原因と影響範囲を把握し、解決方法を案内します。

分析する

  1. 分析 > エラートレースメニューに移動します。

  2. エラー一覧から分析するエラーを選択し、エラー詳細画面を開きます。

  3. エラースタック領域でエラースタック分析ボタンをクリックします。

分析結果

AIは次のデータを収集して分析します。収集可能なデータはプロジェクト設定とエラー状況によって異なる場合があります。

分析対象

データ説明
エラースタックソースマップがある場合は復元したスタックフレーム、ない場合は難読化されたスタック情報を使用します。
環境情報エラーログに含まれるブラウザ、OS、デバイス、画面サイズ情報を使用します。
エラー統計エラー発生日基準でページ、ブラウザ、OS、デバイス別の発生件数を集計します。
セッションログエラー発生前のユーザー行動ログ(ページ遷移、クリック、失敗したAPI呼び出しなど)を収集します。

結果構造

分析結果は次の4つのセクションで構成されます。

  • 全体要約:エラーの核心的な内容を2〜3文で要約します。

  • 原因分析:エラーの原因を深刻度(HighMediumLow)別に分類して表示します。

    深刻度基準
    High未処理の例外によるアプリクラッシュ、データ損失、セキュリティ脆弱性
    Mediumユーザー体験に影響があるが回避方法が存在
    Low軽微なイシュー、警告、外観上のエラー
  • 影響範囲:エラーが影響を与えるブラウザ、OS、ページ、デバイスおよび発生頻度を表示します。

  • 解決方法:優先順位別の対応項目とコード修正例を提供します。

    優先順位基準
    High即時修正が必要 — コア機能または多数のユーザーに影響
    Medium早期修正を推奨 — ユーザー体験に影響
    Low改善を推奨 — 軽微な改善事項
ノート
  • AIが生成した分析結果のため、実際の状況と異なる場合があります。参考資料としてご活用ください。

  • ソースマップがアップロードされている場合、復元されたスタック情報を基に分析します。

  • SaaS環境でのみ使用できます。

  • プロジェクトメンバー権限以上が必要です。

エラー情報をフィルタリングして検索する

ブラウザエラーに含まれた情報を基準にフィルタリングし、エラー情報を見つけることができます。

  1. 画面の左パネルでフィルタリングするブラウザのエラー情報の項目を選択します。

  2. 下位一覧が表示されると目的の項目を選択します。 一覧が多すぎる場合は、検索することもできます。

選択した項目に対応するブラウザエラーの一覧を表示します。

テーブルのカラム設定

テーブルカラムの表示または非表示

ブラウザエラー一覧テーブルのカラム ヘッダー項目を表示または非表示できます。

  1. テーブルの右上のカラムアイコンボタンを選択します。

  2. カラム設定ウィンドウが表示されたら、左側のリストで目的の項目を選択・解除します。

    右のリストから削除アイコンボタンを選択してカラムを非表示にすることもできます。

  3. すべての設定を完了した後確認ボタンを選択します。 設定した内容がテーブルに適用されます。

テーブルカラムの表示順番の変更

ブラウザエラー一覧のテーブルでカラム ヘッダーの順序を変更できます。

  1. テーブルの右上のカラムアイコンボタンを選択します。

  2. カラム設定ウィンドウが表示されたら、右側のリストで目的の項目をドラッグして順序を変更します。

  3. すべての設定を完了した後確認ボタンを選択します。 設定した内容がテーブルに適用されます。

テーブルコンテンツの表示設定

ブラウザエラー一覧に表示するコンテンツの内容を設定できます。 多くの情報が表示されて見づらい場合や必要な内容を追加したい場合に利用できます。

  1. テーブル右上の設定アイコンボタンを選択します。

  2. ログ表示詳細設定ウィンドウが表示されたら、目的のオプションを設定します。

    • contentまたはタグオプションを選択して、ログにコンテンツの表示有無を選択します。

    • タグ管理: タグは、追加した順にログに表示されます。 タグの順序はドラッグで変更できます。 非活性化されているタグはログに表示されません。

  3. すべての設定を完了して閉じるアイコンボタンを選択します。 設定した内容がテーブルに適用されます。

ノート

ログ表示詳細設定の詳細については次の文書を参照してください。