You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Angular & Azure Application Insights module - Find out performance and usage of your app by connecting Microsoft Azure Application insights with your Angular application by @TrilonIO
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.
Now add ApplicationInsightsModule to your Angular Root AppModule:
// 1) Import the Application Insights module and the service providerimport{ApplicationInsightsModule,AppInsightsService}from'@markpieszak/ng-application-insights';
@NgModule({imports: [// 2) Add the Module to your importsApplicationInsightsModule.forRoot({instrumentationKey: 'Your-Application-Insights-instrumentationKey'})],providers: [// 3) Add AppInsightsService to your providers listAppInsightsService]})exportclassYourRootModule{}
What if you don't know your instrumentationKey right away?
// Use instrumentationKeySetLaterApplicationInsightsModule.forRoot({instrumentationKeySetLater: true// <--})// Then later in your Application somewhereconstructor(privateappInsightsService: AppInsightsService){appInsightsService.config={instrumentationKey: __env.APPINSIGHTS_INSTRUMENTATIONKEY// <-- set it later sometime}// then make sure to initialize and start-up app insightsappInsightsService.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';exportclassShoppingCartComponent{publiccart: [];constructor(privateappInsightsService: AppInsightsService){}saveCart(user){// MOCK Example of sending a trackEvent()// Saving some sample user & cart product datathis.appInsightsService.trackEvent('ShoppingCart Saved',{'user': user.id,'cart': cart.id});}}
Usage with Aspnetcore-Angular2-Universal repo or JavaScriptServices ( apps w/ Server-side rendering )
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:
exportclassHomeComponentimplementsOnInit{privateAIService: AppInsightsService;privateisBrowser: boolean;constructor(@Inject(PLATFORM_ID)privateplatformId,privateinjector: Injector){this.isBrowser=isPlatformBrowser(this.platformId);}ngOnInit(){// <-- if(this.isBrowser){// <-- only run if isBrowserthis.AIService=<AppInsightsService>this.injector.get(AppInsightsService);// <-- using the Injector, get the Servicethis.AIService.trackEvent('Testing',{'user': 'me'});}}}
Angular & Azure Application Insights module - Find out performance and usage of your app by connecting Microsoft Azure Application insights with your Angular application by @TrilonIO