Quick Tip: Centralized Error Handling

Umair Hafeez

I am a full-stack web application developer, having more than 10 years of extensive experience in all phases of small-scale to enterprise-scale projects. I have ample knowledge of various domains including Web Design Systems, Learning Management Systems (e-learning), and Resource Management Systems.

I have been leading project teams for more than 5 years and have proudly delivered numerous successful projects. I have extensive experience in handling client-facing communications and meetings both remotely and in-person.

I believe in team success & growth, hence I always put my best efforts to build & maintain a strong team bonding for every project I get to work on.

Front End Architect | Tech Lead | Full Stack Web Developer | Angular Fanatic 🅰️ | MCP

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 || ''
    });
  }
}

@NgModule({
  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:

https://stackblitz.com/edit/angular-ivy-resq5p?file=src/app/app.module.ts

I hope you like this tip!

Quick Tip: Centralized Error Handling

Comments

Angular

Angular CDK Coercion: The missing API reference

More from this blog

Usage of `alt` attribute and text descriptions when using img elements

Better yet accessible :focus

Being a better Interviewer

Web Animations and Accessibility

Command Palette

Comments

Angular

Angular CDK Coercion: The missing API reference

More from this blog