forkJoin: handle errors

Probably a catchError is not enough!

4 snippets

11 mins

v.7

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

In this lesson we will see how to handle errors in a forkJoin when only one of the calls fails.

What to do in that case?

Should we not display anything and show an error message?
Or do we just show the data of the call that was successful and handle the error only of the one that failed?

There is no better solution than the other but it depends on our needs. However, imagine a page that has to display data from N sources. If one of these fails we want the page to show nothing or not display data only from the endpoint that failed?

I usually prefer the second option.

# Working Example

Let’s start with a working example where:

We use forkJoin to make two server calls

We create a signal that will contain the result of the forkJoin operation that will hold an array of User and an array of Post

app.component.ts

user.ts

post.ts

main.ts

src/app.component.ts

Output

# Error

If even one of the endpoints returns an error, the entire Observable generated by forkJoin will generate an error notification. Then the observer’s error notification will be invoked and we won’t see any result on the screen:

app.component.ts

user.ts

post.ts

main.ts

src/app.component.ts

Output

# Handle Error with `catchError`

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

forkJoin: handle errors

Probably a catchError is not enough!

4 snippets

11 mins

v.7

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

In this lesson we will see how to handle errors in a forkJoin when only one of the calls fails.

What to do in that case?

Should we not display anything and show an error message?
Or do we just show the data of the call that was successful and handle the error only of the one that failed?

I usually prefer the second option.

# Working Example

Let’s start with a working example where:

We use forkJoin to make two server calls

We create a signal that will contain the result of the forkJoin operation that will hold an array of User and an array of Post

app.component.ts

user.ts

post.ts

main.ts

src/app.component.ts

Output

# Error

app.component.ts

user.ts

post.ts

main.ts

src/app.component.ts

Output

# Handle Error with `catchError`

# Handle Errors with multiple `catchError`

# 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?

You might think that using a catchError to handle forkJoin errors may be a good solution. Although it might work under some circumstances, it is not the solution I would use in this case.

In fact if one or both of the Http requests fail, the catchError will intercept the error but the only thing we can do is create a new observable that emits a default value: for example an object with the same structure emitted by forkJoin but with empty arrays. This is what we do in the next script:

app.component.ts

user.ts

post.ts

main.ts

src/app.component.ts

RxJS Cookbook

Send your feedback

RxJS Cookbook

# Introduction

# Working Example

Output

# Error

Output

# Handle Error with `catchError`

Send your feedback

# Introduction

# Working Example

Output

# Error

Output

# Handle Error with `catchError`

# Handle Errors with multiple `catchError`

# Cheatsheet PDF

RxJS Cookbook

Send your feedback

RxJS Cookbook

# Introduction

# Working Example

Output

# Error

Output

# Handle Error with catchError

Send your feedback

# Introduction

# Working Example

Output

# Error

Output

# Handle Error with catchError

# Handle Errors with multiple catchError

# Cheatsheet PDF

# Handle Error with `catchError`

# Handle Error with `catchError`

# Handle Errors with multiple `catchError`