An error in the watch causes the entire program to lose response
Vue version
3.2.45
Link to minimal reproduction
Steps to reproduce
Change the text of the input box to Hello
, and then the whole program loses its response.
You can verify whether the program is normal through the click me
button on the right
When flush: 'post' is configured, if there is an error in the watch, the program will never be available:
const msg = ref('Hello World!')
watch(msg, (val) => {
if(val === 'Hello') {
throw 123
}
}, {
flush: 'post'
})
What is expected?
The program runs normally
What is actually happening?
The entire website is unresponsive and unavailable!
System Info
No response
Any additional comments?
No response
Well, errors need handling - by you, preferably. And should not go unnoticed, ignored by the framework. Some errors, by their nature, will break the render cycle of Vue and thus will break (a part of the) the app.
Vue provides you with ways to handle errors thrown within its lifecycle:
https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured https://vuejs.org/api/application.html#app-config-errorhandler