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

Application Insights では、独自のストレージ アカウントの BLOB コンテナーに対するソース マップのアップロードがサポートされています。Application Insights supports the uploading of source maps to your own Storage Account Blob Container. ソース マップを使用して、エンド ツー エンドのトランザクション詳細ページで見つかった呼び出し履歴をアンミニファイすることができます。Source maps can be used to unminify call stacks found on the end to end transaction details page. JavaScript SDK または Node.js SDK によって送信されたすべての例外は、ソース マップでアンミニファイできます。Any exception sent by the JavaScript SDK or the Node.js SDK can be unminified with source maps.

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

新しいストレージ アカウントと BLOB コンテナーを作成するCreate a new storage account and Blob container

ストレージ アカウントまたは BLOB コンテナーが既にある場合は、このステップを省略できます。If you already have an existing storage account or blob container, you can skip this step.

  1. Create a new storage account (新しいストレージ アカウントの作成)Create a new storage account
  2. ストレージ アカウント内に BLOB コンテナーを作成します。Create a blob container inside your storage account. 必ず [パブリック アクセス レベル] を [Private] に設定して、ソース マップにパブリックにアクセスできないようにします。Be sure to set the "Public access level" to Private, to ensure that your source maps are not publicly accessible.

コンテナーのアクセス レベルをプライベートに設定する必要があるYour container access level must be set to Private

ソース マップを BLOB コンテナーにプッシュするPush your source maps to your Blob container

構成済みの BLOB コンテナーにソース マップを自動的にアップロードするように構成することで、継続的配置パイプラインをストレージ アカウントと統合する必要があります。You should integrate your continuous deployment pipeline with your storage account by configuring it to automatically upload your source maps to the configured Blob container.

Blob Storage コンテナーのフォルダー構造がソース マップのコンパイルおよびデプロイ時のフォルダー構造と同じであれば、ソース マップを Blob Storage コンテナーにアップロードできます。Source maps can be uploaded to your Blob Storage Container with the same folder structure they were compiled & deployed with. 一般的なユース ケースは、1.2.3/static/js/main.js のように、デプロイ フォルダーにそのバージョンでプレフィックスを付けることです。A common use case is to prefix a deployment folder with its version, e.g. 1.2.3/static/js/main.js. sourcemaps という名前の Azure Blob コンテナーでアンミニファイ処理するとき、sourcemaps/1.2.3/static/js/main.js.map に置かれているソース マップの取得が試行されます。When unminifying via an Azure Blob container called sourcemaps, it will try to fetch a source map located at sourcemaps/1.2.3/static/js/main.js.map.

Azure Pipelines を使用してアプリケーションの継続的なビルドとデプロイを行っている場合は、Azure ファイル コピー タスクをパイプラインに追加して、ソース マップを自動的にアップロードします。If you are using Azure Pipelines to continuously build and deploy your application, add an Azure File Copy task to your pipeline to automatically upload your source maps.

ソース マップを Azure Blob Storage にアップロードするために、Azure ファイル コピー タスクをパイプラインに追加するAdd an Azure File Copy task to your Pipeline to upload your source maps to Azure Blob Storage

ソース マップのストレージ アカウントで Application Insights リソースを構成するConfigure your Application Insights resource with a Source Map storage account

エンドツーエンド トランザクションの詳細ページからFrom the end-to-end transaction details page

エンドツーエンド トランザクションの詳細タブで [Unminify](アンミニファイ) をクリックすると、リソースが未構成の場合、構成するよう求めるプロンプトが表示されます。From the end-to-end transaction details tab, you can click on Unminify and it will display a prompt to configure if your resource is unconfigured.

  1. ポータルで、ミニファイされた例外の詳細を表示します。In the Portal, view the details of an exception that is minified.
  2. [Unminify](アンミニファイ) をクリックしますClick on Unminify
  3. リソースが構成されていない場合は、構成を求めるメッセージが表示されます。If your resource has not been configured, a message will appear, prompting you to configure.

プロパティ ページからFrom the properties page

Application Insights リソースにリンクされているストレージ アカウントまたは BLOB コンテナーを構成または変更する場合は、Application Insights リソースの [プロパティ] タブを表示します。If you would like to configure or change the storage account or Blob container that is linked to your Application Insights Resource, you can do it by viewing the Application Insights resource's Properties tab.

  1. Application Insights リソースの [プロパティ] タブに移動します。Navigate to the Properties tab of your Application Insights resource.
  2. [ソース マップ BLOB コンテナーの変更] をクリックします。Click on Change source map blob container.
  3. ソース マップ コンテナーとして別の BLOB コンテナーを選択します。Select a different Blob container as your source maps container.
  4. [Apply] をクリックします。Click Apply.

[プロパティ] ブレードに移動して、選択した Azure BLOB コンテナーを再構成するReconfigure your selected Azure Blob Container by navigating to the Properties Blade

トラブルシューティングTroubleshooting

BLOB コンテナーで必要なロールベースのアクセス制御 (RBAC) の設定Required role-based access control (RBAC) settings on your Blob container

ポータルでこの機能を使用するすべてのユーザーには、少なくとも、BLOB コンテナーに対するストレージ BLOB データ閲覧者が割り当てられている必要があります。Any user on the Portal using this feature must be at least assigned as a Storage Blob Data Reader to your Blob container. この機能を通じてソース マップを使用する他のすべてのユーザーに、このロールを割り当てる必要があります。You must assign this role to anyone else that will be using the source maps through this feature.

注意

コンテナーの作成方法によっては、ユーザーまたはチームにこれが自動的に割り当てられなかった可能性があります。Depending on how the container was created, this may not have been automatically assigned to you or your team.

ソース マップが見つからないSource map not found

  1. 対応するソース マップが正しい BLOB コンテナーにアップロードされていることを確認しますVerify that the corresponding source map is uploaded to the correct blob container
  2. ソース マップ ファイルの名前が、マップ対象の JavaScript ファイルの名前の後に .map が付加されたものになっていることを確認します。Verify that the source map file is named after the JavaScript file it maps to, suffixed with .map.
    • たとえば、/static/js/main.4e2ca5fa.chunk.js では、main.4e2ca5fa.chunk.js.map という名前の BLOB が検索されますFor example, /static/js/main.4e2ca5fa.chunk.js will search for the blob named main.4e2ca5fa.chunk.js.map
  3. ブラウザーのコンソールで、エラーがログに記録されているかどうかを確認します。Check your browser's console to see if any errors are being logged. サポート チケットにこれを含めます。Include this in any support ticket.

次の手順Next Steps