Angular–Global Error Handling

By default, Angular comes with its own ErrorHandler. This error handler captures all errors inside our angular app and prevents the app from crashing.

If you want to implement your own error handling logic, this would be a good place to start. Therefore we have to create a new class that inherits from ErrorHandler:

	import { HttpErrorResponse } from '@angular/common/http';
	import { ErrorHandler, Injectable, Injector } from '@angular/core';
	import { ErrorService } from 'app/services/error.service';
	@Injectable()
	export class GlobalErrorHandler implements ErrorHandler {
	constructor(private injector: Injector) { }
	handleError(error: Error | HttpErrorResponse) {
	const offlineService = this.injector.get(OfflineService);
	const errorService = this.injector.get(ErrorService);
	if (error instanceof HttpErrorResponse) {
	// Server or connection error happened
	// Handle Http Error (error.status === 403, 404...)
	errorService.error = error;
	} else {
	// Handle Client Error (Angular Error, ReferenceError...)
	errorService.error = error;
	}
	// Log the error anyway
	console.error(error);
	}
	}

view raw GlobalErrorHandler.ts hosted with ❤ by GitHub

Inside this ErrorHandler we use our own ErrorService:

	import { HttpErrorResponse } from '@angular/common/http';
	import { Injectable } from '@angular/core';
	import { Router } from '@angular/router';
	import { BehaviorSubject, Observable } from 'rxjs';
	@Injectable({
	providedIn: 'root'
	})
	export class ErrorService {
	private errorSource = new BehaviorSubject<Error | HttpErrorResponse>(null);
	public _error$: Observable<Error | HttpErrorResponse> = this.errorSource.asObservable();
	set error(error: Error | HttpErrorResponse) {
	this.errorSource.next(error);
	}
	constructor(public router: Router) { }
	clearErrors() {
	this.error = null;
	this.router.navigate(['/home']);
	}
	}

view raw ErrorService.ts hosted with ❤ by GitHub

This ErrorService exposes an observable that can be used to subscribe to errors in different places.

The ErrorHandler is registered inside our AppModule:

	import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
	import { CUSTOM_ELEMENTS_SCHEMA, ErrorHandler, NgModule } from '@angular/core';
	import { GlobalErrorHandler } from 'app/globalerror.handler';
	import { AppComponent } from './app.component';
	@NgModule({
	declarations: [AppComponent],
	imports: [
	],
	providers: [
	{
	provide: ErrorHandler,
	useClass: GlobalErrorHandler,
	}
	],
	bootstrap: [AppComponent],
	schemas: [CUSTOM_ELEMENTS_SCHEMA]
	})
	export class AppModule {
	constructor() {
	}
	}

view raw app.module.ts hosted with ❤ by GitHub