Vue: Invalid <progress :value="1/0"></progress> breaks Vue

[matthiasg]

Version

2.6.3

Reproduction link

https://jsfiddle.net/mgoetzke/bsku79er/7/

Steps to reproduce

See https://jsfiddle.net/mgoetzke/bsku79er/7/. Once 'Break It' is pressed the application is not updating anything anymore. A runtime exception during render essentially killed it without any good way to handle it.

Whenever a progress elements value is set to NaN, the Error TypeError: "Value being assigned to HTMLProgressElement.value is not a finite floating-point value." is being listed in the console, but somehow instead of just handling this render error (handled by standard component error handler) the component and the entire application is permanently damaged after this.

Of course the developer should foresee this and write it with the appropriate defensiveness, but runtime errors inside the render function of a component should not invisibly leave the entire application in a non-reactive state.

EDIT: Updated source of console message

What is expected?

Handle this as a standard render exception.

What is actually happening?

Vue is not reactive anymore. Eg.no button has any effect anymore.

[Justineo]

The error you saw wasn't produced by Vue. It's just an uncaught JavaScript runtime error produced by the browser. And I think current behavior is better because it reminds you “something went wrong” and as long as you look into the console you'll notice the error easily. It helps you find problems earlier.

[matthiasg]

@Justineo correct, the error was caught by javascript. But vue should not fail silently after that. In a real scenario an application has this error and the user does not see anything amiss. The application looks fine at first glance and normal users do not look into the javascript console.

[JasKang]

at /src/platforms/web/runtime/modules/dom-props.js -> function updateDOMProps -> line:58

 if (shouldUpdateValue(elm, strCur)) {
    elm.value = strCur  // It's not safe for ProgressElement ?
 }

[matthiasg]

@JasKang exactly. I believe Vue should try to not modify DOM properties in way that is not allowed to begin with.