Application InsightsでAngularのページ読み込み時間は測れるのか?

なんでやるの?

フロントエンド(Angular)にAzure Application Insightsを入れてページビューを計測してみた - cougerの日記 の残ってる課題を調べてみようと思った。

分かったこと

切り替え時間を知りたい場合は、startTrackPage と stopTrackPage を使う。
trackPageViewではページ切り替えの時間を計測できない。

なんで?

trackPageViewで引数のDurationを指定しなかった場合、Application Insightsは Navigation Timing を使ってページの読み込み時間を計測する。 コードはこの辺。

Navigation Timingとは?

Navigation Timingとはブラウザがウェブサイトを表示するまでの間の一連のプロセスとタイミングを細かく定義したもので、Unload,Redirect,Fetch,DNSLookup,TCPConnect,Request,Response,Processing,Loadという処理プロセスとなっており、それぞれの境目にもStart及びEndというタイミングがあります。
この実装がNavigation Timing APIで、Navigation Timing APIとはこれらのタイミング毎に到達した時間を、それぞれUnixTimestampで取得できるというものです。
Navigation Timingを軸にJavascriptの実行タイミングを理解する - Qiita

「ブラウザがウェブサイトを表示するまでの間」なので、表示した後の画面の切り替えは計測ができない。そりゃそうだ。

じゃ、どうすんの?

startTrackPage と stopTrackPage を使う。

Navigation Timing APIを使わず、start, stopまでの時間を計測してくれる。
ApplicationInsights-JS/API-reference.md at master · Microsoft/ApplicationInsights-JS · GitHub

どこに埋め込むべきか?

startTrackPageはコンポーネントのOnInitか、ルーターのNavigationEndで良いんじゃないかと思う。
stopTrackPageは、OnInitの後、どこまでの時間を測りたいかによるんだろうけど、Serviceでデータを取得した後、DOMのレンダリングが終わるまでを測りたい場合、どこに仕込めばいいのか分からない。困った。
Serviceでデータを取得するところまででよいなら、 subscribe のコールバックで stopTrackPage を呼べばいいと思う。

全部のコンポーネントに入れるのタルい

だよねぇ...。とはいえ、コンポーネントごとに呼び出すサービスの種類や数が違うから、基底クラスを作ってそこで呼び出せばOKってわけでもなさげ。
今思いつくもので、一番影響が少ないのは、

  • 計測をあきらめて、画面切り替えが始まったとき(RouterのNavigationEndや、RouterOutletのonActivateなど)で trackPageView を呼び出す。
    • Durationを0にしておいたほうがいいかも。

かなぁ。 この方法でも、Application Insightsがページに関連するRequestの時間は計測してくれる(正確には違うんだけど)から、Requestに要した時間の合計までは計算できるはず。