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.