JavaScript アプリケーションに対するソース マップのサポート

Application Insights では、独自のストレージ アカウントの BLOB コンテナーに対するソース マップのアップロードがサポートされています。 ソース マップを使用して、エンド ツー エンドのトランザクション詳細ページで見つかった呼び出し履歴をアンミニファイすることができます。 JavaScript SDK または Node.js SDK によって送信されたすべての例外は、ソース マップでアンミニファイできます。

ストレージ アカウントとリンクすることによって呼び出し履歴をアンミニファイする

新しいストレージ アカウントと BLOB コンテナーを作成する

ストレージ アカウントまたは BLOB コンテナーが既にある場合は、このステップを省略できます。

  1. Create a new storage account (新しいストレージ アカウントの作成)
  2. ストレージ アカウント内に BLOB コンテナーを作成します。 必ず [パブリック アクセス レベル] を [Private] に設定して、ソース マップにパブリックにアクセスできないようにします。

コンテナーのアクセス レベルをプライベートに設定する必要がある

ソース マップを BLOB コンテナーにプッシュする

構成済みの BLOB コンテナーにソース マップを自動的にアップロードするように構成することで、継続的配置パイプラインをストレージ アカウントと統合する必要があります。

Blob Storage コンテナーのフォルダー構造がソース マップのコンパイルおよびデプロイ時のフォルダー構造と同じであれば、ソース マップを Blob Storage コンテナーにアップロードできます。 一般的なユース ケースは、1.2.3/static/js/main.js のように、デプロイ フォルダーにそのバージョンでプレフィックスを付けることです。 sourcemaps という名前の Azure Blob コンテナーでアンミニファイ処理するとき、sourcemaps/1.2.3/static/js/main.js.map に置かれているソース マップの取得が試行されます。

Azure Pipelines を使用してアプリケーションの継続的なビルドとデプロイを行っている場合は、Azure ファイル コピー タスクをパイプラインに追加して、ソース マップを自動的にアップロードします。

ソース マップを Azure Blob Storage にアップロードするために、Azure ファイル コピー タスクをパイプラインに追加する

ソース マップのストレージ アカウントで Application Insights リソースを構成する

エンドツーエンド トランザクションの詳細ページから

エンドツーエンド トランザクションの詳細タブで [Unminify](アンミニファイ) をクリックすると、リソースが未構成の場合、構成するよう求めるプロンプトが表示されます。

  1. ポータルで、ミニファイされた例外の詳細を表示します。
  2. [Unminify](アンミニファイ処理する) を選択します。
  3. リソースが構成されていない場合は、構成を求めるメッセージが表示されます。

プロパティ ページから

Application Insights リソースにリンクされているストレージ アカウントまたは BLOB コンテナーを構成または変更する場合は、Application Insights リソースの [プロパティ] タブを表示します。

  1. Application Insights リソースの [プロパティ] タブに移動します。
  2. [ソース マップ BLOB コンテナーの変更] を選択します。
  3. ソース マップ コンテナーとして別の BLOB コンテナーを選択します。
  4. [Apply] を選択します。

[プロパティ] ブレードに移動して、選択した Azure BLOB コンテナーを再構成する

トラブルシューティング

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

ポータルでこの機能を使用するすべてのユーザーには、少なくとも、BLOB コンテナーに対するストレージ BLOB データ閲覧者が割り当てられている必要があります。 この機能を通じてソース マップを使用する他のすべてのユーザーに、このロールを割り当てる必要があります。

注意

コンテナーの作成方法によっては、ユーザーまたはチームにこれが自動的に割り当てられなかった可能性があります。

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

  1. 対応するソース マップが正しい BLOB コンテナーにアップロードされていることを確認します
  2. ソース マップ ファイルの名前が、マップ対象の JavaScript ファイルの名前の後に .map が付加されたものになっていることを確認します。
    • たとえば、/static/js/main.4e2ca5fa.chunk.js では、main.4e2ca5fa.chunk.js.map という名前の BLOB が検索されます
  3. ブラウザーのコンソールで、エラーがログに記録されているかどうかを確認します。 サポート チケットにこれを含めます。

次の手順