let’s make something together

Give us a call or drop by anytime, we endeavour to answer all enquiries within 24 hours on business days.

Find us

PO Box 16122 Collins Street West
Victoria 8007 Australia

Email us


Phone support

Phone: + (066) 0760 0260
+ (057) 0760 0560

RxJS: Error Handling With forkJoin

  • By Jaya Surya
  • January 8, 2020

When you are working in RxJS, one of the most difficult tasks in asynchronous programming is dealing with error handling. The easiest way to trap errors in RxJS is to add an error call back in the subscribe call.

Error Handling With forkJoin

forkJoin is an operator that is best for use. If you are having issues in handling multiple requests on page load or want to move to action when all the responses are received. You can easily group the observables and emit the final value for each error.
The forkJoin is one of the RxJS operators to import { forkJoin } from ‘rxjs’. It allows us to take multiple Observables and execute them in parallel. It executes each Observable once completed or waits until the last input observable completes a value. The forkJoin will emit the all resolved Observable like single Observable value containing list.
The RxJS is a reactive JavaScript extension, it has a handful of an operator with different categories.

ForkJoinOperator() {
const obser1$ = this.http.get('https://jsonplaceholder.typicode.com/todos/1');
const obser2$ = this.http.get('https://jsonplaceholder.typicode.com/todos');
const obser3$ = this.http.get('https://jsonplaceholder.typicode.com/todos/f');
forkJoin([obser1$, obser2$, obser3$]).subscribe(
(res) => console.log(res),
(error) => console.log(error)

Above, we have the Observable obser1$, obser2$, obser3$. We have to combine these observable by using ‘forkJoin’ that will execute in parallel in GET data from the backend. Before that, we have to choose an operator to avoid crashing in applications.
The forkJoin will subscribe to the passed observables, by making the HTTP GET requests. If any input observable errors at some point, forkJoin will find the error as well and all other observables will be immediately unsubscribed.
Ensure that you are aware of the observable returns subscribed. If you have already used forkJoin before, some might have done error handling each observable separately but, now all you can use any one GET request. If it fails you can unsubscribe all the other observables.

forkJoinOperator() {
const obser1$ = this.http.get('https://jsonplaceholder.typicode.com/todos/1').pipe(
catchError(error => of(error))
const obser2$ = this.http.get('https://jsonplaceholder.typicode.com/todos').pipe(
catchError(error => of(error))
const obser3$ = this.http.get('https://jsonplaceholder.typicode.com/todos/f').pipe(
catchError(error => of(error))
forkJoin([obser1$, obser2$, obser3$]).subscribe(
(res) => console.log(res),
(error) => console.log(error)

Like this way, once error$ throws an error, it’ll be handled internally and a new value will be returned to the other observable. You can map the error into any other value as shown in the inner object data.
Now, if you check the console, it’ll show an array containing two observe the objects and a string, with an error object that will print the error state.
Error handling RxJS
This happens when two observables are handled by forkJoin.subscribe(res => {}) because forkJoin doesn’t know there was an error. But error state will be matched as forkJoin.subscribe(error => {}).
I hope this mini-tutorial on error handling with forkJoin in RxJS was useful. If you have any doubts or suggestions regarding this tutorial, comment them below we will back to you.
Like what your reading? Interested in reading more about JavaScript frameworks? Take a peek at our latest blogs!
Make better decisions on developing a web application for your business! Hire Javascript developers at Agira. Need an intuitive plan for your application? Reach our JavaScript experts for your quote today.

Turn your vision to magnificent reality With
Our Web and Mobile Solutions