Application Insightsとは
ご存じとは思いますが、Azure Application InsightsとはAzure Monitorの機能の1つで、アプリケーションのパフォーマンス管理(APM: Application Performance Management)を行うものです。
この機能をBackend Applicationで利用されている方も多いかと思います。以下の記事もその1つになります。
実は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を利用してみます。
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と分散トレーシングの表示例
spa-clientというWebアプリケーションからpgdemo-bffというAPI Serverを呼び出し、さらにそこからpgdemo-apiというBackend API Serverを呼び出しています。さらにPostgreSQLやRedis cacheの呼び出しがあることもApplication Mapでひと目でわかります。
Application Mapで表示されている情報をさらに詳細にみることができます。それが分散トレーシングです。呼出しのタイミングとその処理時間をこの画面で確認することができます。SPAのとあるページからAPIやそこで利用されているデータベース等のサービスの呼び出しまでまとめて確認できるのがApplication Insightsの特徴です。
例外検知
コールスタック表示の最初の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処理をすることができます。
今回使用したアプリケーションでも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等も含まれています)