@markpieszak/ng-application-insights
    TypeScript icon, indicating that this package has built-in type declarations

    9.0.0 • Public • Published

    Angular Azure Application Insights implementation

    Connect your Angular client-side to Microsofts Application Insights with this easy-to-use Module.

    Application Insights is an extensible Application Performance Management (APM) service for web developers on multiple platforms. Use it to monitor your live web application. It will automatically detect performance anomalies. It includes powerful analytics tools to help you diagnose issues and to understand what users actually do with your app.

    npm Minzipped Size NPM Downloads MIT License


    Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

    Made with ❤️ by Trilon.io


    Installation

    Install & save the library to your package.json:

    $ npm i -S @markpieszak/ng-application-insights

    AppModule Setup

    Now add ApplicationInsightsModule to your Angular Root AppModule:

    // 1) Import the Application Insights module and the service provider
    import { ApplicationInsightsModule, AppInsightsService } from '@markpieszak/ng-application-insights';
    
    @NgModule({
      imports: [
        // 2) Add the Module to your imports
        ApplicationInsightsModule.forRoot({
          instrumentationKey: 'Your-Application-Insights-instrumentationKey'
        })
      ],
      providers: [ 
         // 3) Add AppInsightsService to your providers list
         AppInsightsService
      ]
    })
    export class YourRootModule { }

    What if you don't know your instrumentationKey right away?

    // Use instrumentationKeySetLater
    ApplicationInsightsModule.forRoot({
      instrumentationKeySetLater: true // <--
    })
    
    // Then later in your Application somewhere
    constructor(
      private appInsightsService: AppInsightsService
    ) {
      appInsightsService.config = {
        instrumentationKey: __env.APPINSIGHTS_INSTRUMENTATIONKEY // <-- set it later sometime
      }
      // then make sure to initialize and start-up app insights
      appInsightsService.init();
    }

    Usage

    Through out your application you can now use the AppInsightsService class to fire off AppInsights functionality.

    import { AppInsightsService } from '@markpieszak/ng-application-insights';
    
    export class ShoppingCartComponent {
      public cart: [];
      constructor(private appInsightsService: AppInsightsService) {}
    
      saveCart(user) {
        // MOCK Example of sending a trackEvent()
        // Saving some sample user & cart product data
        this.appInsightsService.trackEvent('ShoppingCart Saved', { 'user': user.id, 'cart': cart.id });
      }
    }

    Usage with Aspnetcore-Angular2-Universal repo or JavaScriptServices ( apps w/ Server-side rendering )

    ie: https://github.com/TrilonIO/aspnetcore-angular-universal

    First, make sure you are only importing the library & the server within the browser-app.module NgModule (do not share it within a common one, as the server isn't able to use this library during it's server-renders).

    Secondly, make sure you are calling the injector to get AppInsightsService during ngOnInit:

    export class HomeComponent implements OnInit {
    
        private AIService: AppInsightsService;
        private isBrowser: boolean;
    
        constructor(@Inject(PLATFORM_ID) private platformId, private injector: Injector) {
            this.isBrowser = isPlatformBrowser(this.platformId);
        }
    
        ngOnInit() { // <-- 
            if (this.isBrowser) { // <-- only run if isBrowser
                this.AIService = <AppInsightsService>this.injector.get(AppInsightsService); // <-- using the Injector, get the Service
                this.AIService.trackEvent('Testing', { 'user': 'me' });
            } 
        }
    }

    API

    You can see a list of the API here: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md#class-appinsights

    AppInsightsService.trackEvent()
    AppInsightsService.startTrackEvent()
    AppInsightsService.stopTrackEvent()
    AppInsightsService.trackPageView()
    AppInsightsService.startTrackPage()
    AppInsightsService.stopTrackPage()
    AppInsightsService.trackMetric()
    AppInsightsService.trackException()
    AppInsightsService.trackTrace()
    AppInsightsService.trackDependency()
    AppInsightsService.flush()
    AppInsightsService.setAuthenticatedUserContext()
    AppInsightsService.clearAuthenticatedUserContext()

    How to Contribute?

    ng-Application-Insights Development

    To generate all *.js, *.js.map and *.d.ts files:

    npm run build

    To lint all *.ts files:

    npm run lint

    License

    MIT License

    Copyright (c) 2016-2020 Mark Pieszak

    Twitter Follow


    Trilon - JavaScript, ASP.NET, Node, NestJS - Consulting | Training | Development

    Check out Trilon.io for more info!

    Contact us at hello@trilon.io, and let's talk about your projects needs.

    Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training

    Follow Trilon online:

    Twitter: @Trilon_io

    Install

    npm i @markpieszak/ng-application-insights

    Homepage

    trilon.io

    DownloadsWeekly Downloads

    5,848

    Version

    9.0.0

    License

    MIT

    Unpacked Size

    71.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar