クラッシュアナライザーツール

[アーティクル]
07/16/2024

クラッシュアナライザー ツールを使用して、運用環境の Web アプリのクラッシュを分析して迅速に診断します。 クラッシュアナライザー ツールでは、運用環境で収集した JavaScript スタックトレースを入力し、ソースマップを適用してスタックトレースを縮小解除し、デバッグを高速化できます。 クラッシュアナライザー ツールを使用すると、縮小された JavaScript スタックトレースを取得し、迅速に後方に作業して、エラーの原因となったコード行を特定できます。

クラッシュアナライザーツール

Web アプリが予期せずクラッシュまたはハングすると、データが失われ、ユーザーのエクスペリエンスが低下する可能性があります。ユーザーが経験するクラッシュに関する情報を収集することは、クラッシュの根本原因を診断して修正するのに役立ちます。ただし、運用環境で実行されているコードは、多くの場合、縮小されるため、クラッシュ時にログオンした JavaScript スタックトレースも縮小されます。 クラッシュアナライザー ツールを使用すると、運用環境で収集された縮小されたスタックトレースを元のソースコードにマップし、クラッシュの根本原因をすばやく特定できます。

運用環境で Web アプリから収集する可能性がある縮小されたスタックトレースの例を次に示します。

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

変数名と関数名は、多くの場合、上記の変数と同様に短縮 t 。スクリプト URL は、上の prod.bundle.js ファイルのように、ビルドされた 1 行バンドルファイルを指すことがよくあります。

比較すると、元の変数名と関数名、元のソースファイル名と行番号を含む、未確定のスタックトレースの例を次に示します。

Uncaught Error: test error
    at shorten (util.ts:9:9)
    at processUIString (util.ts:2:10)
    at todoMarkupBuilder (todo.ts:35:41)
    at Todo.render (todo.ts:24:12)
    at app.ts:36:39
    at Array.map (<anonymous>)
    at App.render (app.ts:36:22)
    at new App (app.ts:29:10)
    at index.ts:9:13
    at index.ts:9:33

クラッシュアナライザー ツールで縮小された運用スタックトレースを分析するには、次の 2 つの手順があります。

最初に、運用環境で Web アプリから特別に書式設定されたスタックトレースを収集します。

ユーザーが使用しているブラウザーからスタックトレースを収集する方法は多数あります。「運用環境でスタックトレースを収集する」セクションでは、以下に例と推奨事項を示します。また、 クラッシュアナライザー ツールで分析できるようにスタックトレースを書式設定する方法についても説明します。
次に、 クラッシュアナライザー ツールでスタックトレースを分析します。

以下の「クラッシュアナライザーツールでスタックトレースを分析する」セクションでは、まず DevTools でソースマップにアクセスできるようにする方法と、 クラッシュアナライザー ツールを使用してスタックトレースを分析する方法について説明します。

運用環境でスタックトレースを収集する

クラッシュアナライザー ツールでは、スタックトレースは収集されません。まず、使用可能なツールとサービスを使用して、Web アプリからスタックトレースを収集する必要があります。運用環境でスタックトレースを収集する方法を次に示します。

JavaScript コードから未処理のエラーに関する情報をキャプチャできる Azure Monitor Application Insights などのテレメトリシステムを使用することをお勧めします。
JavaScript コードを記述して、Web アプリで未処理のエラーをキャプチャすることもできます。次の例は、 window.onerror イベントハンドラーを使用して、Web アプリで未処理のエラーをキャプチャする方法を示しています。
```
window.onerror = function (message, source, line, column, error) {
  // Get the stack trace from the error object.
  const stackTrace = error.stack;

  // Send the stack trace to your telemetry system.
  // Code not shown.
};
```

クラッシュアナライザーツールのスタックトレースを書式設定する

運用環境でスタックトレースを収集するだけでは十分ではありません。 クラッシュアナライザー ツールには、ソースモジュールというセクションを含めるためにスタックトレースが必要です。

[ ソースモジュール ] セクションを含むスタックトレースの例を次に示します。

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Source modules:
    https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js 8b544e37b35d920a39d0e10f70fddc29b25d0db362741f3071eff86cef8613e9

[ ソースモジュール ] セクションには、スタックトレースに含まれる JavaScript ファイルの URL と、各ファイルのコンテンツのハッシュが含まれています。ハッシュは、実行されているスクリプトの SHA-256 ハッシュに対応する 16 進文字の 64 文字の文字列です。これは、各 JavaScript ファイルのコンテンツのバイト単位のハッシュです。 URL とハッシュを使用すると、 クラッシュアナライザー ツールは、スタックトレースの縮小解除に使用されたソースマップを後で取得できます。

エラースタックトレースに [ソースモジュール ] セクションを追加するには、次のように、Web アプリの Edge DevTools Crash Analyzer サポートライブラリを使用します。

npm を使用して、Edge DevTools Crash Analyzer サポートライブラリをプロジェクトに追加します。
```
npm install @microsoft/edge-devtools-crash-analyzer-support
```

JavaScript コードでライブラリをインポートし、 installErrorStackModuleAnnotations 関数を呼び出します。

import { installErrorStackModuleAnnotations } from '@microsoft/edge-devtools-crash-analyzer-support';

installErrorStackModuleAnnotations(Error);

クラッシュアナライザーツールでスタックトレースを分析する

DevTools の クラッシュアナライザー ツールは、運用環境のユーザーから収集した特別に書式設定されたスタックトレースをミニフィズ解除します。ソースマップに元のソースコードも含まれている場合、 クラッシュアナライザー ツールには、スタックトレースを構成する元のファイル名と関数名が表示されます。

DevTools でソースマップにアクセスできるようにします

クラッシュアナライザー ツールは、スタックトレース内のソースモジュール情報を使用して、スタックトレース内のスクリプトファイルに対応するソースマップを取得します。つまり、まず DevTools でソースマップにアクセスできるようにする必要があります。

ソースマップが Azure Artifacts シンボルサーバーを使用して安全に格納されている場合は、 クラッシュアナライザー ツールが最適です。これは、DevTools がエラーを分析するときに、必要に応じて Azure Artifacts シンボルサーバーからソースマップを取得できるためです。「ソースマップを Azure Artifacts シンボルサーバーに発行して元のコードを安全にデバッグする」を参照してください。

Azure Artifacts シンボルサーバーを使用していない場合でも、スタックトレースに対応するソースマップに DevTools からアクセスできることを確認することで、 クラッシュアナライザー ツールを使用できます。たとえば、 //# sourceMappingURL= コメントを使用してソースマップを以前に読み込んだ場合、DevTools は後で再利用できるようにソースマップをキャッシュします。詳細については、「デバッグのために、処理されたコードを元のソースコードにマップする」の「DevTools のソースマップ」を参照してください。

ドメイン名が localhostされている場合、DevTools はソースマップをキャッシュしません。つまり、Azure Artifacts Symbol Server を使用していない場合、 クラッシュアナライザー ツールは、 localhost ドメインを使用するローカル開発環境からではなく、運用環境から収集されたスタックトレースに対してのみ機能します。

クラッシュアナライザーツールを開く

クラッシュアナライザー ツールはクイックビューツールです。既定では、クイックビュー パネルで開き、アクティビティバーで開いている他のツールと共に使用できます。

DevTools の [その他のツール] メニューを使用してクラッシュアナライザー ツールを開くには:

Microsoft Edge で、[設定] などを選択します () >その他のツール>開発者ツールを開く (Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS))。 DevTools が開きます。
DevTools で Esc キーを押して、下部にある クイックビュー ツールバーを開きます (まだ開いていない場合)。 クイックビュー ツールバーで、[その他のツール] () ボタンをクリックし、[クラッシュアナライザー] を選択します。

コマンドメニューを使用して クラッシュアナライザー ツールを開くには:

Microsoft Edge で、[設定] などを選択します () >その他のツール>開発者ツールを開く (Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS))。 DevTools が開きます。
DevTools で、[ DevTools のカスタマイズと制御 ] () ボタンをクリックし、[ コマンドの実行] を選択します。または、DevTools にフォーカスがある場合は、 Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押します。 [コマンド] メニューが開きます。
クラッシュアナライザーの入力を開始し、[クラッシュアナライザーの表示] [クイックビュー] コマンドを選択します。 クイックビュー パネルでクラッシュアナライザー ツールが開きます。

クラッシュアナライザーツールにスタックトレースを入力する

クラッシュアナライザー ツールをテストするが、分析するスタックトレースがない場合は、次の手順に従ってサンプルスタックトレースを収集します。

Microsoft Edge で、新しいウィンドウまたはタブで DevTools クラッシュアナライザーのデモを開きます。
DevTools を開く場合は、Web ページを右クリックし、[検査] を選択します。または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
DevTools の アクティビティバーで、 コンソール () をクリックします。 コンソール ツールが開きます。
コンソール ツールに表示されているエラースタックトレースを選択し、コピーします。

DevTools で クラッシュアナライザー ツールを使用するには:

上記の 「クラッシュアナライザー ツールを開く」の説明に従って、DevTools のクラッシュアナライザーツールを開きます。
クラッシュアナライザー ツールの左側のウィンドウに、特別に書式設定されたスタックトレースを入力します。
クラッシュアナライザー ツールで、[分析] () ボタン (または Ctrl + Enter キーを押します) をクリックします。

右側のウィンドウには、スタックトレースを構成する元のファイル名と関数名が表示されます。

これにより、ソースモジュールに対応するソースマップが読み込まれ、ソースマップに JavaScript または TypeScript ソースコンテンツが含まれていたスタックフレームの縮小解除が試行されます。
ソースコードがフレームのソースマップで使用できる場合は、フレームをクリックしてソースコードを表示します。

元のソースコードが [ソース ] ツールに表示され、問題の行が強調表示されています。
未確定のスタックトレースをコピーするには、[ クラッシュアナライザー ] タブのツールバーの [未 確定のスタックトレースをコピー する] ([未確定の) ボタンをクリックします。関数名、ソースファイル名、行番号、列番号など、元のコードと一致する情報を除き、従来のスタックトレース形式のスタックトレースとして、完全な未確定のスタックトレースが生成され、クリップボードにコピーされます。

Uncaught Error: test error
    at shorten (webpack://devtools-crash-analyzer/src/util.ts:9:9)
    at processUIString (webpack://devtools-crash-analyzer/src/util.ts:2:10)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:39)
    at Array.map (<anonymous>)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:22)
    at constructor for App (webpack://devtools-crash-analyzer/src/app.ts:29:10)
    at [Global code: "webpack://devtools-crash-analyzer/src/index.ts"] (webpack://devtools-crash-analyzer/src/index.ts:9:13)
    at (anonymous function) (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:2:2897)

UI 機能

クラッシュアナライザー ツールには、次の UI 機能があります。

UI 項目	説明
左側のウィンドウ	分析するスタックトレース。
右側のウィンドウ	スタックトレースを構成する元のファイル名と関数名を表示します。
[新しい分析] () ボタン	新しいスタックトレースを貼り付けるために、新しい空白の左ペインを作成します。
[分析] () ボタン	左側のウィンドウのスタックトレースに基づいて、右側のウィンドウに新しい分析を作成します。
[分析] ドロップダウン )	分析の一覧を表示します。
[ この分析を削除) ボタン	現在の分析を削除します。
[未確定のスタックトレース) ボタン	関数名、ソースファイル名、行番号、列番号など、元のコードに一致する情報を除き、従来のスタックトレース形式のスタックトレースとして、完全な未確定のスタックトレースを生成してクリップボードにコピーします。
[ シンボルサーバーを開く] 設定 () ボタン	Azure Artifacts シンボルサーバーの設定を表示または変更します。
[ 使用方法] () ボタン	現在の記事を開きます。

フィードバックの提供

MicrosoftEdge/DevTools フィードバックリポジトリにフィードバックを残し、正常に動作するもの、そうでないもの、そのような機能に対して何が必要かをお知らせください。

次の方法で共有

クラッシュアナライザーツール

運用環境でスタックトレースを収集する

クラッシュアナライザーツールのスタックトレースを書式設定する

クラッシュアナライザーツールでスタックトレースを分析する

DevTools でソースマップにアクセスできるようにします

クラッシュアナライザーツールを開く

[その他のツール] メニューから

コマンドメニューから

クラッシュアナライザーツールにスタックトレースを入力する

UI 機能

フィードバックの提供

関連項目

フィードバック

その他のリソース

次の方法で共有

クラッシュ アナライザー ツール

運用環境でスタック トレースを収集する

クラッシュ アナライザー ツールのスタック トレースを書式設定する

クラッシュ アナライザー ツールでスタック トレースを分析する

DevTools でソース マップにアクセスできるようにします

クラッシュ アナライザー ツールを開く

[その他のツール] メニューから

コマンド メニューから

クラッシュ アナライザー ツールにスタック トレースを入力する

UI 機能

フィードバックの提供

関連項目

フィードバック

その他のリソース

クラッシュアナライザーツール

運用環境でスタックトレースを収集する

クラッシュアナライザーツールのスタックトレースを書式設定する

クラッシュアナライザーツールでスタックトレースを分析する

DevTools でソースマップにアクセスできるようにします

クラッシュアナライザーツールを開く

コマンドメニューから

クラッシュアナライザーツールにスタックトレースを入力する