Clever Geek Handbook

Why doesn't rxjs pass my Observable.throw to subscribers?

I have the following code in a service that creates an observable from an Http request.

  const httpObservable = this.http.post(url, JSON.stringify(request))
    .map((res: Response) => res.json())
    .catch((error, caught) => {
      console.log('There was an API error for ' + url);
      console.log('Rethrowing');
      return Observable.throw(error);
    });
  return httpObservable;

There is no server in the specified url and the block is executed catch

. As you can see, the handler catch

returns Observable.throw(error)

which should (as far as I understand) be caught in the next block that uses the above function.

const request = new Api.ThemeInfoGetQuery();
console.log('Sending request');
this.response = this.apiService.request(Api.ThemeInfoGetQuery.url, request);
console.log('Setting catch');
this.response.catch((err: any, caught: Observable<Api.ThemeInfoGetResponse>) => {
  console.log('The rethrown error was detected');
  return Observable.throw(err);
});
this.response.subscribe(x => {
  console.log('There was no error');
});

This is the result I expect to see in the console.

  • Sending request
  • Catch setup
  • API error
  • Re-ejection
  • A logged error was found

But I only see step 4. Can anyone suggest that I might try to enforce the subscriber .catch

?

Sending request
load-theme.resolver.ts:31 Setting catch
zone.js:2177 OPTIONS http://localhost:5000/api/theme/get-theme net::ERR_CONNECTION_REFUSED
scheduleTask @ zone.js:2177
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:384
onScheduleTask @ zone.js:274
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:378
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:209
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:232
(anonymous) @ zone.js:2201
send @ VM5471:3
(anonymous) @ http.es5.js?9c1c:1275
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:171
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:159
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/do.js.DoOperator.call @ do.js?d062:63
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/delay.js.DelayOperator.call @ delay.js?1cee:63
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/catch.js.CatchOperator.call @ catch.js?0239:79
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/finally.js.FinallyOperator.call @ finally.js?667f:26
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../../src/app/tru-control/resolvers/load-theme.resolver.ts.LoadThemeResolver.resolveBrand @ load-theme.resolver.ts:37
LoadThemeResolver @ load-theme.resolver.ts:19
_createClass @ core.es5.js:9518
_createProviderInstance$1 @ core.es5.js:9486
resolveNgModuleDep @ core.es5.js:9471
webpackJsonp.../../../core/@angular/core.es5.js.NgModuleRef_.get @ core.es5.js:10557
webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.getToken @ router.es5.js?1fca:4566
webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.getResolver @ router.es5.js?1fca:4554
webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.resolveNode @ router.es5.js?1fca:4534
webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.runResolve @ router.es5.js?1fca:4515
(anonymous) @ router.es5.js?1fca:4282
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js?a3bf:120
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js?a3bf:110
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/observable/ArrayObservable.js.ArrayObservable._subscribe @ ArrayObservable.js:114
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:171
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:159
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/reduce.js.ReduceOperator.call @ reduce.js?4c7d:74
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
subscribeToResult @ subscribeToResult.js:22
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js?a3bf:130
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js?a3bf:127
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js?a3bf:110
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber.notifyNext @ mergeMap.js?a3bf:143
webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next @ InnerSubscriber.js:23
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next @ map.js:83
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber.notifyNext @ mergeMap.js?a3bf:143
webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next @ InnerSubscriber.js:23
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/every.js.EverySubscriber.notifyComplete @ every.js?5a03:53
webpackJsonp.../../../../rxjs/operator/every.js.EverySubscriber._complete @ every.js?5a03:70
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.complete @ Subscriber.js:114
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._complete @ mergeMap.js?a3bf:135
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.complete @ Subscriber.js:114
webpackJsonp.../../../../rxjs/observable/ArrayObservable.js.ArrayObservable._subscribe @ ArrayObservable.js:116
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:171
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:159
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/every.js.EveryOperator.call @ every.js?5a03:33
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
subscribeToResult @ subscribeToResult.js:22
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js?a3bf:130
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js?a3bf:127
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js?a3bf:110
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/every.js.EverySubscriber.notifyComplete @ every.js?5a03:53
webpackJsonp.../../../../rxjs/operator/every.js.EverySubscriber._complete @ every.js?5a03:70
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.complete @ Subscriber.js:114
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._complete @ mergeMap.js?a3bf:135
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.complete @ Subscriber.js:114
webpackJsonp.../../../../rxjs/observable/ArrayObservable.js.ArrayObservable._subscribe @ ArrayObservable.js:116
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:171
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:159
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/every.js.EveryOperator.call @ every.js?5a03:33
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
subscribeToResult @ subscribeToResult.js:22
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js?a3bf:130
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js?a3bf:127
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js?a3bf:110
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next @ map.js:83
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber.notifyNext @ mergeMap.js?a3bf:143
webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next @ InnerSubscriber.js:23
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next @ map.js:83
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:49
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:171
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:159
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
subscribeToResult @ subscribeToResult.js:22
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js?a3bf:130
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js?a3bf:127
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js?a3bf:110
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber.notifyNext @ mergeMap.js?a3bf:143
webpackJsonp.../../../../rxjs/InnerSubscriber.js.InnerSubscriber._next @ InnerSubscriber.js:23
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next @ map.js:83
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:49
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:171
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:159
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
subscribeToResult @ subscribeToResult.js:22
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js?a3bf:130
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js?a3bf:127
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js?a3bf:110
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next @ map.js:83
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next @ map.js:83
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next @ map.js:83
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89
webpackJsonp.../../../../rxjs/operator/last.js.LastSubscriber._complete @ last.js?576b:110
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.complete @ Subscriber.js:114
webpackJsonp.../../../../rxjs/operator/mergeAll.js.MergeAllSubscriber._complete @ mergeAll.js:94
webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.complete @ Subscriber.js:114
webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:51
webpackJsonp.../../../../rxjs/Observable.js.Observable._trySubscribe @ Observable.js:171
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:159
webpackJsonp.../../../../rxjs/operator/mergeAll.js.MergeAllOperator.call @ mergeAll.js:63
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/last.js.LastOperator.call @ last.js?576b:39
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/catch.js.CatchOperator.call @ catch.js?0239:79
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/mergeMap.js.MergeMapOperator.call @ mergeMap.js?a3bf:85
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
webpackJsonp.../../../../rxjs/operator/map.js.MapOperator.call @ map.js:54
webpackJsonp.../../../../rxjs/Observable.js.Observable.subscribe @ Observable.js:156
(anonymous) @ Observable.js:203
ZoneAwarePromise @ zone.js:776
webpackJsonp.../../../../rxjs/Observable.js.Observable.forEach @ Observable.js:199
(anonymous) @ router.es5.js?1fca:4148
ZoneAwarePromise @ zone.js:776
webpackJsonp.../../../router/@angular/router.es5.js.Router.runNavigate @ router.es5.js?1fca:4073
(anonymous) @ router.es5.js?1fca:4040
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:365
onInvoke @ core.es5.js:3890
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:364
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:125
(anonymous) @ zone.js:760
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:398
onInvokeTask @ core.es5.js:3881
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:397
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:165
drainMicroTaskQueue @ zone.js:593
api.service.ts?c446:92 There was an API error for http://localhost:5000/api/theme/get-theme
api.service.ts?c446:100 Rethrowing
core.es5.js:1020 ERROR Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}headers: Headersok: falsestatus: 0statusText: ""type: 3url: null_body: ProgressEventbubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: XMLHttpRequestdefaultPrevented: falseeventPhase: 0isTrusted: truelengthComputable: falseloaded: 0path: Array(0)returnValue: truesrcElement: XMLHttpRequesttarget: XMLHttpRequesttimeStamp: 5433.305total: 0type: "error"__proto__: ProgressEvent__proto__: Body
+3


source to share


3 answers


catch

is an RxJS operator and as such returns an observable - which you ignore. It is the returned observable that is being applied catch

, not the observable that is being called catch

.

For your effect to catch

have an effect, you will need to use the returned observable, for example:



this.response = this.response.catch((err, caught) => {
  console.log('The rethrown error was detected');
  return Observable.throw(err);
});
+1


source


You can add a new error to the catch:

.catch(err => {
    this.error = "Error: " + err.status
    throw new Error('Got a 404')
})

and this will stream it, which can then be caught again:

.subscribe(
  result => console.log(result),
  err => {
    console.log('subscribe error')
  });

Live plunker example



You can also do it with a help Observable.throw()

similar to the one you have in the question

.catch(err => {
  console.log('Error: ', err)
  return Observable.throw('new error')
})
.subscribe(
  result => console.log(result));

As @cartant mentioned in his answer : you are not using the observable that is returned, another option instead of assigning the response to the result .catch

is to directly subscribe to the result as shown above.

Updated plunker with both methods .

0


source 


this.response.subscribe(
  x => {
    console.log('There was no error');
  }
  err => {
    console.log('There was error', err);
  }
);
0


source






More articles:


All Articles