[RxJS] Error Handling in RxJS

Posted 2020-06-23 Answer1215

Get your code back on the happy path! This lesson covers a variety of ways to handle exceptions thrown by Observables in RxJS. Operators covered are: catch, onErrorResumeNext, retry and retryWhen.

 

We have the code which throw error when hit 3. This error is catched in error block, so it not go to complete block, but image that we might have some side-effect to handle in complete block instead of just simple log.

Observable.of(1,2,3,4)
  .map(x => {
    if(x === 3) {
      throw ‘I hate threes‘;
    }
    return x;
  })
  .subscribe(
    x => console.log(x),
    err => console.error("err: " + err),
    () => console.info(‘done‘)
  );

/*
1
2
"err: I hate threes"
*/

 

So we need to handle the error and let the code go to the complete block: -- by catch(): 

Observable.of(1,2,3,4)
  .map(x => {
    if(x === 3) {
      throw ‘I hate threes‘;
    }
    return x;
  })
  .catch( err => Observable.just(‘catch: ‘ + err))
  .subscribe(
    x => console.log(x),
    err => console.error("err: " + err),
    () => console.info(‘done‘)
  );

/*
1
2
"catch: I hate threes"
"done"
*/

Now the code goes to the complete block and we handle the error by using catch instead of error block. 

 

If we catch the error and still want error block to handle it we can use throw() instead od just():

Observable.throw(‘catch: ‘ + err)

 

---------------------

And we use catch(), but we didn‘t do anything about the error, so if you don‘t need to handle the error, just throw it, you can use onErrorResumeNext() function.

Observable.of(1,2,3,4)
  .map(x => {
    if(x === 3) {
      throw ‘I hate threes‘;
    }
    return x;
  })
  .onErrorResumeNext(Observable.just(‘There is an error!‘))
  .subscribe(
    x => console.log(x),
    err => console.error("err: " + err),
    () => console.info(‘done‘)
  );

/*
1
2
"There is an error!"
"done"
*/

 

-----------------------------------

Retry(numberofTimes): it will retry number of time before it goes to error. 

 

var { Observable } = Rx;
var bad = Observable.throw(‘go bad‘);
var good = Observable.just(‘go ahead!‘);

Observable.of(1,2,3,4)
  .map(x => {
    if(x === 3) {
      throw ‘I hate threes‘;
    }
    return x;
  })
  .retry(3)
  .subscribe(
    x => console.log(x),
    err => console.error(err),
    () => console.info(‘done‘)
  );

/*
1
2
1
2
1
2
"I hate threes"

*/

 

 ----------------------------

retryWhen(observe): Retry after delay:

Observable.of(1,2,3,4)
  .map(x => {
    if(x === 3) {
      throw ‘I hate threes‘;
    }
    return x;
  })
  .retryWhen( errs => errs.delay(1000).take(3))
  .subscribe(
    x => console.log(x),
    err => console.error(err),
    () => console.info(‘done‘)
  );

/*
1
2
1
2
1
2
1
2
"done"
*/

This it goes to done, because the retryWhen run successfully, so we can concat and error to make it goes to error block:

Observable.of(1,2,3,4)
  .map(x => {
    if(x === 3) {
      throw ‘I hate threes‘;
    }
    return x;
  })
  .retryWhen( errs => errs.delay(1000).take(3)
              .concat(Observable.throw("Go error")))
  .subscribe(
    x => console.log(x),
    err => console.error(err),
    () => console.info(‘done‘)
  );

/*
1
2
1
2
1
2
1
2
"Go error"
*/