Angular Azure Application Insights implementation for JS SDK V2
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.
Installation
Install & save the library to your package.json:
$ npm i --save angular-application-insights-v2
How to setup the AppModule configuration?
Now add ApplicationInsightsModule to your Angular Root AppModule
:
- Import the Application Insights module and the service provider
- Add the Module to your imports
- Add ApplicationInsightsService to your providers list
- Initialize the Application Insights Service inside app root module constructor
// 1) Import the Application Insights module and the service provider;
How to track the page view?
This library automatically track the initial request of a page. If you want to additionally track page requests then you can use the 'trackPageView' function from ApApplicationInsightsService.
this.appInsightsService.trackPageView;
How to send custom events to Application Insights?
Through out your application you can now use the ApplicationInsightsService class to fire off Application Insights functionality.
;
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:
API
ApplicationInsightsService is an angular service which provides the wrapper the Application Insights instance and it has following API functions.
applicationInsightsService.trackEventevent: Microsoft.ApplicationInsights.IEventTelemetry, customProperties:object;applicationInsightsService.startTrackEventname: string;applicationInsightsService.stopTrackEventname: string, properties?: object, measurements?:object;applicationInsightsService.trackPageViewpageView: Microsoft.ApplicationInsights.IPageViewTelemetry;applicationInsightsService.startTrackPagename?: string;applicationInsightsService.stopTrackPagename?: string, url?: string, customProperties?: object;applicationInsightsService.trackMetricmetric: Microsoft.ApplicationInsights.IMetricTelemetry, customProperties?:object;applicationInsightsService.trackExceptionexception: Microsoft.ApplicationInsights.IExceptionTelemetry;applicationInsightsService.trackTracetrace: Microsoft.ApplicationInsights.ITraceTelemetry, customProperties?: object;applicationInsightsService.setUserIdauthenticatedUserId: string;applicationInsightsService.clearUserId;applicationInsightsService._onerrorexception: Microsoft.ApplicationInsights.IAutoExceptionTelemetry;applicationInsightsService.trackPageViewPerformancepageViewPerformance: Microsoft.ApplicationInsights.IPageViewPerformanceTelemetry;applicationInsightsService.addTelemetryInitializertelemetryInitializer:boolean | void;
How to build from source?
npm run build
To lint all *.ts
files:
npm run lint
Credits
This project inspired by TrilonIO/angular-application-insights. Special thanks to @MarkPieszak
License
Follow online:
Twitter: @tamvasan