開発者が JavaScript アプリケーションの監視、診断、およびデバッグを行う支援をするツールが増え続けています。Azure Monitor の新しいソース マップ サポートは、この一連のツールを拡張します。

デバッグが困難

さまざまな組織が React、Angular、Vue などの最新の JavaScript フロントエンド フレームワークを急ピッチで採用する一方で、依然として可観測性に関する課題が残されています。開発者は、多くの場合、ページのパフォーマンスを高め、ページを軽量化するために、JavaScript アプリケーションを展開時にミニファイ/アグリファイ/バンドルしています。これにより、補足されなかったエラーから収集されるテレメトリが不明瞭になり、これらのエラーを認識するのが困難になっています。

この課題の解決に役立つのがソース マップです。しかし、収集されたスタック トレースと正確なソース マップを関連付けるのは困難です。さらに、複数バージョンのページ、A/B テスト、および安全な展開のフライティングをサポートする必要もあり、実稼働環境のエラーのトラブルシューティングと修復を素早く行うのはほぼ不可能です。

ワンクリックでアンミニファイ

Azure Monitor の新しいソース マップの統合により、Azure Monitor Application Insights リソースを Azure Blob Services Container に関連付け、ワンクリックで Azure portal からコール スタックをアンミニファイできるようになります。継続的インテグレーションおよび継続的デリバリー (CI/CD) パイプラインを構成することで、Blob Storage にソース マップを自動的にアップロードし、シームレスなエンドツーエンドのエクスぺリンスを実現できます。

Microsoft Cloud App Security について

マイクロソフトの Microsoft Cloud App Security (MCAS) チームは、React JavaScript フロントエンドで非常にスケーラブルなサービスを管理し、Azure Monitor Application Insights を利用してクライアント側を監視しています。

この 5 年間にわたり、同チームは俊敏性を向上させ、毎日複数バージョンを展開しています。展開ごとに数百ものソース マップ ファイルが生成され、バージョンや種類別に Azure Blob コンテナー フォルダーに自動的にアップロードされて、30 日間保管されます。

MCAS チームのシニア ソフトウェア エンジニアリング マネージャーの Daniel Goltz は次のように説明しています。「ソース マップの統合で、チームに大きな変革が起きています。これまでは、アンミニファイされた例外のスタック トレースに基づいて、JavaScript のデバッグや問題解決を行うのは非常に困難であり、不可能な場合もありました。統合が実現されたことで、現在では、エラーを追跡して問題のある行を正確に特定し、数分でバグを修正することが可能になっています」

JavaScript のデバッグのデモ

次の動画でデモ アプリケーションによるサンプル シナリオです。

​

さあ始めましょう

ソース マップのサポートを一度構成するだけで、Application Insights リソースのすべてのユーザーがメリットを享受できます。利用を開始するには、以下の 3 つの手順を実行します。

1. JavaScript SDK を使用して Web 監視を有効にする。
2. ソース マップのストレージ アカウントを構成する。
   1. エンドツーエンド トランザクションの詳細ブレード
   2. プロパティ ブレード
3. CI/CD パイプラインを構成する。

注: 関連するソース マップ ファイルの可用性を確保するために、Azure ファイル コピー (英語) タスクを Azure DevOps ビルド パイプラインに追加し、新しいバージョンのアプリケーションを展開するごとに、ソース マップ ファイルを Blob にアップロードしてください。

 

ソース マップの手動ドラッグ

ソース マップ ストレージをまだ構成していない場合、または構成済みの Azure Blob Storage コンテナーにソース マップ ファイルが存在しない場合、引き続きソース マップ ファイルを Azure portal のコール スタックに手動でドラッグ アンド ドロップできます。

 

フィードバックの送信

最後に、この機能が実現したのは、Azure Monitor コミュニティが GitHub で意見を出してくれたおかげです (英語)。今後も引き続き皆様のご意見をお聞かせください。UserVoice でアイデアを入力したり (英語)、GitHub で新しい問題 (英語) を作成したり、StackOverflow で質問したり (英語)、以下の SNS でコメントを投稿したりして、是非会話に参加してください。