Global azure boot camp 2019@sapporo での、ライトニングトーク発表資料です。内容は、Angular SPA に Azure Application Insights を組み込んで、クライアント側での予期しないエラー発生を記録する方法についてです。

1. Global Azure BootcampGlobal Azure Bootcamp
2019@Sapporo2019@Sapporo
Lightning TalksLightning Talks
@jsakamoto@jsakamoto

2. Azure AppicationAzure Appication
InsightsInsights
++
Angular5+Angular5+

3. コンテキストコンテキスト
Angular5+Angular5+ による SPAによる SPA
サーバー側は ASP.NET Core 2.xサーバー側は ASP.NET Core 2.x
Azure Web Apps に配置Azure Web Apps に配置

4. 規模感規模感
ユーザー数 10 名にも満たない程度ユーザー数 10 名にも満たない程度
毎分 数リクエスト (ばらつきはある)毎分 数リクエスト (ばらつきはある)

5. やりたいことやりたいこと
ブラウザ側での捕捉されない例外を記録ブラウザ側での捕捉されない例外を記録
(メッセージ、スタックトレース)(メッセージ、スタックトレース)
例外発⽣をメール通知例外発⽣をメール通知
例外に⾄るまでのユーザー操作の把握 (遷例外に⾄るまでのユーザー操作の把握 (遷
移してきた画⾯順)移してきた画⾯順)

6. Azure Application InsightsAzure Application Insights
を採⽤してみたを採⽤してみた
Application Insights とは何か?Application Insights とは何か?
Application Insights は、複数のプラットApplication Insights は、複数のプラット
フォームで使⽤できる Web 開発者向けフォームで使⽤できる Web 開発者向け
の拡張可能なアプリケーション パフォの拡張可能なアプリケーション パフォ
ーマンス管理 (APM) サービスです。ーマンス管理 (APM) サービスです。

7. Angular アプリで使うにはAngular アプリで使うには
@markpieszak/ng-application-insights@markpieszak/ng-application-insights
npm パッケージを使うとよいnpm パッケージを使うとよい

8. // app.module.ts// app.module.ts
import { ApplicationInsightsModule }import { ApplicationInsightsModule }
from '@markpieszak/ng-application-insightsfrom '@markpieszak/ng-application-insights
@NgModule({@NgModule({
......
imports: [imports: [
ApplicationInsightsModule.forRoot({ApplicationInsightsModule.forRoot({
instrumentationKey: '...' }),instrumentationKey: '...' }),
],],
......
})})
export class AppModule { }export class AppModule { }

9. ユーザー操作が把握できる♪ユーザー操作が把握できる♪

10. わざと例外を起こしてみるわざと例外を起こしてみる
<!-- FetchDataComponent.html --><!-- FetchDataComponent.html -->
<tr *ngFor="let forecast of forecasts"><tr *ngFor="let forecast of forecasts">
<td>{{ forecast.dateFormatted }}</td><td>{{ forecast.dateFormatted }}</td>
<!-- ↓ 変数名をわざと typo --><!-- ↓ 変数名をわざと typo -->
<td>{{ forecas.summary }}</td><td>{{ forecas.summary }}</td>
</tr></tr>

11. 例外が起きるようになった例外が起きるようになった
ERROR TypeError: Cannot readERROR TypeError: Cannot read
property 'summary' of undefinedproperty 'summary' of undefined
at Object.eval [as updateRenderer]at Object.eval [as updateRenderer]
(FetchDataComponent.html:21)(FetchDataComponent.html:21)

12. しかし App Insights に記録しかし App Insights に記録
されない...!?されない...!?

13. バージョン組み合わせでも変バージョン組み合わせでも変
らずらず
AngularAngular
ver.5.0 ~ 6.1ver.5.0 ~ 6.1
ng-application-insightsng-application-insights
ver.5.0.0 ~ 6.0.3ver.5.0.0 ~ 6.0.3
applicationinsights-js:applicationinsights-js:
ver.1.0.15 ~ 1.0.20ver.1.0.15 ~ 1.0.20

14. window.onerror は設定済みwindow.onerror は設定済み
> window.onerror.toString()> window.onerror.toString()
"function (message, url, lineNumber, columnN"function (message, url, lineNumber, columnN
var handled = originalOnError && originavar handled = originalOnError && origina
......
しかし Angular のエラーは Angular の⽅法しかし Angular のエラーは Angular の⽅法
で処理される...ということは?で処理される...ということは?

15. ⾃分で書かなきゃだめっぽい⾃分で書かなきゃだめっぽい
(出典喪失)(出典喪失)
ng-application-insightsng-application-insights はそこまでやはそこまでや
ってくれない?ってくれない?
Angular で⽤意されているエラー処理の仕Angular で⽤意されているエラー処理の仕
様に合せて、独⾃のエラー処理実装を書く様に合せて、独⾃のエラー処理実装を書く
その独⾃のエラー処理実装を Angular アその独⾃のエラー処理実装を Angular ア
プリに差し込むプリに差し込む

16. // my-errorhandler.ts// my-errorhandler.ts
import { ErrorHandler, NgModule } from '@angimport { ErrorHandler, NgModule } from '@ang
import { AppInsights } from 'applicationinsiimport { AppInsights } from 'applicationinsi
export class MyErrorHandlerexport class MyErrorHandler
implements ErrorHandler {implements ErrorHandler {
handleError(error: any) {handleError(error: any) {
let message = ...;let message = ...;
......
let errObj = new Error(message);let errObj = new Error(message);
......
AppInsights.trackException(errObj, undefAppInsights.trackException(errObj, undef
pageUrl: window.location.href });pageUrl: window.location.href });

17. // app.module.ts// app.module.ts
import { MyErrorHandler }import { MyErrorHandler }
from './my-errorhandler';from './my-errorhandler';
@NgModule({@NgModule({
......
providers: [providers: [
{ provide: ErrorHandler,{ provide: ErrorHandler,
useClass: MyErrorHandler },useClass: MyErrorHandler },
],],
......
})})
export class AppModule { }export class AppModule { }

18. 記録されるようになった!記録されるようになった!

19. でもホントにこれでいいの?でもホントにこれでいいの?
もし何か私が勘違いしてたり、もっと良い⽅もし何か私が勘違いしてたり、もっと良い⽅
法があれば、教えて頂けると、とても嬉しい法があれば、教えて頂けると、とても嬉しい
です。です。

20. おわりおわり
Learn, Practice, Share.Learn, Practice, Share.