How do you implement a custom error handler in Angular applications? — Angular Interview Question #53

In Angular, you can implement a custom error handler class to override the default error handling behavior. The custom error handler class should implement the ‘ErrorHandler‘ interface, which requires providing an implementation for the ‘handleError‘ method.

Here’s a step-by-step guide to implementing a custom error handler in Angular:

Step 1: Create the custom error handler class

Create a new TypeScript file named ‘custom-error-handler.ts‘ in your Angular project and implement the custom error handler class by extending the default ‘ErrorHandler‘ interface:

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

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // Your custom error handling logic here
  }
}

Step 2: Implement custom error handling logic

Inside the ‘handleError‘ method, you can implement the custom error handling logic, for example, logging the error to your analytics service, showing a custom error message to the user, or any other custom behavior:

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

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    // Log error to analytics
    this.logErrorToAnalytics(error);

    // Show custom error message to the user
    this.showErrorAlert();
  }

  private logErrorToAnalytics(error: any): void {
    // Your logic to log the error to your analytics service
    console.error('Error logged to analytics service:', error);
  }

  private showErrorAlert(): void {
    // Your logic to show custom error message to the user
    alert('A custom error occurred. Please try again later.');
  }
}

Step 3: Register custom error handler with Angular

Finally, to make Angular use your custom error handler, you need to provide it in the app module (or any other module where you want it to be used). Open your ‘app.module.ts‘ (or the relevant module file) and add the following ‘providers‘ array to your ‘NgModule‘ decorator:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomErrorHandler } from './custom-error-handler';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    { provide: ErrorHandler, useClass: CustomErrorHandler }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now Angular will use your ‘CustomErrorHandler‘ class to handle errors throughout your application. Remember that this custom error handler replaces the default error handling in your Angular application, so if you want to keep the default behavior (such as logging the error to the console), you should include that logic in your custom error handler as well.