Application Insights JavaScript SDK のトラブルシューティング

[アーティクル]
06/24/2024

この記事では、 Application Insights JavaScript SDK に関連するさまざまな問題をトラブルシューティングする方法について説明します。この記事の主題には、JavaScript Web アプリの SDK の読み込みエラーと、JavaScript アプリのソースマップのサポートが含まれます。

JavaScript Web アプリの SDK の読み込みエラーのトラブルシューティング

以下のセクションでは、JavaScript Web アプリの特定の SDK 読み込みエラーシナリオの症状、原因、および解決策について説明します。

現象

監視している Web ページの <head> 要素では、SDK スクリプトがダウンロードまたは初期化されなかったことが検出されると、 JavaScript スニペット (バージョン 3 以降のバージョン) によって次の例外が作成され、報告されます。

SDK LOAD エラー: Application Insights SDK スクリプトの読み込みに失敗しました (詳細についてはスタックを参照してください)

このメッセージは、ユーザーのクライアント (ブラウザー) が Application Insights SDK をダウンロードできないか、識別されたホスティングページから初期化できないことを示します。そのため、テレメトリやイベントは表示されません。

Note

この例外は、 fetch() API または XMLHttpRequestをサポートするすべての主要なブラウザーでサポートされます。これらのブラウザーバージョンでは、Microsoft Internet Explorer 8 以前のバージョンは除外されます。そのため、これらのブラウザーでは、環境にフェッチポリフィルが含まれていない限り、この種の例外は報告されません。

スタックの詳細には、ユーザーが使用している URL に関する基本情報が含まれます。

名前	説明
<CDN エンドポイント>	SDK をダウンロードするために使用された (失敗した) URL。
<ヘルプリンク>	トラブルシューティングドキュメント (このページ) への URL リンク。
<ホスト URL>	ユーザーが使用していたページの完全な URL。
<エンドポイント URL>	例外の報告に使用された URL。この値は、パブリックインターネットまたはプライベートクラウドがホスティングページにアクセスしたかどうかを識別するのに役立ちます。

次の一覧には、この例外が発生する最も一般的な理由が含まれています。

間欠的なネットワーク接続エラー
Application Insights Content Delivery Network (CDN) の停止
スクリプトの読み込み後の SDK 初期化エラー
Application Insights JavaScript CDN のブロック

断続的なネットワーク接続エラーは、特にモバイルローミングシナリオで、この例外の最も一般的な理由です。

次のセクションでは、このエラーの潜在的な根本原因をトラブルシューティングする方法について説明します。

Note

これらの手順の一部では、アプリケーションが Snippet <script /> タグホスティング HTML ページの一部として返されるその構成を直接制御していることを前提としています。これらの条件がシナリオに適用されない場合、これらの手順も適用されません。

原因 1: 断続的なネットワーク接続エラー

ユーザーが断続的なネットワーク接続エラーが発生した場合、他の原因よりも考えられる解決策が少なくなります。ただし、このエラーは通常、すぐに解決されます。たとえば、ユーザーがページを更新してサイトを再読み込みした場合、ファイルは最終的にダウンロードされ、更新されたバージョンがリリースされるまでローカルにキャッシュされます。

解決策 1a: SDK の更新バージョンをダウンロードする

断続的なネットワーク接続エラーを最小限に抑えるために、すべての CDN ファイルに Cache-Control ヘッダーを実装しました。ユーザーのブラウザーが現在のバージョンの SDK をダウンロードした後、以前に取得したコピーを再利用するため、再度ダウンロードする必要はありません。 (キャッシュのしくみを参照してください)。キャッシュチェックが失敗した場合、または利用可能な新しいリリースがある場合、ユーザーのブラウザーは更新されたバージョンをダウンロードする必要があります。そのため、チェック失敗シナリオでは、バックグラウンドレベルの "noise" が表示される場合があります。または、新しいリリースが発生し、一般公開 (CDN に展開) されると、一時的なスパイクが発生する可能性があります。

解決策 1b: npm パッケージを使用して、アプリケーションと共に SDK を 1 つのバンドルに埋め込む

SDK の読み込み失敗の例外は永続的であり、多くのユーザーに対しては、通常のクライアントテレメトリの減少と共に発生しますか? この場合、ネットワーク接続の断続的な問題が問題の真の原因ではない可能性があるため、他の考えられる原因を調べる必要があります。

Note

複数のユーザーに対してこのエラーが発生する一般的な兆候は、例外が迅速かつ持続的なレベルで報告されるということです。

このような状況では、独自の CDN で SDK をホストする場合、この例外の発生を提供したり減らしたりする可能性は低くなります。同じ問題が独自の CDN に影響し、npm パッケージソリューションで SDK を使用する場合にも発生します。後者のシナリオの失敗は、特に Application Insights が監視対象のアプリケーションとは異なるバンドルに含まれている場合に発生します。これは、障害が少なくとも 1 つのバンドルで発生することが保証されるためです。ユーザーの観点から見ると、この例外が発生すると、テレメトリ SDK (ユーザーに表示されない) だけでなく、アプリケーション全体の読み込みまたは初期化に失敗します。そのため、ユーザーは、サイトが完全に読み込まれるまでサイトを更新し続ける可能性があります。

npm パッケージ使用して、監視対象のアプリケーションと共に Application Insights SDK を 1 つのバンドルに埋め込むことができます。このシナリオでは引き続き送信間エラーが発生する可能性がありますが、バンドルを組み合わせると、問題を解決する可能性が高くなります。

原因 2: Application Insights CDN の停止

Application Insights CDN が停止していることを確認するには、ユーザーとは異なる場所からブラウザーから直接 CDN エンドポイントにアクセスしてみてください。たとえば、独自の開発用コンピューターから https://js.monitor.azure.com/scripts/b/ai.2.min.js にアクセスしてみてください。 (これは、組織がこのドメインをブロックしていないことを前提としています)。

解決策 2: サポートチケットを作成する

停止が存在することを確認した場合は、新しいサポートチケットを作成。

原因 3: スクリプトの読み込み後に SDK が初期化されませんでした

SDK が初期化されない場合でも、 <script /> は CDN から正常にダウンロードされますが、初期化中に失敗します。このエラーは、依存関係がないか無効であるか、何らかの形式の JavaScript 例外が原因で発生します。

解決策 3: SDK のダウンロードまたは JavaScript の例外が成功したことを確認するか、ブラウザーのデバッグを有効にする

手順 1: SDK のダウンロードが成功したことを確認する

SDK が正常にダウンロードされたかどうかを確認します。スクリプトのダウンロードが発生しなかった場合、このシナリオは SDK の読み込みエラー例外の原因ではありません。開発者ツールをサポートするブラウザーを使用します。 F12 キーを押して開発者ツールを表示し、 Network タブを選択します。 src スニペット構成で定義されているスクリプトがダウンロードされたことを確認します。これを行うには、応答コード 200 (成功) または 304 (変更されていない) を確認します。ネットワークトラフィックを確認するには、 Fiddler などの Web デバッグツールを使用することもできます。

SDK が正常にダウンロードされなかった場合は、次の表を参照して、さまざまなレポートオプションを理解してください。

シナリオ	原因	アクション
この問題は、少数のユーザーと特定のブラウザーバージョンまたはブラウザーバージョンのサブセットにのみ影響します。 (報告された例外の詳細を確認してください)。	この問題は、特定のユーザーまたは環境がアプリケーションに追加の `polyfill` 実装を提供する必要がある場合にのみ発生する可能性があります。	GitHub で問題を報告。
この問題は、アプリケーション全体とすべてのユーザーに影響します。	これはリリース関連の問題です。	新しいサポートチケットを作成します。

SDK が正常にダウンロードされた場合は、次のセクションを参照して、SDK の初期化の問題を解決してください。

手順 2: JavaScript の例外を確認する

JavaScript の例外を確認します。開発者ツールをサポートするブラウザーを使用します。 F12 キーを押して開発者ツールを表示し、ページを読み込み、例外が発生したかどうかを確認します。 SDK スクリプト (たとえば、 ai.2.min.js) によって例外が発生しますか? この場合、次のいずれかのシナリオが発生しました。

SDK に渡される構成には、予期しない構成が含まれています。
SDK に渡される構成に必要な構成がありません。
障害のあるリリースが CDN にデプロイされました。

問題のある構成を確認するには、スニペットに渡される構成 (まだ行っていない場合) を変更して、インストルメンテーションキーのみを文字列値として含めます。次のコードは、スニペット構成の変更例を示しています。

Note

インストルメンテーションキーインジェストのサポートは、2025 年 3 月 31 日に終了します。インストルメンテーションキーのインジェストは引き続き機能しますが、この機能の更新プログラムやサポートは提供されなくなります。新しい機能を利用するには接続文字列への変換に関する記事を参照してください。

<script type="text/javascript">
...
src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js",
cfg: {
    instrumentationKey: "<instrumentation-key-guid>"
}});
</script>

この最小限の構成を使用する場合、SDK スクリプトに JavaScript 例外が引き続き表示される場合は、新しいサポートチケットを作成。この問題を解決するには、障害のあるビルドをロールバックする必要があります。これは、新しくデプロイされたバージョンが問題の原因である可能性があるためです。

例外が消えた場合、型の不一致または予期しない値が原因で問題が発生している可能性があります。構成オプションを 1 つずつ復元してトラブルシューティングを開始し、各変更後に例外が再度発生するまでテストします。次に、問題の原因となる項目のドキュメントを確認します。ドキュメントが不明な場合、またはサポートが必要な場合は、GitHub で問題を。

構成は以前にデプロイされ、動作していましたが、この例外が報告されるようになりましたか? この場合、新しくデプロイされたバージョンに影響する問題が発生する可能性があります。例外が少数のユーザーまたはブラウザーにのみ影響するかどうかを確認します。 GitHub で問題を報告するか新しいサポートチケットを作成。

手順 3: ブラウザーコンソールのデバッグを有効にする

スローされた例外が発生しなかった場合は、次のスニペット構成例に示すように、 loggingLevelConsole 設定を構成に追加して、コンソールデバッグを有効にする必要があります。この変更により、すべての初期化エラーと警告がブラウザーのコンソールに送信されます。 (ブラウザーコンソールを表示するには、F12 キーを押して開発者ツールを開き、 [コンソール ] タブ)報告されたエラーは自明である必要があります。さらにサポートが必要な場合、GitHub で問題を報告。

<script type="text/javascript">
...
src: "https://js.monitor.azure.com/scripts/b/ai.2.min.js",
cfg: {
    instrumentationKey: "<instrumentation-key-guid>",
    loggingLevelConsole: 2
}});
</script>

Note

初期化中、SDK は既知の主要な依存関係に関するいくつかの基本的なチェックを行います。現在のランタイムがこれらのチェックを提供しない場合、ランタイムはエラーを警告メッセージとしてコンソールに報告します (ただし、 loggingLevelConsole 設定値が 0 より大きい場合のみ)。

SDK がまだ初期化されない場合は、 enableDebug 構成設定を有効にしてみてください。この変更を行うと、すべての内部エラーが例外としてスローされます。これにより、テレメトリが失われます。この設定は開発者専用であるため、内部チェックのためにスローされる例外が増える可能性があります。各例外を確認して、SDK が失敗する原因となっている問題を特定します。未確定バージョンのスクリプトを使用します (ファイル名拡張子を .min.js から .js に変更します)。それ以外の場合、例外は読み取りできません。次のコードは、スニペット構成の変更例を示しています。

警告

完全な運用環境では、この開発者専用の設定を有効にしないでください。これを行うとテレメトリが失われるためです。

<script type="text/javascript">
...
src: "https://js.monitor.azure.com/scripts/b/ai.2.js",
cfg:{
    instrumentationKey: "<instrumentation-key-guid>",
    enableDebug: true
}});
</script>

このアクションで引き続き分析情報が得られない場合は詳細とサンプルサイトを指定して、GitHub で問題を報告する必要があります (使用する場合)。問題の特定に役立つブラウザーのバージョン、オペレーティングシステム、JavaScript フレームワークの詳細を含めます。

原因 4: Application Insights JavaScript CDN のブロック

Application Insights JavaScript SDK CDN エンドポイントが安全でないと報告または識別された場合、CDN のブロックが発生する可能性があります。この状況では、エンドポイントはパブリックにブロックリスト化され、これらのリストのコンシューマーはすべてのアクセスをブロックし始めます。

この問題を解決するには、CDN エンドポイントの所有者が、エンドポイントを安全でないとマークしたブロックリストエンティティを操作する必要があります。その後、ブロックリストエンティティは、関連リストからエンドポイントを削除できます。

次のインターネットセキュリティ Web サイトで、CDN エンドポイントが安全でないと識別されているかどうかを確認します。

この問題を解決するには、長い時間がかかる場合があります。ユーザーまたは企業の IT 部門は、強制的に更新するか、CDN エンドポイントを明示的に許可する必要があります。この問題を解決するために必要な合計時間は、アプリケーション、ファイアウォール、または環境がリストのローカルコピーを更新するために必要な頻度によって異なります。

CDN エンドポイントが安全でないと識別された場合は、できるだけ早く問題を解決するためにサポートチケットを作成。

次のセクションでは、ブロックがどのように発生するか、およびブロックを修正する方法について詳しく説明します。

原因 4a: ユーザーのブロック (ブラウザー、インストールされているブロック、または個人用ファイアウォール)

ユーザーが次のいずれかの構成アクションを実行したかどうかを確認します。

ブラウザープラグインをインストールしました (通常、広告、マルウェア、ポップアップブロックの形式)
ブラウザーまたはプロキシで Application Insights CDN エンドポイントをブロックまたは禁止しました
SDK の CDN ドメインがブロックされる (または DNS エントリを解決できない) ファイアウォール規則を構成しました

解決策 4a: CDN エンドポイントのブロックリスト例外を追加する

表示されている構成アクションのいずれかをユーザーが実行した場合は、CDN エンドポイントを許可するためにユーザーと協力 (またはドキュメントを提供) します。

ユーザーは、パブリックブロックリストを使用するプラグインをインストールしている可能性があります。そうでない場合は、手動で構成された別のソリューションを使用しているか、プラグインがプライベートドメインブロックリストを使用している可能性があります。

ブラウザーのプラグインまたはファイアウォール規則の例外リストにエンドポイントを含めることで、Application Insights CDN エンドポイントからのスクリプトのダウンロードを許可するようにユーザーに指示します。これらの一覧は、ユーザー環境によって異なります。

Google Chrome をして Web サイトへのアクセスを許可またはブロックする方法を示すこの状況の例を次に示します。

原因 4b: 企業ファイアウォールのブロック

ユーザーが企業ネットワーク上にいる場合、企業ファイアウォールが CDN ブロックの原因である可能性があります。企業の IT 部門は、おそらく何らかの形式のインターネットフィルタリングシステムを実装しています。

ソリューション 4b1: 企業の CDN エンドポイントの例外を追加する

重要

ユーザーは private クラウドを使用していますか。この場合は、Application Insights npm パッケージ使用して SDK を埋め込むか独自の CDN に Application Insights SDK をホストする必要があります。

会社の IT 部門と協力して、ユーザーに必要なルールを許可します。このソリューションは、ユーザーの例外の追加に似ています。 IT 部門に、Application Insights CDN エンドポイントをダウンロード用に構成するには、任意のドメインブロックリストサービスまたは許可リストサービスに含める (または削除する) 必要があります。

ソリューション 4b2: 独自の CDN で SDK をホストする

ユーザーにパブリック CDN から Application Insights SDK をダウンロードしてもらう代わりに、独自の CDN エンドポイントで Application Insights SDK をホストできます。使用しているバージョンを簡単に識別できるように、SDK の特定のバージョン (ai.2.#.#.min.js) を使用することをお勧めします。また、利用可能になったバグ修正や新機能を使用できるように、SDK を定期的に現在のバージョン (ai.2.min.js) に更新します。

解決策 4b3: npm パッケージを使用して Application Insights SDK を埋め込む

snippetを使用してパブリック CDN エンドポイントを追加代わりに npm パッケージを使用して独自の JavaScript ファイルの一部として SDK を含めることができます。 SDK は、独自のスクリプト内の単なる別のパッケージになります。詳細については、Application Insights JavaScript SDK GitHub ページの「 npm ベースのセットアップ」セクションを参照してください。

Note

npm パッケージを使用する場合は、コードの分割と縮小を行うために、何らかの形式の JavaScript bundler も使用することをお勧めします。

スニペットと同様に、ここに表示されるのと同じブロッキングの問題が、独自のスクリプトに影響する可能性があります (SDK npm パッケージを使用する場合と使用しない場合)。アプリケーション、ユーザー、フレームワークによっては、これらの問題を検出して報告するために、スニペットのロジックと同様のものを実装することを検討してください。

JavaScript アプリケーションのソースマップサポートのトラブルシューティング

次の表では、JavaScript アプリケーションのソースマップのサポートに関連する特定の問題について説明しこれらの問題を解決するための戦略を示します。

問題	説明
BLOB コンテナーで必要な Azure ロールベースのアクセス制御 (Azure RBAC) 設定	この機能を使用するポータル上のユーザーには、少なくとも BLOB コンテナーの Storage BLOB データ閲覧者ロールが割り当てられている必要があります。この機能を使用してソースマップを使用するすべてのユーザーに、このロールを割り当てる必要があります。コンテナーの作成方法によっては、ユーザーまたはチームにこのロールが自動的に割り当てられなかった可能性があります。
ソースマップが見つからない	この問題を解決するには、次のアクションを実行します。対応するソースマップが正しい BLOB コンテナーにアップロードされていることを確認します。ソースマップファイルがマップ先の JavaScript ファイルからその名前を取得し、ファイル名拡張子が .map であることを確認します。たとえば、 /static/js/main.4e2ca5fa.chunk.js は、 main.4e2ca5fa.chunk.js.map という名前の BLOB を検索します。ブラウザーのコンソールで、エラーがログに記録されているかどうかを確認します。この出力を任意のサポートチケットに含めます。

問題

説明

BLOB コンテナーで必要な Azure ロールベースのアクセス制御 (Azure RBAC) 設定

この機能を使用するポータル上のユーザーには、少なくとも BLOB コンテナーの Storage BLOB データ閲覧者ロールが割り当てられている必要があります。この機能を使用してソースマップを使用するすべてのユーザーに、このロールを割り当てる必要があります。コンテナーの作成方法によっては、ユーザーまたはチームにこのロールが自動的に割り当てられなかった可能性があります。

ソースマップが見つからない

この問題を解決するには、次のアクションを実行します。

対応するソースマップが正しい BLOB コンテナーにアップロードされていることを確認します。
ソースマップファイルがマップ先の JavaScript ファイルからその名前を取得し、ファイル名拡張子が .map であることを確認します。たとえば、 /static/js/main.4e2ca5fa.chunk.js は、 main.4e2ca5fa.chunk.js.map という名前の BLOB を検索します。
ブラウザーのコンソールで、エラーがログに記録されているかどうかを確認します。この出力を任意のサポートチケットに含めます。

"Click Event rows with no parentId value" (parentId 値のないイベント行をクリックする) 警告を修正しました

アプリケーションで Application Insights と Click Analytics 自動収集プラグインを使用すると、Application Insights ブックに次のテレメトリ警告が表示されることがあります。

原因

この問題は、親 HTML 要素で親 ID が指定されていない場合に発生する可能性があります。この条件により、すべての親要素でイベントがトリガーされます。

ソリューション

この問題を解決するには、親 HTML 要素に data-parentid または data-<customPrefix>-parentid 属性を追加します。 HTML コードの例を次に示します。

<div data-heart-id="demo Header" data-heart-parentid="demo.Header" data-heart-parent-group="demo.Header.Group">

次のステップ

サードパーティの情報に関する免責事項

この資料に記載されているサードパーティ製品は、マイクロソフトと関連のない他社の製品です。明示的か黙示的かにかかわらず、これらの製品のパフォーマンスや信頼性についてマイクロソフトはいかなる責任も負わないものとします。

お問い合わせはこちらから

質問がある場合やヘルプが必要な場合は、サポート要求を作成するか、Azure コミュニティサポートにお問い合わせください。 Azure フィードバックコミュニティに製品フィードバックを送信することもできます。

次の方法で共有

Application Insights JavaScript SDK のトラブルシューティング

JavaScript Web アプリの SDK の読み込みエラーのトラブルシューティング

現象

原因 1: 断続的なネットワーク接続エラー

解決策 1a: SDK の更新バージョンをダウンロードする

解決策 1b: npm パッケージを使用して、アプリケーションと共に SDK を 1 つのバンドルに埋め込む

原因 2: Application Insights CDN の停止

解決策 2: サポートチケットを作成する

原因 3: スクリプトの読み込み後に SDK が初期化されませんでした

解決策 3: SDK のダウンロードまたは JavaScript の例外が成功したことを確認するか、ブラウザーのデバッグを有効にする

手順 1: SDK のダウンロードが成功したことを確認する

手順 2: JavaScript の例外を確認する

手順 3: ブラウザーコンソールのデバッグを有効にする

原因 4: Application Insights JavaScript CDN のブロック

原因 4a: ユーザーのブロック (ブラウザー、インストールされているブロック、または個人用ファイアウォール)

解決策 4a: CDN エンドポイントのブロックリスト例外を追加する

原因 4b: 企業ファイアウォールのブロック

ソリューション 4b1: 企業の CDN エンドポイントの例外を追加する

ソリューション 4b2: 独自の CDN で SDK をホストする

解決策 4b3: npm パッケージを使用して Application Insights SDK を埋め込む

JavaScript アプリケーションのソースマップサポートのトラブルシューティング

"Click Event rows with no parentId value" (parentId 値のないイベント行をクリックする) 警告を修正しました

原因

ソリューション

次のステップ

お問い合わせはこちらから

フィードバック

その他のリソース

次の方法で共有

Application Insights JavaScript SDK のトラブルシューティング

JavaScript Web アプリの SDK の読み込みエラーのトラブルシューティング

現象

原因 1: 断続的なネットワーク接続エラー

解決策 1a: SDK の更新バージョンをダウンロードする

解決策 1b: npm パッケージを使用して、アプリケーションと共に SDK を 1 つのバンドルに埋め込む

原因 2: Application Insights CDN の停止

解決策 2: サポート チケットを作成する

原因 3: スクリプトの読み込み後に SDK が初期化されませんでした

解決策 3: SDK のダウンロードまたは JavaScript の例外が成功したことを確認するか、ブラウザーのデバッグを有効にする

手順 1: SDK のダウンロードが成功したことを確認する

手順 2: JavaScript の例外を確認する

手順 3: ブラウザー コンソールのデバッグを有効にする

原因 4: Application Insights JavaScript CDN のブロック

原因 4a: ユーザーのブロック (ブラウザー、インストールされているブロック、または個人用ファイアウォール)

解決策 4a: CDN エンドポイントのブロックリスト例外を追加する

原因 4b: 企業ファイアウォールのブロック

ソリューション 4b1: 企業の CDN エンドポイントの例外を追加する

ソリューション 4b2: 独自の CDN で SDK をホストする

解決策 4b3: npm パッケージを使用して Application Insights SDK を埋め込む

JavaScript アプリケーションのソース マップサポートのトラブルシューティング

"Click Event rows with no parentId value" (parentId 値のないイベント行をクリックする) 警告を修正しました

原因

ソリューション

次のステップ

お問い合わせはこちらから

フィードバック

その他のリソース

解決策 2: サポートチケットを作成する

手順 3: ブラウザーコンソールのデバッグを有効にする

JavaScript アプリケーションのソースマップサポートのトラブルシューティング