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

Mischievous

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. – Diseur

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

Beatrice

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

Did you import catch? – Beatrice

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

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

You shouldn't need a map, just a catchError – Humiliate

Answer 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

Musicianship

Answer 3

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.

Mohr

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

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

Answer 4

Since forkJoin returns an observable, you can use the pipe operator on the result along with catchError:

Observable.forkJoin(
  this.http.post<any[]>(URL, jsonBody1, postJson).map((res) => res),
  this.http.post<any[]>(URL, jsonBody2, postJson).map((res) => res)
)
.pipe(
  catchError(error => {
    // handle error
    throw error;
  })
)
.subscribe(res => this.handleResponse(res))

In this case, the catchError callback will be triggered if at least one of the requests failed.

Duration