Error boundaries with onErrorCaptured in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of onErrorCaptured in Vue?

onErrorCaptured is a Vue Composition API hook that catches errors from child components during rendering, lifecycle hooks, or watchers. It acts like an error boundary to prevent the whole app from crashing.

beginner

How do you use onErrorCaptured in a Vue component?

Inside the setup() function, call onErrorCaptured((error, instance, info) => { ... }). Return true to stop the error from propagating further, or false or nothing to continue passing it up.

intermediate

What arguments does the onErrorCaptured callback receive?

• error: The actual error object thrown.
• instance: The Vue component instance where the error happened.
• info: A string describing the lifecycle hook or event during which the error occurred.

intermediate

What happens if onErrorCaptured returns true?

Returning true tells Vue that the error was handled and stops the error from propagating to parent components or the global error handler.

advanced

Can onErrorCaptured catch errors from asynchronous code like setTimeout?

No, onErrorCaptured only catches errors during rendering and lifecycle hooks. Errors in asynchronous callbacks like setTimeout need to be handled separately.

Where do you place onErrorCaptured in a Vue component?

A Inside the <code>methods</code> object

B Inside the <code>template</code> section

C Inside the <code>data()</code> function

D Inside the <code>setup()</code> function

onErrorCaptured is a Composition API hook and must be called inside setup().

What does returning true from onErrorCaptured do?

A Restarts the component

B Stops error propagation to parent components

C Logs the error to the console

D Ignores the error silently

Returning true signals Vue that the error was handled and prevents it from propagating further.

Which of these errors can onErrorCaptured catch?

A Errors during component rendering

B Errors inside <code>setTimeout</code> callbacks

C Network request errors

D Syntax errors in JavaScript files

onErrorCaptured catches errors during rendering and lifecycle hooks, not asynchronous or syntax errors.

What arguments does the onErrorCaptured callback receive?

A component, props, state

B event, data, context

C error, instance, info

D error, message, stack

The callback receives the error object, the component instance, and a string describing where the error happened.

If onErrorCaptured returns false or nothing, what happens?

A Error propagates to parent components

B Error is ignored

C Component reloads automatically

D Error is logged and stopped

Returning false or nothing lets the error continue to propagate up the component tree.

Explain how onErrorCaptured works as an error boundary in Vue components.

Think about how Vue lets you catch errors in child components to avoid app crashes.

Describe a scenario where you would use onErrorCaptured and how you handle the error.

Imagine a child component throws an error and you want the parent to catch it and show a message.