Error thrown by rxjs observer not always sent to ErrorHandler.handleError

[christianacca]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting

Current behavior
Error thrown in an observable is not sent to the ErrorHandler.handleError method when observeOn(Scheduler.asap) is used.

Take the following example that DOES result in an error being sent:

    const ticks$ = Observable.interval(1000).take(10);
    
    this.mapped$ = ticks$.map(value => {
      if (value === 3) {
        throw new Error('oops');
      }
      return { value };
    });

<h4>Mapped ticks from an observable... {{mapped$ | async | json}}</h4>

The following example that does NOT result in an error being sent:

    const ticks$ = Observable.interval(1000).take(10)
      .observeOn(Scheduler.asap);
      
    this.mapped$ = ticks$.map(value => {
      if (value === 3) {
        throw new Error('oops');
      }
      return { value };
    });

Expected behavior

An error thrown by an observer scheduled with Scheduler.asap is sent to ErrorHandler.handleError

Minimal reproduction of the problem with instructions*

I've reproduced the problem in a new angular seed project generated by the latest vs of angular-cli (1.0.0-beta.30).

To run:

• Clone the repo: https://github.com/christianacca/rxjs-err-async-pipe.git
• npm install
• npm start
• browse to http://localhost:4200/

Notice that the error thrown by the map operator is logged to the console, but not sent to DelegatingErrorHandler.handleError (a custom ErrorHandler)

What is the motivation / use case for changing the behavior?

Using observeOn(Scheduler.asap) is a workaround to a problem with rxjs as documented here:

https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93#3114

Please tell us about your environment:

• Windows 10

• Visual Studio code

• Angular version: 2.4.6

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Only tried in Chrome 55.0.2883.87

• Language: [all | TypeScript X.X | ES6/7 | ES5]

TypeScript 2.0.10

[christianacca]

That's what I said I tried to do:

I tried getting a plunker working with all the Rxjs pieces but after an hour I gave up

Here's as far as I got: http://plnkr.co/edit/ldm5hGVjnvacRFpkIRXv?p=preview

It seems the ES2015 import's that I've added for the Rxjs modules are not correct.

Do you have an example plunker that showcases using Rxjs scheduler's with angular?

Thanks

[christianacca]

OK so I have got the plunker working with the correct imports: http://plnkr.co/edit/ldm5hGVjnvacRFpkIRXv?p=preview

And the problem is not reproducible in this.

To try and cut the problem space down, I'll create another git repo with a minimum angular seed project generated by the angular-cli with the same exact same versions of angular as the plunker (2.4.6 vs 2.4.1).

If this reproduces the problem, then there is going to be more material to work on.

[christianacca]

I've reproduced the problem in a new angular seed project generated by the latest vs of angular-cli (1.0.0-beta.30).

See https://github.com/christianacca/rxjs-err-async-pipe

Note: the versions of the dependencies in this new project are identical to the plunker version that does work.

So it appears a problem with Webpack build (via the cli) of angular and it's rxjs dependency.

Reproducing problem

For convenience here is the steps to reproduce the problem with this new project:

• Clone the repo: https://github.com/christianacca/rxjs-err-async-pipe.git
• npm install
• npm start
• browse to http://localhost:4200/

Notice that the error thrown by the map operator is logged to the console, but not to sent to DelegatingErrorHandler.handleError (a custom ErrorHandler)

Remove .observeOn(Scheduler.asap), wait for the browser to refresh, and now you'll see the error alert'ed by DelegatingErrorHandler

[DzmitryShylovich]

@christianacca can you pls update the first post and remove unnecessary comments? A lot of different links, it's hard to understand what actually the problem is. Thx.

[christianacca]

I've updated my original post...

[DzmitryShylovich]

 ngZone.onError.subscribe({next: (error: any) => { exceptionHandler.handleError(error); }});

this is how error handler receives errors. Looks like it's zonejs issue.

[DzmitryShylovich]

Probably will be fixed here ReactiveX/rxjs#2266

There's nothing we can do about it inside angular

[christianacca]

Yeah that was my guess.

[christianacca]

Although if this was the problem, why would the plunker example with the same code work?

[christianacca]

Unfortunately this issue is not closed by PR #15208 - please can you therefore reopen.

I have tested against angular 4.1.0 and still see the exact same behaviour as I originally reported.

To reproduce with angular 4.1.0 please follow the steps outlined here: #14316 (comment)

[christianacca]

More information:

• The problem can be reproduced in angular 4.1.2 + zone.js 0.8.10
• The problem does not occur when the component demonstrating the issue is lazy loaded
  • to see this for yourself, checkout the lazy-load branch I've created in the same sample repo: https://github.com/christianacca/rxjs-err-async-pipe
  • in this branch you will observe the correct expected behaviour:

An error thrown by an observer scheduled with Scheduler.asap is sent to ErrorHandler.handleError

[ccrowhurstram]

FYI, the problem can be reproduced in angular 4.3.2 + zone.js 0.8.16.

This is surprising given that this version of zone.js lands angular/zone.js#843 that was hoping to resolve this problem...

Notes:

• feat(rxjs): fix #830, monkey patch rxjs to make rxjs run in correct zone zone.js#843 is a replacement for feat(Zone): add support for Zone.js ReactiveX/rxjs#2266
• To reproduce with angular 4.3.2 please follow the steps outlined here: Error thrown by rxjs observer not always sent to ErrorHandler.handleError #14316 (comment)

[JiaLiPassion]

@ccrowhurstram , thank you for posting the issue, current angular/zone.js#843 patch doesn't fully fix your issue, I have made a new PR (angular/zone.js#884) to fix this one, I have test my idea and it should work.

[ccrowhurstram]

Excellent @JiaLiPassion.

Thanks for digging into this - saves me from having to spam this issue with each angular release ;-)

[bryanrideshark]

@ccrowhurstram, you aren't the only one hitting this - Glad to see that it's getting looked at!

[JiaLiPassion]

please wait for the next release of zone.js, and I will post how to load the new rxjs patch.

[JiaLiPassion]

@ccrowhurstram , the new zone.js have been released, and I test it with your repo, it worked!

to load the patch,

• npm install zone.js@0.8.17
• add import 'zone.js/dist/zone-patch-rxjs'; into your app.module.ts

[christianacca]

Brilliant @JiaLiPassion :-)

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}