Change detection stops working after uncaught exception occurs during the binding evaluation in prod mode

[borisvasilenko]

I'm submitting a ...

[X] bug report
[ ] feature request

Current behavior

In prod mode, change detection stops working after uncaught exception occurs during the binding evaluation.

Details:
the subscription to zone.onMicrotaskEmpty event, which is established in angular/core/application_ref is being unsubscribed automatically by RxJS (at SafeSubscriber.__tryOrUnsub), when uncaught exception occurs during the binding evaluation, and currently there s no way to recover from uncaught exception during the binding evaluation in prod mode.

Expected/desired behavior

In prod mode, change detection should continue to function properly after uncaught exception during the binding evaluation.

Reproduction of the problem

http://plnkr.co/edit/2fe6GC6NkuFkffpEoDPZ?p=preview

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

In our project, which previously used angular beta 9, we've built custom error handling (by subsclassing ExceptionHandler).
When in prod mode, the error was displayed in a popup on the current page, with 'Report' button, and other stuff.
After upgrading the project to RC1, we're unable to display the popup on the current page after the uncaught error has occurred.

There should be some ability to recover from an uncaught exception.

Please tell us about your environment:

• Angular version: 2.0.0-rc.1 - 2.0.0-rc.3
• Browser: all
• Language: all

[vicb]

Could you please try with RC.3and report the status. Thanks.

[borisvasilenko]

Sure, I've just reproduced the issue on a fork of angular/quickstart, which uses RC3.
borisvasilenko/quickstart@4792623

[bennadel]

I just ran into this issue as well, using the latest @angular package. And, not that it adds any value, here is my Plunker. https://plnkr.co/edit/WB2WfRhswDcp2CY82aLx?p=preview

[Fossaluffagus]

Still the same on 2.0.x

This is a problem when a template expression causes the exception, because there is no real way to catch it (as far as I know).

https://plnkr.co/edit/T1JccPu4ctADmM6f1sPa

I understand that in a lot of cases this would be due to the code not being defensive enough, but nobody wants to rely upon ultra defensive coding. I think the use case from the OP is absolutely valid.

[islamshaheen]

Hi,
Any updates regarding this issue?

[DzmitryShylovich]

still valid in v4 http://plnkr.co/edit/xLKtGztrJjqkDdwN6G6Z?p=preview

[alexemmons]

I would also like a solution or workaround for this. I am also trying to implement a custom ErrorHandler. I can catch the error and get the information that I need from it, but then I want to display a dynamic message to the user, and I can't get my view to update.

[tbosch]

Updated plunker for v4: https://plnkr.co/edit/ndpMrdpVi62qK2qTbTz7?p=preview

[ganeshkantu]

@matsko which version is this fix in? I can still reproduce in 4.1.0

[cur3n4]

I have the feeling this is causing an infinite loop when there is an error in the template. As the tick function is called over and over again.

[cur3n4]

@zoechi Agreed. But, as default behaviour, ending up in an infinite loop because of an error in a template doesn't seem like a great idea.

[brian428]

I think I'm running into the same problem, and it's really annoying. In dev mode, if I'm working and try loading a page, if there's an error while a view is being created (such as a bound variable doesn't exist in the component), Angular just goes into an infinite error loop. I have to literally kill the browser process to stop it.

This didn't used to happen. If you're going to maintain this new behavior, how about adding some max consecutive error threshold so at least it doesn't completely hang the browser?

[brian428]

I'm not calling tick(), or anything else. Are you saying you think I should be manually calling tick()?

I've just got a basic component, and a basic template. If the template tries to bind to a component property that doesn't exist, I get an infinite loop. I'll attach a screenshot.

This just started happening, and I don't see how this could possibly be expected or desired behavior?

[ganeshkantu]

@zoechi I see a lot of PRs fixing this issue above. What version did those PRs go in? It might simply be that we are using an older version of Ng4.

[ganeshkantu]

@zoechi Thanks! I will switch to that and test.

[cur3n4]

Here is a Plunker which reproduces the issue: https://plnkr.co/edit/7HgeqiuJ0Wu6siIxmlVg?p=preview
The template is invalid and it keeps logging to the console.
As a wild guess it might be related to the handler executing code which doesn't happen in the current tick (setTimeout, http promise, etc).

[brian428]

This is very close to what I'm seeing, with a very similar stack trace (though the Plunker isn't hanging my browser which is what happens in my own app). I'm not doing anything that uses setTimeout(), etc., but I suppose it's possible that one of my dependencies could be (PrimeNG, etc.).

Regardless, I hope a solution can be found. Again, things worked fine until recently (which is why I assume it was this introduced in 4.1.1).

[cur3n4]

I just realised that setTimeout will trigger change detection.
So the solution is probably to run it with runOutsideAngular. Updated plunker: https://plnkr.co/edit/76MUrCEYZtu29lIVihz7?p=preview

[cur3n4]

@brian428 It is probably something similar, something must be triggering a change detection in your handler

[zoechi]

I deleted my above comments because I somehow misinterpreted what the issue was.
Sorry for the confusion.
I'd suggest to create a new issue.
Comments on closed issues are, at least officially, ignored.

[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.}