Angular 9/8/7 How-To: Handle HttpClient Errors with RxJS’ catchError() and throwError()

In this quick how-to article, we’ll see by example how to handle Http errors in Angular 9 apps with HttpClient 9 and RxJS catchError().

If you are new to these how-tos, check out how to install and set up a project and the prerequisites.

Handling Errors in Angular 9 HttpClient with RxJS catchError

RxJS provides the catchError() operator which as its name suggests can be used to catch errors but how it works?

Like the other RxJS operators catchError() can be piped into other streams using the pipe() function and you only need to provide a function that handles the errors properly as an argument to the operator.

HttpClient methods such as get() or post() return RxJS observables which means, we can call the pipe() method with the catchError() operator.

We have two two types of errors in client-side apps:

• Errors related to JavaScript and network which return ErrorEvent objects.
• Errors due to server issues related to code or database etc. which return http error responses.

This gives us a clue on how to handle errros. For instance, we need to check if the error is an instance of ErrorEvent to decide if it is related to the client or otheriwise to the server and then handle it approprialty.

This is an example of a server error on the console if the server is unreachable:

Before, we can see an example, we assume we have an Angular project with a HttpClient module imported.

Step 1 – Generating & Implementing an Angular 9/8 Service

Open a new terminal, navigate to your project’s folder and let’s generate a service using the following command:

$ ng generate service api

Next, open the src/app/api.service.ts file and update it as follows:

import{Injectable}from'@angular/core';import{HttpClient,HttpErrorResponse}from"@angular/common/http";@Injectable({providedIn:'root'})exportclassApiService{privateSERVER="http://server.com/api/products";constructor(privatehttpClient:HttpClient){}publicfetchData(){returnthis.httpClient.get(this.SERVER);}}

Step 2 – Importing RxJS ‘ catchError() & throwError()

Now, how to handle errors thrown in this service. First you start by importing catchError() and throwError() as follows:

import{Injectable}from'@angular/core';import{HttpClient,HttpErrorResponse}from"@angular/common/http";import{throwError}from'rxjs';import{catchError}from'rxjs/operators';

Step 3 – Adding an Error Handling Method

Next, you need to add a method for handling errors depending on the type of the error as follows:

@Injectable({providedIn:'root'})exportclassApiService{privateSERVER="http://server.com/api/products";constructor(privatehttpClient:HttpClient){}handleError(error:HttpErrorResponse){leterrorMessage='Unknown error!';if(error.errorinstanceofErrorEvent){// Client-side errorserrorMessage='Error:${error.error.message}';}else{// Server-side errorserrorMessage='ErrorCode:${error.status}nMessage:${error.message}';}window.alert(errorMessage);returnthrowError(errorMessage);}publicfetchData(){returnthis.httpClient.get(this.SERVER);}}

Step 3 – Applying the Error Handling Method Using catchError()

Finally, you need to to apply the error handling method to the fetchData() method using the catchError() operator as follows:

publicfetchData(){returnthis.httpClient.get(this.SERVER).pipe(catchError(this.handleError));}

As you might guess this has to be done for each service and methods in your application which is not a problem for small examples but in case of complex examples you need to handle errors globally using HttpClient interceptors.