Published: November 08 2022

Angular - HTTP Request Error Handling with the HttpClient

This is a quick tutorial on how to handle errors when sending HTTP requests from Angular to an API using the HTTP client service (HttpClient).

How to handle HTTP request errors in Angular

The below examples show two different ways of catching and handling errors from HTTP requests sent with the Angular HttpClient. They both send an HTTP POST request to an invalid url on the Reqres API which is a fake online REST API used for testing, then assign the error to the errorMessage component property for display and log it to the console. The first example handles errors in the subscribe error callback, and the second uses the catchError operator.

Using the `error` callback to the RxJS `subscribe` method

The subscribe() method is passed an observer object with two callback functions, the next() function is called if the request is successful, the error() function is called if the request fails.

There is also a complete() function that we're not using here, it gets called after an Observable successfully emits its final value, i.e. after the next() function for an HTTP request. In this case it wouldn't be called because the Observable errors out.

ngOnInit() {
    this.http.post<any>('https://reqres.in/invalid-url', { title: 'Angular POST Request Example' }).subscribe({
        next: data => {
            this.postId = data.id;
        },
        error: error => {
            this.errorMessage = error.message;
            console.error('There was an error!', error);
        }
    })
}

Example Angular component at https://stackblitz.com/edit/angular-http-request-error-handling?file=src/app/components/post-request-error-callback.component.ts

Using the RxJS `catchError` operator

The Observable response from the POST request is piped to the catchError operator which handles the error and returns a new Observable that doesn't emit any values.

The function passed to subscribe() is called if the request is successful, it's the equivalent of passing an observer object with only a next() function. It isn't called here because no values are emitted after the error is handled, the Observable simply completes.

RxJS Operators

Operators in RxJS accept an input Observable and return an output Observable, multiple can be piped together in the Observable chain and they are executed before values are emitted to subscribers. With the catchError operator you have the added options of returning a fallback value to subscribers when there is an error, or rethrowing a custom error using the RxJS throwError() function. For more info on RxJS operators see https://rxjs.dev/guide/operators.

ngOnInit() {
    this.http.post<any>('https://reqres.in/invalid-url', { title: 'Angular POST Request Example' })
        .pipe(catchError((error: any, caught: Observable<any>): Observable<any> => {
            this.errorMessage = error.message;
            console.error('There was an error!', error);

            // after handling error, return a new observable 
            // that doesn't emit any values and completes
            return of();
        }))
        .subscribe(data => {
            this.postId = data.id;
        });
}

Example Angular component at https://stackblitz.com/edit/angular-http-request-error-handling?file=src/app/components/post-request-catch-error.component.ts

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Follow me on Twitter at https://twitter.com/jason_watmore
Subscribe on YouTube at https://www.youtube.com/JasonWatmore
Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
Follow me on GitHub at https://github.com/cornflourblue
Feed formats available: RSS, Atom, JSON

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.

Subscribe on YouTube at https://www.youtube.com/TinaAndJason
Follow us on Instagram at https://www.instagram.com/tinaandjason
Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
Visit our website at https://tinaandjason.com.au

Need Some Angular Help?

Search fiverr to find help quickly from experienced Angular developers.

Angular - HTTP Request Error Handling with the HttpClient

How to handle HTTP request errors in Angular