onErrorCaptured() Capture Descendant Errors
Last updated: 2026-10-22
onErrorCaptured() Capture Descendant Errors
onErrorCaptured() catches errors thrown by descendant components during render, lifecycle or watchers, and can stop propagation.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onErrorCaptured((err, instance, info) => {
console.error(err)
return false // stop further propagation
})⚙️ Arguments
| err | The error object |
|---|---|
| instance | The component instance that errored |
| info | A string describing the source (render, mounted hook...) |
Returns：Return false to stop propagation
▶ Example
Edit the code below and see the live result:
Output：
The page shows 'caught: child exploded' without a blank screen.💡 Key Points
💡 Tip Capturing at the root component and reporting to monitoring is common.
⚠️ Warning Logging without handling hides failures — avoid silent swallowing.
ℹ️ Note Returning false stops propagation; otherwise it bubbles to the global handler.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Does it catch errors in async child requests?
A No — only synchronous errors from render, hooks and watchers.
Q How does it relate to the global errorHandler?
A Errors bubble to the nearest boundary first; return false to stop them there.
Q How to build an error boundary?
A Wrap children in a component with onErrorCaptured and render fallback UI.
