RxJS catchError() Error Handling Operator

by Online Tutorials Library July 22, 2022

RxJS catchError() Error Handling Operator

RxJS catchError() operator is an error-handling operator used to handle and take care of catching errors on the source observable by returning a new observable or an error.

In other words, we can say that the RxJS catchError() operator catches errors on the observable and gracefully handles errors in an observable sequence. It handles the errors by returning a new observable or throwing an error.

Syntax:

Following is the syntax of the RxJS catchError() error handling operator:

  catchError<T, O extends ObservableInput<any>>(selector: (err: any, caught: Observable<T>) => O): OperatorFunction<T, T | ObservedValueOf<O>>  

Parameter Explanation

selector_funct: The selector func takes two arguments, err, the error function, and caught, which is the source observable.
selector: It specifies a function that takes as arguments err, which is the error, and caught, which is the source observable. In the case, you’d like to “retry” that observable by returning it. Whatever observable is returned by the selector will be used to continue the observable chain.

Return value

The RxJS catchError() operator returns an observable that originates from either the source or the observable returned by the catch selector function or selector_func.

Let us see some examples of the RxJS catchError() operator to understand it clearly.

Example 1 (Catching error from observable)

  import { throwError, of } from ‘rxjs’;  import { catchError } from ‘rxjs/operators’;  //emit error  const source = throwError(‘There is an error!’);  //gracefully handle error, returning observable with error message  const example = source.pipe(catchError(val => of(`Alert: ${val}`)));  const subscribe = example.subscribe(val => console.log(val));  

Output:

After executing the above example, you will see the following result:

Example 1 (Observable when there is an error)

  import { of } from ‘rxjs’;  import { map, filter, catchError } from ‘rxjs/operators’;  let all_nums = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13);  let final_val = all_nums.pipe(     map(el => {        if (el === 8) {           throw new Error(“Testing catchError.”);        }        return el;     }),     catchError(err => {        console.error(err.message);        return of(“From catchError”);     })  );  final_val.subscribe(     x => console.log(x),     err => console.error(err),     () => console.log(“Task is Completed now.”)  );  

Output:

After executing the above example, you will see the following result:

Example 2

  import { of } from ‘rxjs’;  import { map, catchError } from ‘rxjs/operators’;  of(1, 2, 3, 4, 5).pipe(      map(n => {       if (n === 4) {         throw ‘four!’;        }       return n;      }),      catchError(err => of(‘I’, ‘II’, ‘III’, ‘IV’, ‘V’)),    )    .subscribe(x => console.log(x));  

Output:

After executing the above example, you will see the following result:

Example 3 (Catching rejected promise)

  import { timer, from, of } from ‘rxjs’;  import { mergeMap, catchError } from ‘rxjs/operators’;  //create promise that immediately rejects  const myBadPromise = () =>    new Promise((resolve, reject) => reject(‘Rejected!’));  //emit single value after 1 second  const source = timer(1000);  //catch rejected promise, returning observable containing error message  const example = source.pipe(    mergeMap(_ =>      from(myBadPromise()).pipe(catchError(error => of(`This is Bad Promise: ${error}`)))    )  );  const subscribe = example.subscribe(val => console.log(val));  

Output:

After executing the above example, you will see the following result:

Next TopicRxJS Operators

RxJS catchError() Error Handling Operator

RxJS catchError() Error Handling Operator

Syntax:

Parameter Explanation

Return value

Example 1 (Catching error from observable)

Example 1 (Observable when there is an error)

Example 2

Example 3 (Catching rejected promise)

torch.nn in PyTorch

Akka Actor Life Cycle

You may also like