How To Integrate Azure Application Insights Service To An Angular

import { Injectable } from '@angular/core';
import { ApplicationInsights, IExceptionTelemetry, DistributedTracingModes } from '@microsoft/applicationinsights-web';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Injectable({
  providedIn: 'root',
})
export class ApplicationInsightsService {
  private appInsights: ApplicationInsights;

  constructor(private router: Router) {
    this.appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: "xxxxxxxxxxxxxx"
      }
    });
    this.appInsights.loadAppInsights();
    this.loadCustomTelemetryProperties();
    this.createRouterSubscription();
  }
  setUserId(userId: string) {
    this.appInsights.setAuthenticatedUserContext(userId);
  }
  clearUserId() {
    this.appInsights.clearAuthenticatedUserContext();
  }
  logPageView(name?: string, uri?: string) {
    this.appInsights.trackPageView({
      name,
      uri
    });
  }

  logException(error: Error) {
    let exception: IExceptionTelemetry = {
      exception: error
    };
    this.appInsights.trackException(exception);
  }
  private loadCustomTelemetryProperties() {
    this.appInsights.addTelemetryInitializer(envelope => {
      var item = envelope.baseData;
      item.properties = item.properties || {};
      item.properties["ApplicationPlatform"] = "Web";
      item.properties["ApplicationName"] = "ApplicationName";
    });
  }
  private createRouterSubscription() {
    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
      this.logPageView(null, event.urlAfterRedirects);
    });
  }
}

After creating an instance of the class defined above ApplicationInsightsService, the application starts in the AppComponent. Declare ApplicationInsightsService like this.

export class AppComponent {
    constructor(private ApplicationInsightsService: ApplicationInsightsService) {}
}

Error Handling

The Application Insights JS packages should catch all unhandled errors. But in reality, Angular actually catches any internal errors, for example, a bug in your code, and has its own way of handling them.

We want to create an ErrorHandler implementation that does nothing but log the exception to AppInsights, and we want to print it out to the console and cross-check the code.

import { ErrorHandler, Injector, Injectable } from '@angular/core';
import { ApplicationInsightsService } from './application-insights.service';

@Injectable()
export class ApplicationInsightsErrorHandler implements ErrorHandler {
    constructor(private injector: Injector) {}

    handleError(error: any): void {
        this.injector.get<ApplicationInsightsService>(ApplicationInsightsService).logException(error);
        console.log(error);
    }
}

In our NGModule, we then want to create a provider for our error handler.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Using Distributed tracing with CORS

If you are attempting to setup distributed tracing with CORS, while integrateApplicationInsightsc Service is pointing to an Azure domain and the front also points to another domain then we face the CORS issue. So we can resolve the issue in our ApplicationInsightsService file and add enableCorsCorrelationflag.

The first thing is that CORS is not turned on within the App Insights Angular library by default. To do so, in our ApplicationInsightsService we want to pass an extra flag when creating our ApplicationInsights object.

this.appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: "xxxxxxxxxxxxxxxx",
        enableCorsCorrelation: true
    }
});

View the Error exception in the Azure portal

The included App Insights JS library will automatically send metrics to Application Insights. To view the exceptions, navigate to the Failure menu and choose the Exceptions tab. Make sure to toggle to Browser in the top right-hand corner.

Go to Azure Portal, and open AngularDemoApp Application Insights, The left side panel has the performance and failure menu available. Click the failure menu open the Exception menu and see the logs.

Finally, we have received an exception log from the portal. I hope this article is most helpful for you. Thanks!