Angular 14 HTTP Error Handling Using Pipe,CatchError and ThrowError Full Example

Here is an example of how to handle HTTP error in Angular using the Pipe, CatchError, and ThrowError operators:

Import the necessary modules:

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

import { HttpClient, HttpErrorResponse } from '@angular/common/http';

import { catchError, tap } from 'rxjs/operators';

import { throwError } from 'rxjs';

In your component, inject the HttpClient:

constructor(private http: HttpClient) { }

1	constructor(private http: HttpClient) { }

In your component, create a method to make the API call and handle errors:

getData() {
    this.http.get('https://jsonplaceholder.typicode.com/todos/1')
    .pipe(
        tap(data => console.log(data)),
        catchError(this.handleError)
    )
    .subscribe();
}

getData() {

this.http.get('https://jsonplaceholder.typicode.com/todos/1')

.pipe(

tap(data => console.log(data)),

catchError(this.handleError)

)

.subscribe();

}

Create a separate method to handle errors:

handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
        // A client-side or network error occurred. Handle it accordingly.
        console.error('An error occurred:', error.error.message);
    } else {
        // The backend returned an unsuccessful response code.
        // The response body may contain clues as to what went wrong.
        console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    return throwError(
        'Something bad happened; please try again later.');
};

handleError(error: HttpErrorResponse) {

if (error.error instanceof ErrorEvent) {

// A client-side or network error occurred. Handle it accordingly.

console.error('An error occurred:', error.error.message);

} else {

// The backend returned an unsuccessful response code.

// The response body may contain clues as to what went wrong.

console.error(

`Backend returned code ${error.status}, ` +

`body was: ${error.error}`);

}

// return an observable with a user-facing error message

return throwError(

'Something bad happened; please try again later.');

};