onErrorCaptured Lifecycle Hook
Catching errors from child components, returning false to stop propagation, error objects.
onErrorCaptured Lifecycle Hook is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Catching Errors in Components
Vue provides the onErrorCaptured lifecycle hook to catch errors thrown by descendant components. It lets a parent intercept failures from its subtree.
The Hook Signature
onErrorCaptured receives three arguments: the error, the component instance that threw, and an info string describing where it happened.
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});The err Argument
The first argument is the thrown error object - typically an Error instance with a message and stack you can log or display.
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});The instance Argument
The second argument is the component instance that raised the error, useful for debugging or attaching context to your reports.
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});The info Argument
The third argument is a string telling you which lifecycle or operation triggered the error - for example "render function" or "setup function" or a specific hook.
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});Only Child Errors
Importantly, onErrorCaptured catches errors from descendants, not from the component own setup or render. Place the hook in an ancestor of the code you want to protect.
Stopping Propagation
By default a captured error still propagates up to ancestor handlers and the global handler. Return false to stop it from going further.
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});Why Stop Propagation
Returning false contains the error locally - useful when this component fully handles the failure (e.g. shows a fallback) and does not want the global handler firing too.
Letting It Bubble
If you want higher-level handlers (or the global one) to also see the error, do not return false. The hook then logs locally and lets the error continue upward.
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});A Practical Use
A common use is logging plus a recovery flag. Set a reactive flag to render a fallback while reporting the error for diagnostics.
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});Async Caveats
onErrorCaptured catches errors in descendant render, lifecycle, and synchronous handlers. Some async errors (uncaught promise rejections) are better handled at the global level - covered later.
Quick Check
What does returning false from onErrorCaptured do?
Recap
You learned onErrorCaptured((err, instance, info)) catches errors from descendant components. The info string gives lifecycle context, and returning false stops propagation so the component can handle the failure locally.
Frequently asked questions
Is the “onErrorCaptured Lifecycle Hook” lesson free?
Yes — the full text of “onErrorCaptured Lifecycle Hook” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.
What will I learn in “onErrorCaptured Lifecycle Hook”?
Catching errors from child components, returning false to stop propagation, error objects. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “onErrorCaptured Lifecycle Hook” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- onErrorCaptured Lifecycle Hook
- Error Boundary Components
- app.config.errorHandler for Global Errors
- Async Error Handling in Composables