Application Insights JavaScript SDK の Angular プラグイン

Application Insights JavaScript SDK の Angular プラグインを使用すると、以下が有効になります。

  • ルーターの変更の追跡
  • キャッチされない例外の追跡

警告

Angular プラグインは、ECMAScript 3 (ES3) と互換性がありません。

作業の開始

npm パッケージをインストールします。

npm install @microsoft/applicationinsights-angularplugin-js

基本的な使用方法

アプリの入力コンポーネントで Application Insights のインスタンスを設定します。

import { Component } from '@angular/core';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { AngularPlugin } from '@microsoft/applicationinsights-angularplugin-js';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(
        private router: Router
    ){
        var angularPlugin = new AngularPlugin();
        const appInsights = new ApplicationInsights({ config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        extensions: [angularPlugin],
        extensionConfig: {
            [angularPlugin.identifier]: { router: this.router }
        }
        } });
        appInsights.loadAppInsights();
    }
}

キャッチされない例外を追跡するには、次のように app.module.ts で ApplicationinsightsAngularpluginErrorService を設定します。

import { ApplicationinsightsAngularpluginErrorService } from '@microsoft/applicationinsights-angularplugin-js';

@NgModule({
  ...
  providers: [
    {
      provide: ErrorHandler,
      useClass: ApplicationinsightsAngularpluginErrorService
    }
  ]
  ...
})
export class AppModule { }

次のステップ