How to catch error in Observable.forkJoin(...)?

Question

I use Observable.forkJoin() to handle the response after both HTTP calls finishes, but if either one of them returns an error, how can I catch that error?

Observable.forkJoin(
  this.http.post<any[]>(URL, jsonBody1, postJson) .map((res) => res),
  this.http.post<any[]>(URL, jsonBody2, postJson) .map((res) => res)
)
.subscribe(res => this.handleResponse(res))

That depends on what you want to achieve. If one of the calls fails, then the whole observable fails and you can handle it in your subscriber. — a better oliver, Jun 29 '18 at 15:18

score 61 · Answer 1 · edited Dec 21 '22 at 12:28

61

You may catch the error in each of your observables that are being passed to forkJoin:

// Imports that support chaining of operators in older versions of RxJS
import {Observable} from 'rxjs/Observable';
import {forkJoin} from 'rxjs/add/observable/forkJoin';
import {of} from 'rxjs/add/observable/of';
import {map} from 'rxjs/add/operator/map';
import {catch} from 'rxjs/add/operator/catch';

// Code with chaining operators in older versions of RxJS
Observable.forkJoin(
  this.http.post<any[]>(URL, jsonBody1, postJson).catch(e => Observable.of('Oops!')),
  this.http.post<any[]>(URL, jsonBody2, postJson).catch(e => Observable.of('Oops!'))
)
.subscribe(res => this.handleResponse(res))

Also note that if you use RxJS6, you need to use catchError instead of catch, and pipe operators instead of chaining.

// Imports in RxJS6
import {forkJoin, of} from 'rxjs';
import {map, catchError} from 'rxjs/operators';

// Code with pipeable operators in RxJS6
forkJoin(
  this.http.post<any[]>(URL, jsonBody1, postJson).pipe(catchError(e => of('Oops!'))),
  this.http.post<any[]>(URL, jsonBody2, postJson).pipe(catchError(e => of('Oops!')))
)
  .subscribe(res => this.handleResponse(res))

edited Dec 21 '22 at 12:28

rajniszp

150
7

answered Jun 29 '18 at 14:22

siva636

16,109
23
97
135

1

I got an error saying that `http.post().map().catch()` is not a function – matchifang Jun 29 '18 at 14:34
Did you import catch? – siva636 Jun 29 '18 at 14:35
@matchifang I just can resolve that using pipe tis way `http.post().pipe(map().catch())` – Janith Widarshana Oct 17 '18 at 10:15
1

Do we really need the `map` here? I mean is it mandatory for the `catchError` or just an example of the `pipe`? – epinal Feb 06 '19 at 16:47
4

You shouldn't need a `map`, just a `catchError` – Yuri Feb 13 '20 at 08:35

Washington Braga · Answer 2 · 2021-02-11T13:58:47.090

15

This worked for me:

forkJoin(
 this.http.post<any[]>(URL, jsonBody1, postJson).pipe(catchError(error => of(error))),
 this.http.post<any[]>(URL, jsonBody2, postJson)
)
.subscribe(res => this.handleResponse(res))

The second HTTP call will be called normally, even if an error occurs on the first call

edited Feb 11 '21 at 13:58

answered Jan 07 '19 at 17:29

Washington Braga

1,593
15
14

score 1 · Answer 3 · answered Nov 05 '20 at 11:00

1

Have you tried something between these lines?

const todo1$ = this.myService.getTodo(1);
const error$ = this.myService.getTodo(201);
const todo2$ = this.myService.getTodo(2);
forkJoin([todo1$, error$, todo2$])
  .subscribe(
    next => console.log(next),
    error => console.log(error)
  );

Keep in mind that If any input observable errors at some point, forkJoin will error as well and all other observables will be immediately unsubscribed.

answered Nov 05 '20 at 11:00

Paschalidis Christos

432
4
13

2

Should have mentioned `catchError` to avoid losing all the chain if any error occurs. – giovannipds Dec 24 '20 at 23:12
I my case, I wanted to break the chain therefore this does it for me. – usersina Nov 11 '21 at 08:34

How to catch error in Observable.forkJoin(...)?

3 Answers3

Linked