Angular 2 does not refresh the view after an exception occurs

Question

When an exception is caught by the Angular 2 exception handler, the user interface is no longer "updated".

I have a very simple example here :

import { Component, ExceptionHandler, Injectable, OnInit, provide } from '@angular/core'; import { bootstrap } from '@angular/platform-browser-dynamic'; import { Subject } from 'rxjs/Subject' export interface Alert { message: string; } @Component({ selector: 'my-app', template : ' <h3>Parent</h3> {{aValue}} <br/> <br/> <button (click)='doIt()'>do it</button> <br/> <br/> <button (click)='breakIt()'>break it</button> ' }) export class App implements OnInit { private aValue: boolean = true constructor() { } alerts: Alert[] = []; doIt(){ console.log('Doing It') this.aValue = !this.aValue } breakIt(){ console.log('Breaking It') throw new Error('some error') } } bootstrap(App).catch(err => console.error(err)); 

The Do It button flips the boolean which is reflected in the interpolated value in the template. However, after the Break It button is pressed (in which cases an error will be thrown), the interpolated value is no longer updated when 'Do it hit button. However, the console still logs Doing it messages.

The problem I am facing is that I would like to create my own exception handler that warns the user and maybe does some work to clean up the form if something goes wrong, but I see that if I throw error on click button to check it, all user interface updates stop. However, the buttons continue to function, which means that any buttons that send requests will work if the form is in good condition. However, the user interface has ceased to update and inform the user about what is happening.

I'm not sure if this is a problem with Zones or something else, but trying NgZone.run() did not seem to solve this problem for me. If the error can lead to a breakdown of the user interface of the component, what is the correct approach to my problem?

Answer 1

Since angular 4.1.1 (2017-05-04) https://github.com/angular/angular/commit/07cef36

fix (core): do not stop detecting changes due to errors

• prevents unsubscribing from a zone on error
• prevents unsubscribing from EventEmitter directive on error
• prevents dev views from being taken if there is an error
• ensures that ngOnInit is only called 1x (also in prod mode)

it should work without additional code

 @Component({ selector: 'my-app', template : ` {{aValue}} <button (click)='doIt()'>do it</button> <button (click)='breakIt()'>break it</button> ` }) export class App implements OnInit { private aValue: boolean = true doIt(){ console.log('Doing It') this.aValue = !this.aValue } breakIt(){ console.log('Breaking It') throw new Error('some error') } } 

Plunger example

Answer 2

Do not rely on code execution after an unhandled Exception occurred. You should handle the exception where you expect this to happen.

Error Handling: http://www.javascriptkit.com/javatutors/trycatch.shtml