Search code examples
error-handlingangularrxjs

Error handling with Angular2 async pipe

I am using the Angular2 async pipe to stream values into the DOM. Here's a real simple example:

const stream = Observable.interval(1000)
  .take(5)
  .map(n => { if (n === 3) throw "ERROR"; return n; });

<div *ngFor="for num of stream | async">
  {{num}}
</div>

<div id="error"></div>

What I would like to do is to have the sequence of 1-5 displayed, but on the error item (3), somehow populate the #error div with the error message.

This seems to require two things: first is the ability of the Angular async pipe to do something intelligent with errors, which I see no sign of. Looking at the source code, apparently it throws a JS exception, which doesn't seem too friendly.

Second is the ability to restart or continue the sequence after the error. I have read about catch and onErrorResumeNext and so on, but they all involve another sequence which will be switched to on an error. This greatly complicates the logic of generating the stream, on which I would just like to put a series of numbers (in this simple example). I have the sinking feeling that once an error occurs the game is over and the observable is completed and can only be "restarted" with a different observable. I'm still learning observables; is this in fact the case?

So my question is twofold:

  1. Can Angular2's async pipe do something intelligent with errors?
  2. Do observables have some simple way to continue after an error?
Solution

  • Yes you're right regarding the catch operator and the ability to do something after errors occur...

    I would leverage the catch operator to catch the error and do something:

    const stream = Observable.interval(1000)
  .take(5)
  .map(n => {
    if (n === 3) {
      throw Observable.throw(n);
    }
    return n;
  })
  .catch(err => {
    this.error = error;
    (...)
  });

    and in the template:

    <div>{{error}}</div>

    To be able to go on the initial observable, you need to create a new one starting at the point where the error occurs:

    createObservable(i) {
  return Observable.interval(1000)
    .range(i + 1, 5 - i)
    .take(5 - i)
  });
}

    and use it in the catch callback:

      .catch(err => {
    this.error = error;
    return this.createObservable(err);
  });

    These two questions could help you: