How to trap errors from chained rxjs observables when using combineLatest?

Question

Following on from this post, I have the following

Observable.combineLatest(
        this.translate.get("key1"),
        this.translate.get(""),
        this.translate.get("key3"),
        this.translate.get("key4")
    )
    .subscribe(([result1, result2, result3, result4]) => {
        console.log(result1);
        console.log(result2);
        console.log(result3);
        console.log(result4);
    },
      error => {
        console.log(`${error}`);            
   });

At line 2 I get an error, but this does not seem to go into the error handler above. Unfortunately the examples and doco I find don't seem to include how to catch errors (assume the above would work).

Does anyone have any ideas on how to do this?

cartant · Accepted Answer · 2017-01-20 04:25:14Z

1

It seems likely to me that this.translate.get("") is validating an argument and is throwing 'outside' of the observable (i.e. before it even creates its observable).

You can verify the error handling using code like this:

import "rxjs/add/observable/throw";

Observable.combineLatest(
  this.translate.get("key1"),
  Observable.throw(new Error("Boom!")),
  this.translate.get("key3"),
  this.translate.get("key4")
)
.subscribe(
  ([result1, result2, result3, result4]) => {
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);
  },
  error => {
    console.log(`${error}`);
  }
);

And you can verify that this.translate.get("") is throwing the error 'outside' of the observable like this:

import "rxjs/add/observable/defer";

Observable.combineLatest(
  this.translate.get("key1"),
  Observable.defer(() => this.translate.get("")),
  this.translate.get("key3"),
  this.translate.get("key4")
)
.subscribe(
  ([result1, result2, result3, result4]) => {
    console.log(result1);
    console.log(result2);
    console.log(result3);
    console.log(result4);
  },
  error => {
    console.log(`${error}`);
  }
);

If this is what it is doing, I guess it's reasonable behaviour, as it's rather unlikely an empty key is valid. Errors that are more 'internal' are likely to be reported via the observable and should be handled by the error callback you've passed to subscribe.

edited Jan 20, 2017 at 4:25

answered Jan 20, 2017 at 4:17

cartant

58.6k17 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

peterc Over a year ago

Ok I see. I tried adding a normal (non rxjs related) try/catch block around the whole lot, and the error did enter the catch. So I assume this is all we can do here.

cartant Over a year ago

You could have a look at the source to make sure that's what's happening, but if the error is not thrown via the observable that's that and there's nothing you can do about it - apart from make sure you pass in valid keys.

peterc Over a year ago

That is a good idea (look at the source). Yes, indeed at the very top it throws an error if the key is not defined or has zero length. Also I found another method instant() (I didn't know about this one) that just returns the string - in the doco it just) explains need to be sure the async file load has completed if you use this one.

Collectives™ on Stack Overflow

How to trap errors from chained rxjs observables when using combineLatest?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related