Vue 55: Error Handling with onErrorCaptured
easy⏱ 5 mincoursevue
Catching a child's render error
onErrorCaptured(hook) registers a hook on a component instance; when a descendant throws during render, a watcher callback, or a lifecycle hook, Vue walks up the component tree calling every registered onErrorCaptured hook until one returns false, which marks the error as handled and stops it from propagating further (otherwise it keeps bubbling and eventually reaches app.config.errorHandler or the console as unhandled).
import { onErrorCaptured, ref } from 'vue';
export default {
setup() {
const error = ref(null);
onErrorCaptured((err, instance, info) => {
error.value = err.message;
return false; // stop propagation, render a fallback instead
});
return { error };
},
};
Global fallback: app.config.errorHandler
onErrorCaptured is a local, per-subtree error boundary; for a single app-wide catch-all (for example, to report every uncaught error to a monitoring service) you'd also set app.config.errorHandler = (err, instance, info) => { ... } once, on the app instance itself.
This is Vue's error boundary
Compared to React's class-based error boundaries (static getDerivedStateFromError / componentDidCatch), onErrorCaptured is the direct Vue equivalent: catch, contain, render a fallback, and keep the rest of the app alive.