Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

@matthiasg
Copy link

matthiasg commented Feb 8, 2019

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
Copy link
Member

Justineo commented Feb 8, 2019

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
Copy link
Author

@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
Copy link

jaskang commented Feb 21, 2019

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
Copy link
Author

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

Lostlover pushed a commit to Lostlover/vue that referenced this issue Dec 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment