Angular Custom Error Handler

By Arvind Rai, January 26, 2024
Angular
This page will walk through Angular custom error handler. Angular provides ErrorHandler class for centralized exception handling. We create custom error handler service by implementing ErrorHandler class. It has a method handleError(error) that executes whenever the application throws error anywhere in the application. We need to override it to define our custom error handler. We can use our custom error handler as global error handler. ErrorHandler is created before the providers. So we need Injector to get instance of any service within custom error handler. If our application is using routing then to get URL in custom error handler, we should use Router otherwise we can use Location. We can navigate to a global error page for a user friendly message after handling error in our custom error handler service. Here we will provide complete example to create custom error handler step-by-step.
Contents

1. ErrorHandler

Angular ErrorHandler class is used for centralized exception handling. The default implementation of ErrorHandler prints error messages to browser console. We implement this class to create custom error handler. ErrorHandler has a method handleError(error) that executes whenever the application throws error anywhere in the application. Find the structure of ErrorHandler class from Angular Doc. 
class ErrorHandler {
  handleError(error: any): void
}
To create a custom error handler we need to create a service by implementing ErrorHandler class.

2. Steps to Create Custom Error Handler

Here we will discuss to create custom error handler using ErrorHandler.
Step-1: Create a service by implementing ErrorHandler and overriding its handleError() method. Here we are creating GlobalErrorHandlerService as custom error handler. 
import { Injectable, ErrorHandler } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable()
export class GlobalErrorHandlerService implements ErrorHandler {
    handleError(error: any) {
      if (error instanceof HttpErrorResponse) {
          //Backend returns unsuccessful response codes such as 404, 500 etc.				  
          console.error('Backend returned status code: ', error.status);
          console.error('Response body:', error.message);          	  
      } else {
          //A client-side or network error occurred.	          
          console.error('An error occurred:', error.message);          
      }     
    }
}
Step-2: We need to configure our GlobalErrorHandlerService in application module in providers metadata of @NgModule as following. 
@NgModule({
  ------
  providers: [
    GlobalErrorHandlerService,
    { provide: ErrorHandler, useClass: GlobalErrorHandlerService },
    -----    
  ]
})
export class AppModule { }
Now default implementation of ErrorHandler will not be called by application. When an error will be thrown from anywhere in the application, our handleError() method of GlobalErrorHandlerService will execute.

Step-3: Error will be thrown in application automatically or by using throw keyword. In both case GlobalErrorHandlerService will execute. Find the first case. 
this.personService.addPerson(person)
     .subscribe(data => {
         console.log(data);
       }
     );
Here we are not catching the error, when application will throw error, handleError() method of GlobalErrorHandlerService will execute. Now find the second case. 
this.countryService.addCountry(country)
   .subscribe(data => {
       console.log(data);
     },
     err => {
       throw err;
     }
   );
If we are catching the error then we need to throw it using throw keyword and then handleError() method of GlobalErrorHandlerService will execute.

3. Using Injector

ErrorHandler is created before the providers. So we need Injector for dependency injection in our custom error handler class. Injector is imported from @angular/core library. Find the code snippet to use Injector. 
@Injectable()
export class GlobalErrorHandlerService implements ErrorHandler {
    constructor(private injector: Injector) { }    

    handleError(error: any) {
      let router = this.injector.get(Router);
      console.log('URL: ' + router.url);
      ------
    }
}
In the above code we are fetching Router using Injector.

4. Get URL using Router and Location

When an exception is thrown globally, we are interested to know the URL for which exception is thrown. If our application is using routing then to get URL in custom error handler, we should use Router otherwise we can use Location. Find the code snippet to get URL using Router. 
@Injectable()
export class GlobalErrorHandlerService implements ErrorHandler {
    constructor(private injector: Injector) { }    

    handleError(error: any) {
      let router = this.injector.get(Router);
      console.log('URL: ' + router.url);
      ------
    }
}
Router is imported from @angular/router library. If our application is not using routing, we can use Location to get URL as following. 
@Injectable()
export class GlobalErrorHandlerService implements ErrorHandler {
    constructor(private injector: Injector, private location: Location) { }    

    handleError(error: any) {
       console.log(this.location.path());
      ------
    }
}
We need to configure Location, LocationStrategy and PathLocationStrategy in application module using providers as following. 
providers: [
    Location,
    {provide: LocationStrategy, useClass: PathLocationStrategy}        
]
Location, LocationStrategy and PathLocationStrategy are imported from @angular/common library.

5. Using Logger Service

We can use a logger service to log error. Suppose we have a LoggerService as following. 
import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class LoggerService {
    log(error: any) {
      console.log(error.message);
    }
}
Now find our custom error handler. We need to get LoggerService instance using Injector. 
@Injectable()
export class GlobalErrorHandlerService implements ErrorHandler {
    constructor(private injector: Injector) { }    

    handleError(error: any) {
      let router = this.injector.get(Router);
      console.log('URL: ' + router.url);
      
      let loggerService = this.injector.get(LoggerService);
      loggerService.log(error);
    }
}

6. Global Error Handler

Creating custom ErrorHandler works as global error handler because our custom ErrorHandler will execute for any error thrown from anywhere in the application. We can redirect from custom error handler service to global error handler page to show a user friendly message. Suppose we have a global error component as following. 
import { Component } from '@angular/core';

@Component({
  template: `
        <h2>An error occurred.</h2>
    `
})
export class GlobalErrorComponent {
}
We need to add path in application routing module as following. 
const routes: Routes = [
        ------
	{
	   path: 'error',
	   component: GlobalErrorComponent
	}
];
Now find our custom error handler service. 
import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';

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

    handleError(error: any) {
      let router = this.injector.get(Router);
      console.log('URL: ' + router.url);
      
      if (error instanceof HttpErrorResponse) {
          //Backend returns unsuccessful response codes such as 404, 500 etc.				  
          console.error('Backend returned status code: ', error.status);
          console.error('Response body:', error.message);          	  
      } else {
          //A client-side or network error occurred.	          
          console.error('An error occurred:', error.message);          
      }     
      router.navigate(['/error']);
    }
}


7. Complete Example

global-error-handler.service.ts 
import { Injectable, ErrorHandler, Injector } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import { Router } from '@angular/router';

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

    handleError(error: any) {
      let router = this.injector.get(Router);
      console.log('URL: ' + router.url);
      
      if (error instanceof HttpErrorResponse) {
          //Backend returns unsuccessful response codes such as 404, 500 etc.				  
          console.error('Backend returned status code: ', error.status);
          console.error('Response body:', error.message);          	  
      } else {
          //A client-side or network error occurred.	          
          console.error('An error occurred:', error.message);          
      }     
      router.navigate(['/error']);
    }
}
global-error.component.ts 
import { Component } from '@angular/core';

@Component({
  template: `
        <h2>An error occurred.</h2>
    `
})
export class GlobalErrorComponent {
}
app-routing.module.ts 
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddCountryComponent }  from './country/add-country.component';
import { AddPersonComponent }  from './person/add-person.component';
import { GlobalErrorComponent }  from './global-error.component';
import { PageNotFoundComponent }  from './page-not-found.component';

const routes: Routes = [
	{
	   path: 'country',
	   component: AddCountryComponent
	},	
	{
	   path: 'person',
	   component: AddPersonComponent
	},
	{
	   path: 'error',
	   component: GlobalErrorComponent
	},			
	{
	   path: '',
	   redirectTo: '/country',
	   pathMatch: 'full'
	},
        {
	   path: '**',
	   component: PageNotFoundComponent 
        }	
];
@NgModule({
  imports: [ 
        RouterModule.forRoot(routes) 
  ],
  exports: [ 
        RouterModule 
  ]
})
export class AppRoutingModule{ }
app.module.ts 
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent }  from './app.component';
import { AddCountryComponent }  from './country/add-country.component';
import { AddPersonComponent }  from './person/add-person.component';
import { GlobalErrorComponent }  from './global-error.component';
import { PageNotFoundComponent }  from './page-not-found.component';
import { AppRoutingModule }  from './app-routing.module';
import { GlobalErrorHandlerService } from './global-error-handler.service';

@NgModule({
  imports: [     
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    AddCountryComponent,
    AddPersonComponent,
    GlobalErrorComponent,
    PageNotFoundComponent
  ],
  providers: [
    GlobalErrorHandlerService,
    { provide: ErrorHandler, useClass: GlobalErrorHandlerService }    
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
add-country.component.html 
<h3>Add Country</h3>
<form [formGroup]="countryForm" (ngSubmit)="onFormSubmit()">
   <p> Name: <input formControlName="name"> </p>
   <p> Capital: <input formControlName="capital"> </p>
   <p> Currency: <input formControlName="currency"> </p>
   <p> <button>Add</button> </p>
</form>
add-country.component.ts 
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { CountryService } from './country.service';
import { Country } from './country';

@Component({
    templateUrl: './add-country.component.html'
})
export class AddCountryComponent { 
	constructor(private countryService: CountryService) { }
	countryForm = new FormGroup({
	   name: new FormControl(),
	   capital: new FormControl(),
	   currency: new FormControl()
	});	
	onFormSubmit() {
	   let country = this.countryForm.value;
	   this.countryService.addCountry(country)
	      .subscribe(data => {
		    console.log(data);
		  },
		  err => {
		    throw err;
		  }
	      );
	}
}
country.service.ts 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Country } from './country';

@Injectable({
    providedIn: 'root'
})
export class CountryService { 
    url = "/api/countries";
    constructor(private http: HttpClient) { }	
		
    addCountry(country: Country): Observable<Country> {
	return this.http.post<Country>(this.url, country);
    }	
}
country.ts 
export interface Country { 
	name:string;
	capital:string;
	currency:string;
}
add-person.component.html 
<h3>Add Person</h3>
<form [formGroup]="personForm" (ngSubmit)="onFormSubmit()">
   <p> Name: <input formControlName="name"> </p>
   <p> City: <input formControlName="city"> </p>
   <p> Mobile: <input formControlName="mobile"> </p>
   <p> <button>Add</button> </p>
</form>
add-person.component.ts 
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { PersonService } from './person.service';
import { Person } from './person';

@Component({
    templateUrl: './add-person.component.html'
})
export class AddPersonComponent { 
	constructor(private personService: PersonService) { }
	personForm = new FormGroup({
	   name: new FormControl(),
	   city: new FormControl(),
	   mobile: new FormControl()
	});	
	onFormSubmit() {
	   let person = this.personForm.value;
	   this.personService.addPerson(person)
	      .subscribe(data => {
		   console.log(data);
		}
	      );
	}
}
person.service.ts 
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Person } from './person';

@Injectable({
  providedIn: 'root'
})
export class PersonService { 
  url = "/api/persons";
  constructor(private http: HttpClient) { }	
		
  addPerson(person: Person): Observable<Person> {
      return this.http.post<Person>(this.url, person);
  }	
}
person.ts 
export interface Person { 
	name:string;
	city:string;
	mobile:string;
}
page-not-found.component.ts 
import { Component } from '@angular/core';
import { Location } from '@angular/common';

@Component({
  template: `<h2>Page Not Found.</h2>
             <div>
                <button (click)="goBack()">Go Back</button>
	     </div>
        `
})
export class PageNotFoundComponent {
	constructor(private location: Location) { }
	goBack(): void {
          this.location.back();
        }
}
app.component.ts 
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
	<nav ngClass = "parent-menu">
	  <ul>
		 <li><a routerLink="/country" routerLinkActive="active">Country</a></li>
		 <li><a routerLink="/person" routerLinkActive="active">Person</a></li>
	  </ul> 
	</nav>  
	<div ngClass = "parent-container">	
	  <router-outlet></router-outlet>	
	</div>
  `
})
export class AppComponent { 
}
styles.css 
.parent-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
.parent-menu li {
    float: left;
}
.parent-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
}
.parent-menu li a:hover:not(.active) {
    background-color: #111;
}
.parent-menu .active{
    background-color: #4CAF50;
}
.parent-container {
    padding-left: 10px;
}
Find the print-screen of the output.
Angular Custom Error Handler

8. Reference

Angular Doc: ErrorHandler

9. Download Source Code

ZIP File
RELATED POST

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE
JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5








©2024 concretepage.com | Privacy Policy | Contact Us