Problem Statement
How do you handle errors globally and per-component in Vue?
Explanation
Globally, configure app.config.errorHandler (Vue 3) or Vue.config.errorHandler (Vue 2) to capture uncaught component errors. Per-component, use the errorCaptured hook to intercept errors from child components and optionally prevent propagation by returning false. For async code, handle Promise rejections with try/catch or .catch.
Code Solution
SolutionRead Only
// Vue 3 global
const app = createApp(App)
app.config.errorHandler = (err, instance, info) => { /* log/report */ }
// Per-component
export default { errorCaptured(err, vm, info){ /* cleanup */ return false } }Practice Sets
This question appears in the following practice sets: