goenning / ng-appinsights

Connect your Angular applications to Azure Application Insights to automatically track dependency calls, performance metrics and error logging. Use custom events to track anything you want!

ng-appinsights

A simple wrapper of Application Insights JS Library for Angular applications.

Supported features are:

• Simple setup (no modules required)
• Deferred Initialization
• Built-in Global Error Handler

Installation

Using npm:

npm install --save ng-appinsights

Usage

To initialize Application Insights, add the following to your entry point module (usually app.module.ts):

import { APP_INSIGHTS_CONFIG } from 'ng-appinsights';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    {
      provide: APP_INSIGHTS_CONFIG,
      useValue: {
        instrumentationKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx',
        enableAutoRouteTracking: true,
        // Visit https://github.com/microsoft/ApplicationInsights-JS to know all possible configurations.
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import the AppInsightsService into your components and use the available tracking methods.

import { Component } from '@angular/core';
import { AppInsightsService } from 'ng-appinsights';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  count = 0;

  constructor(private appInsights: AppInsightsService) {
  }

  increment(): void {
    this.count++;
    this.appInsights.trackEvent('increment', { count: this.count });
  }

  decrement(): void {
    this.count--;
    this.appInsights.trackEvent('decrement', { count: this.count });
  }
}

Deferred Initialization

You may also skip the configuration on the Module and do it using the Service at any time.

import { Component } from '@angular/core';
import { AppInsightsService } from 'ng-appinsights';

@Component({
  selector: 'app-root',
  templateUrl: './my.component.html'
})
export class MyComponent {
  constructor(private appInsights: AppInsightsService) {
  }

  init(): void {
    this.appInsights.init({
      instrumentationKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxxx',
    });
  }
}

Global Error Handler

You may also include the built-in Error Handler which will automatically send exception events to AI for every errors that occurs inside your application.

import { AppInsightsErrorHandler } from 'ng-appinsights';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: ErrorHandler, useClass: AppInsightsErrorHandler },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng-appinsights's Issues

Angular 15 support

Add Angular 15 support