Angular, how to create a custom Error Handler

In complex projects can be useful to create your own error handler in Angular. Maybe you want to log the errors in the server or present more explicits messages for the debug of the application.

As described by the official angular documentation ::The default implementation of:: ErrorHandler:: prints error messages to the console.::

In our example we create a custom Error handler that will be used by Angular in place of the default implementation. This is the structure of the implementation, you can customize it according to your requirements.

Create an Error class

  • you need to create a class that implements ErrorHandler, the default implementation provided by Angular
  • you have to override the handleError(error:any) method with your own implementation

For our tutorial we created a Service, this is a common solution if you want to communicate the issue to the server. You can use a standard class to implement you own error handler.

import { Injectable, ErrorHandler } from '@angular/core'; 
  providedIn: 'root' 
export class MyErrorHandlerService implements ErrorHandler { 
  constructor() { } 
  handleError(error: any): void { 
    console.error("My error handler:\n", error); 
    // TODO: do something useful with the exception 

Declare your handler in the module

To tell Angular that you want to catch the exceptions with your own handler you need to define the provider in the module. In our example we add the provider to the App module:

providers: [MyErrorHandlerService] AND we need to replace the default error handler provider in the Angular internal map of dependencies : [{provide: ErrorHandler, useClass: MyErrorHandler}]

At runtime, when there will be a call to ErrorHandler Angular will give the reference of our class MyErrorHandler .

Our final code is:

import { NgModule, ErrorHandler } from '@angular/core'; 
import { BrowserModule } from "@angular/platform-browser"; 
// we import our service 
import { MyErrorHandlerService } from "./common/my-error-handler.service"; 
  declarations: [ 
  imports: [ 
  providers: [ 
	 // we replace the default ErrorHandler 
    {provide: ErrorHandler, useClass: MyErrorHandlerService} 
  bootstrap: [AppComponent] 
export class AppModule { } 

We can test our error introducing a simple error:

ngOnInit(): void {   
  // @ts-ignore 
  test = test+1; 
error in chrome

Without custom error Angular Core would have handled the exception for us:

exception in chrome

Deep dive

You can look at the details of the implementation of ErrorHandler in the Angular source code

You could be interested in

Right click context menu with Angular

Right click custom menu inside dynamic lists with Angular Material

Enums in Angular templates

How to use enum in the html template

WebApp built by Marco using SpringBoot, Java 17, Mustache, Markdown and in Azure