How to Handle Errors Globally in Angular

| By Maina Wycliffe | | | Angular

By default, when errors occur in Angular during runtime, they are written to the browser console. This is great during development and testing but not great when running on production. This is one environment where you have no access to. And the users may lack technical skills to help. No matter how hard you work on your app, errors are almost inevitable.

It is therefore necessary to be able to handle errors in a friendly manner and collect them for investigation, analysis and correction. In this post, I will show you how to intercept the default error handler, and then send the errors to a remote logging service (Simple REST API call) and show a friendly message to the user.


In a previous post, I wrote about catching and logging http errors and some readers asked whether it is wise to trust logs from the users. My argument is simple, while that data is not 100% trustworthy, it provides an important diagnostic data which can guide you in discovering new errors in your application.

It helps you know which parts of your application require attention and investigation. Most of your users will most likely leave your app without leaving feedback if it ever fails. Also, collecting such errors provides technical information (i.e. Stack Trace) which is not possible to get from users. You could also use Machine Learning to dig into the logged data and wind out false reports.

Creating a Custom Error Handler Class

First, we need to create a new class using Angular CLI.

ng generate class custom-error-interceptor

Next, we need to implement the ErrorHandler interface for our new class.

export class CustomErrorHandler implements ErrorHandler {}

Then, we need to add an handleError method in our class, which will catch the errors in our app and do something with the errors.

handleError(error: any) {}

The method accepts an error parameter which is the error content. Now, we need to do something with our error when it gets here. One option would be sending it to a remote logging server such as AWS Cloud Watch and provide a custom error message to the user. To do this, we need to create a logger service and inject it to our custom error handler class.

constructor(private loggerService: LoggerService) {}

And then inside our handleError method, we can send the error to an API End Point.


After that we can show a friendly message to the user. For this we will use Angular Material Snackbar. First, we are going to inject MatSnackBar to our custom error handler class, next to our loggerService we injected previously.

constructor(private loggerService: LoggerService,private snackBar: MatSnackBar) {}

Now, we can show our message:'Your message here', 'Dismiss', {
  duration: 2000

NB: This can be replaced with something like Angular Material Dialog or Bootstrap Modal Window. You can also use Angular Flex Layout to adaptively show either a snack bar on a small device and a modal window on a large device.

Now, our complete class should look like this now:

export class CustomErrorHandler implements ErrorHandler {
    private loggerService: LoggerService,
    private snackBar: MatSnackBar
  ) {}

  handleError(error: any) {
    // send to the observable

    // next show a friendly message'Your message here', 'Dismiss', {
      duration: 2000

Our Logger Service

Our logger service will look something like this:

  providedIn: 'root'
export class LoggerService {
  constructor(private http: HttpClient) {}

  log(error: any): Observable<boolean> {
    return this.http
        'Your URL Here',
        error, // <<<<=============== sending error as body
          observe: 'response'
      .pipe(map(e => true));

NB: Please note, that am sending the error as the body. This might not work depending on the logging server. You might have to parse the error and compose a message before sending it to the logging server. You can also send it a base64 string and decode it on the server before storing it.

Registering the Custom Error Handler

Finally, for our custom Error Handler to work, we need to add it to the list of our providers:

  declarations: [AppComponent, HttpClientModule],
  imports: [BrowserModule, BrowserAnimationsModule],
  providers: [
      provide: ErrorHandler,
      useClass: CustomErrorHandler
  bootstrap: [AppComponent]
export class AppModule {}
Angular 6 - Angular CLI Workspaces

One of the least talked about features of Angular 6 is Angular CLI Workspaces. Workspaces or Angular CLI Workspaces give angular developers …

Read More
Enabling Hot Module Replacement (HMR) in Angular 6

Hot Module Replacement (HMR) is a key webpack feature that is not enable by default in Angular. It allows for modules to be replaced without …

Read More
Building Docker Images for Deploying Angular Apps

In this post, we are going to look at how to deploy an angular app using docker. Docker containers can be used to simplify the process of …

Read More
Logging HTTP Errors in Angular 6

In my last post, I looked at how you can use HTTP Interceptors to attach and refresh authorization tokens. In this post, we are going to use …

Read More
Refreshing Authorization Tokens – Angular 6

In this post, we are going to build a http interceptor for refreshing authorization tokens once expired. The idea here is to be able to …

Read More
Getting Started with Debugging Angular Apps in VSCode

In this post, I am going to show you how to get started with debugging angular apps in VSCode. We shall target Firefox, Chrome and Microsoft …

Read More