Handle errors with catchError

4 snippets

12 mins

v.7

v.18

Fabio Biondi

Google Expert | Angular

# HttpClient and Signal

Let’s start with a simple example where we make a call to the server to retrieve a list of users and display them in the template:

app.component.ts

user.ts

main.ts

src/app.component.ts

We can also use toSignal or async pipe as we saw in previous lessons

# Errors

But what happens if there are errors?

If the endpoint returns an error (and we simulate it by entering a wrong endpoint) we will encounter an unhandled error that will not be handled in any way. We will not have any notification and we will not be able to handle it in any way:

app.component.ts

user.ts

main.ts

src/app.component.ts

Output

# Handling Errors with an Observer

Let's explore two ways to handle errors in the given script: one with an observer (using next, error, and complete methods) and another using RxJS's catchError operator.

Let's start with the first one, using observer. In this approach, you manually subscribe to the observable and pass an observer object with methods to handle next, error, and complete scenarios.

This approach allows for error management. For example, we can set a signal to indicate that an error has occurred and then display an appropriate message in the template:

app.component.ts

user.ts

main.ts

src/app.component.ts

How it works

next: This is triggered when the HTTP request successfully returns user data. You handle the emitted value (users) here.
error: This is triggered if the HTTP request fails (e.g., network issues, server errors), allowing you to handle the error case.
complete: This is called when the observable completes its emission, meaning no more values will be emitted.

# Handling Errors with `catchError` Operator

# Cheatsheet PDF

Unblock the content

It's completely free!

Don’t have an account yet?

Forgot password?

Or did you not receive
the CONFIRMATION email?

New

Membership Plan, italian only!

Accedi a TUTTI I CORSI PREMIUM ad un unico prezzo!

RxJS Cookbook

Send your feedback

RxJS Cookbook

Send your feedback

# HttpClient and Signal

# Errors

Output

# Handling Errors with an Observer

How it works

# Handling Errors with `catchError` Operator

# Cheatsheet PDF

RxJS Cookbook

Send your feedback

RxJS Cookbook

Send your feedback

# HttpClient and Signal

# Errors

Output

# Handling Errors with an Observer

How it works

# Handling Errors with catchError Operator

# Cheatsheet PDF

# Handling Errors with `catchError` Operator