Ninjas Practicing Multidimensionality

    ng-appinsights
    TypeScript icon, indicating that this package has built-in type declarations

    11.0.0 • Public • Published

    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 { }

    Install

    npm i ng-appinsights

    DownloadsWeekly Downloads

    112

    Version

    11.0.0

    License

    MIT

    Unpacked Size

    74.9 kB

    Total Files

    20

    Last publish

    Collaborators

    • goenning