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))

Solution 1

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) .map((res) => res)).catch(e => Observable.of('Oops!')),
  this.http.post<any[]>(URL, jsonBody2, postJson) .map((res) => res)).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(map((res) => res), catchError(e => of('Oops!'))),
  this.http.post<any[]>(URL, jsonBody2, postJson) .pipe(map((res) => res), catchError(e => of('Oops!')))
)
  .subscribe(res => this.handleResponse(res))

Solution 2

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

Comments

[a better oliver]

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.

[matchifang]

I got an error saying that http.post().map().catch() is not a function

[siva636]

Did you import catch?

[Janith Widarshana]

@matchifang I just can resolve that using pipe tis way http.post().pipe(map().catch())

[epinal]

Do we really need the map here? I mean is it mandatory for the catchError or just an example of the pipe?

[Yuri]

You shouldn't need a map, just a catchError

[giovannipds]

Should have mentioned catchError to avoid losing all the chain if any error occurs.

[Anis Benna]

I my case, I wanted to break the chain therefore this does it for me.