Quick Tip: Centralized Error Handling

Made simple by Angular

Graceful error handling is a key feature of good software.

Angular comes with a built-in mechanism for centralized error handling. It's really handy to deal with unhandled exceptions.

Here is how we can quickly get started.

We'll create a class that extends ErrorHandler that is part of @angular/core and implement the handleError method, that gives us the error object.

import { NgModule, ErrorHandler } from '@angular/core';

export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any) {
    console.warn('Handled using custom handler: ', {
      name: error.name,
      message: error.message,
      stack: error.stack || ''

  providers: [
      provide: ErrorHandler,
      useClass: CustomErrorHandler
export class AppModule { }

We can use any logging provider to log these errors and present the user with a friendly message to keep up with a good UX.

A working example can be found on this link:


I hope you like this tip!