DEV Community

loading...
Cover image for Global Error Handler in Angular + Application Insight

Global Error Handler in Angular + Application Insight

salimchemes profile image Salim Chemes Updated on ・2 min read

We don't like errors, but they will happen anyway, so it's important to have a centralized way to handle errors in our angular app. We want to catch, identify and take actions with them.
In this post we will:

  • Implement global error handler in angular
  • Add Application Insights (aka AI) sdk
  • Track errors in AI

Implement global error handler in angular
Angular makes our life easier catching the errors globally thank to ErrorHandler class, so let's see how to implement it

  • Create Global Error Handler service and implement ErrorHandler class
import { Injectable, ErrorHandler } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable({
  providedIn: "root",
})
export class GlobalErrorHandler implements ErrorHandler {
  constructor() {}

  handleError(error: Error | HttpErrorResponse) {}
}
Enter fullscreen mode Exit fullscreen mode
  • Update app.module.ts providers
import { BrowserModule } from "@angular/platform-browser";
import { NgModule, ErrorHandler } from "@angular/core"; 
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { HttpClientModule } from "@angular/common/http";
import { GlobalErrorHandler } from "./services/global-error-handler";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, AppRoutingModule],
  providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }], // Our service added

  bootstrap: [AppComponent],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

Add Application Insights sdk
We need to add this dependency in our app

  • npm i --save @microsoft/applicationinsights-web

Now let's create a service to send exceptions to AI

import { Injectable } from "@angular/core";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
import { environment } from "src/environments/environment";
@Injectable({
  providedIn: "root",
})
export class ApplicationInsightService {
  appInsights: ApplicationInsights;
  constructor() {
    this.appInsights = new ApplicationInsights({
      config: {
        connectionString: environment.appInsightsConfig.connectionString, // provided by Azure
        /* ...Other Configuration Options... */
      },
    });
    this.appInsights.loadAppInsights();
    this.appInsights.trackPageView();
  }

  logError(error: Error) {
    this.appInsights.trackException({ exception: error });
  }
}

Enter fullscreen mode Exit fullscreen mode

And then integrate it with our global error handler service

import { Injectable, ErrorHandler } from "@angular/core";
import { HttpErrorResponse } from "@angular/common/http";
import { ErrorService } from "./error.service";
import { LogService } from "./log.service";

@Injectable({
  providedIn: "root",
})
export class GlobalErrorHandler implements ErrorHandler {
  constructor(
    private errorService: ErrorService,
    private logService: LogService
  ) {}

  handleError(error: Error | HttpErrorResponse) {
    if (error instanceof HttpErrorResponse) {
      // Server error
      alert(this.errorService.getHttpError(error));
    } else {
      // Client Error
      this.logService.logErrorOnApplicationInsight(error);
      alert(this.errorService.getClientSideError(error));
    }
    // Always log errors
    this.logService.logError(error);
  }
}
Enter fullscreen mode Exit fullscreen mode

logService is just a wrapper to take log actions

import { Injectable } from "@angular/core";
import { ApplicationInsightService } from "./application-insight.service";
import { HttpErrorResponse } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class LogService {
  constructor(private applicationInsightService: ApplicationInsightService) {}

  logErrorOnApplicationInsight(error: Error) {
    return this.applicationInsightService.logError(error);
  }

  logError(error: Error | HttpErrorResponse) {
    console.error(error);
  }
}

Enter fullscreen mode Exit fullscreen mode

Track errors in AI
To be able to see errors we send from the app we need to

  • Create AI artifact (need a resource group first)
  • Get connection string and add it into our app (you will find it in Azure portal)
  • Throw an error from our app and track exception (check example app)

Alt Text

This is how the errors look in AI
Alt Text

References

Discussion

pic
Editor guide
Collapse
lqq677 profile image
LQQ677

Hello Salim, I'm not very familiar with Angular. I'd like to ask if I threw a browser exception, such as console. Exception ('0 '), whether this can be captured by AI. I tried, but it doesn't report to AI. When I search for angular exceptions, it seems that all angular exceptions are automatically retrieved, right.

Collapse
salimchemes profile image
Salim Chemes Author

Hi, not sure what is the issue you are having, you can take a look into the repo or into this video
youtube.com/watch?v=tvzjesdpfFQ&fe...

repo:
github.com/salimchemes/global-erro...

Additionally, the library is not Angular specific, so you should not have any major issues
github.com/microsoft/applicationin...