Leandro Lima Leandro Lima -3 years ago 113
TypeScript Question

How do I catch an error at two different points in RxJS/Angular?

Suppose this Angular 2 snippet:

export class ApiService {
// do stuff
request(...): Observable<Response> {
return this.http.request(...)
.share()
.catch((error: any) => {
let errMsg = 'my error';
// do more stuff...
// tried: throw errMsg;
// tried: return Observable.throw(errMsg);
});
}
}


Then:

api.request(...).catch(() => {
console.log('caught');
return Observable.from([]);
}).subscribe({
console.log('everything fine');
});


The
next
callback passed to
subscribe
does get called just fine when the request succeeds, but the callback passed to
catch
doesn't.

I've trying do deal with the error in two different parts of the code that have different responsibilities. I'd like that the error message thrown at the
ApiService.request
would end up in the second callback so I could further refine my response to the user. I've tried both
throw errMsg
and returning
Observable.throw(errMsg)
.

The reason why I'm using
.share()
for the observable is because I don't want the http client to be generating one request per subscriber.

Where am I getting this wrong?

EDIT:

My example above didn't really capture the problem I was having. This second snippet allows for the reproduction of it:

const a = Rx.Observable.create(function(observer){
observer.error('h');
}).share().catch(err=> {
console.error('first place',err);
throw 'err'
})
.subscribe(() => null)
.subscribe(console.log, console.error);


The first subscribe was failing to catch the error (by not having an error handler defined) and breaking the chain to the second subscriber.

Answer Source

From what I understood you want to catch the error in two places . As per docs you need to use throw . I tried and its working fine for me . Here is the code snippet :

const a = Rx.Observable.create(function(observer){
    observer.error('h');
});

a.catch(err=> {
   console.error('first place',err);
   throw 'err'
}).subscribe(console.log,console.error);

Output

x first place 
x err 

JSBin : https://jsbin.com/jefalazibo/edit?html,js,console

In the component code you dont need to write another catch . subscribe takes three functions as arguments

 subscribe(onSuccess, onError, onComplete);

Documentation : https://github.com/ReactiveX/rxjs/blob/master/src/operator/catch.ts ( check example 3 )

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download