APC 技術ブログ

株式会社エーピーコミュニケーションズの技術ブログです。

株式会社 エーピーコミュニケーションズの技術ブログです。

Azure Application InsightsでWeb ApplicationのAPMを実現する

f:id:turtle2005:20210614111228p:plain

Application Insightsとは

ご存じとは思いますが、Azure Application InsightsとはAzure Monitorの機能の1つで、アプリケーションのパフォーマンス管理(APM: Application Performance Management)を行うものです。

この機能をBackend Applicationで利用されている方も多いかと思います。以下の記事もその1つになります。

techblog.ap-com.co.jp

実はApplication InsightsはJavaScript SDKも用意されており、Webブラウザ側で実行されるSPA (Single Page Application) でも利用することができます。

SPAで利用できる主な機能は以下のようなものになります。

  • 読み込み時間等の分析
  • 分散トレーシング
  • 例外検知
  • ユーザー行動分析

今回はAngularアプリケーションにSDKを埋め込み、分散トレーシングや例外検知といった機能をご紹介したいと思います。

Application Insightsに関する詳細は (Azure Application Insights とは何か - Azure Monitor | Microsoft Docs) を参照してください。

SPAにおけるApplication Insights

AngularアプリケーションにSDKを導入する

Application Insights は Angular Pluginも提供しています。今回はこのPluginを利用してみます。

docs.microsoft.com

GitHubのRepository で公開されている手順に従い以下のモジュールを追加しました。

    "@microsoft/applicationinsights-angularplugin-js": "^2.6.3",
    "@microsoft/applicationinsights-clickanalytics-js": "^2.6.3",
    "@microsoft/applicationinsights-web": "^2.6.3",

続いてApplication Insightsのインスタンスを設定します。

Applicaiton insights' angular plugin example

app.comonent.ts
20行目~45行目までがApplication Insightsの設定です。 このうち24行目~38行目までがApplication Insightsで観測する項目に関する指定になります。 Microsoftのドキュメントには明記されていませんが、43行目のように

envelope.tags['ai.cloud.role'] = 'spa-client';

という指定をすると、application insights上でのWeb Appの名称を指定できます。

app.module.ts
アプリケーションでキャッチされない例外を追跡するための指定を追加します。

これで、今回ご紹介する『分散トレーシング』や『例外検知』をApplication Insightsで観測することができるようになります。

実行結果を確認する

Application Mapと分散トレーシングの表示例

f:id:turtle2005:20210717171811p:plain
Application Map

spa-clientというWebアプリケーションからpgdemo-bffというAPI Serverを呼び出し、さらにそこからpgdemo-apiというBackend API Serverを呼び出しています。さらにPostgreSQLやRedis cacheの呼び出しがあることもApplication Mapでひと目でわかります。

f:id:turtle2005:20210717171819p:plain
Distributed Tracing

Application Mapで表示されている情報をさらに詳細にみることができます。それが分散トレーシングです。呼出しのタイミングとその処理時間をこの画面で確認することができます。SPAのとあるページからAPIやそこで利用されているデータベース等のサービスの呼び出しまでまとめて確認できるのがApplication Insightsの特徴です。

例外検知

f:id:turtle2005:20210717172032p:plain
Exception

コールスタック表示の最初の10行を見てみましょう

onErrorClick@http://00.00.00.000/spa-client/main-es2015.05e16a02ec0857a9d51e.js:1:313922
template/<@http://00.00.00.000/spa-client/main-es2015.05e16a02ec0857a9d51e.js:1:314372
Oo@http://00.00.00.000/spa-client/main-es2015.05e16a02ec0857a9d51e.js:1:62601
n@http://00.00.00.000/spa-client/main-es2015.05e16a02ec0857a9d51e.js:1:62765
gl/<@http://00.00.00.000/spa-client/main-es2015.05e16a02ec0857a9d51e.js:1:129563
invokeTask@http://00.00.00.000/spa-client/polyfills-es2015.da47fac3701c6ee4323d.js:1:7135
onInvokeTask@http://00.00.00.000/spa-client/main-es2015.05e16a02ec0857a9d51e.js:1:98020
invokeTask@http://00.00.00.000/spa-client/polyfills-es2015.da47fac3701c6ee4323d.js:1:7056
runTask@http://00.00.00.000/spa-client/polyfills-es2015.da47fac3701c6ee4323d.js:1:2544
invokeTask@http://00.00.00.000/spa-client/polyfills-es2015.da47fac3701c6ee4323d.js:1:8185

AngularではTypescriptコードをJavaScriptにトランスパイルしwebpackでまとめます。このためアプリケーションで例外が発生した際にも上記のようにわかりにくいものになります。 しかしご安心ください。Application InsightsではSource Mapに対応しています。事前にSource MapファイルをBlob Storageに保管しておくと、Application Insightsの画面でunminify処理をすることができます。

JavaScript アプリケーションのソース マップのサポート - Azure Monitor Application Insights - Azure Monitor | Microsoft Docs

今回使用したアプリケーションでもSource MapをBlob Storageに保管してありますので早速Unminifyしてみます。

Error: throw Error
    onErrorClick@webpack:///src/app/dashboard/dashboard.component.ts:25:10
    template/<@webpack:///src/app/dashboard/dashboard.component.html:11:14
    Oo@webpack:///node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:15285:15
    n@webpack:///node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:15323:54
    gl/<@webpack:///node_modules/@angular/platform-browser/__ivy_ngcc__/fesm2015/platform-browser.js:560:37
    invokeTask@webpack:///node_modules/zone.js/fesm2015/zone.js:406:30
    onInvokeTask@webpack:///node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:28661:32
    invokeTask@webpack:///node_modules/zone.js/fesm2015/zone.js:405:59
    runTask@webpack:///node_modules/zone.js/fesm2015/zone.js:178:46
    invokeTask@webpack:///node_modules/zone.js/fesm2015/zone.js:487:33

app/dashboard/dashboard.component.ts:25:10 こちらがTypescriptファイルの例外発生個所です。 どこのソースコードかすぐにわかるようになります。

Backend Applicationであればこうした例外情報の収集は比較的容易です。ブラウザアプリケーションではユーザー側Webブラウザ上で発生するものなので例外を検知するのも面倒であることが多いと思いますが、Application Insightsではこれまでの設定をするだけで実現できます。

まとめ

今回紹介した機能はBackend APIでもよく利用する分散トレーシングや例外検知をWebアプリケーションで実現することをご紹介しました。Application Insightsではこれ以外にもWebアプリケーションで行われるイベントトラッキングや分析といった機能も提供しています。機会がありましたらこうした機能もご紹介してみたいと思います。

今回ご覧いただいたようにAzure Application InsightsではServer SideからClient Sideまで「フルスタック」のApplication Performance Management機能を提供していますので、今後もいろいろ活用していきたいと思います。

今回利用したサンプルコードは以下で公開しています(関連するAPI Server等も含まれています)

github.com