Subscribe on changes!

An error in the watch causes the entire program to lose response

avatar
Jan 12th 2023

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UT1vg0AM/SvuLRCVQNNuEUTt1rFbl1sSYgLpfenOkAHx32u4pK1aqUhI5/fsZ/t5FC/O5UOPYivKUPvOEQSk3u2k6bSznmAEj00Glz3VLUzQeKsh4YpEGmlqawKBDieo5rQ0eUWlLLxbr453yeqWUNve0DXlgVFp3limC5h7DFYNmK5yatGk6QqqHYzSQGyYsnQG6bBX34SkrpkRqKoKYsNkFan5o9bbC2wenyIwcTeashvfqD60W0icDcQbMM/jzL80ZREN4NU5INRO7Qk5AijbzW4clz2nqSw4WtDOuJ5gWGt7RFVJwbwUkTr0RNbAc626+oOpxYH7+ysNsOCgEcZxoSaek8uKWMdJZfE1gchEvMVa711+DtbwtaIVVyJIsb1tKAUfZ46laIlc2BZFaOr5xueQW38q+JV7btlpzDHo9YH9CuhZWIrsh0bB4IB+7dEc0aP/T/NX6h/dxWk2WkyfnHDSdA==

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

avatar
Jan 12th 2023

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