Why Error boundaries with onErrorCaptured in Vue? - Purpose & Use Cases

The Big Idea

What if a tiny error could break your whole app -- and how to stop that from happening?

The Scenario

Imagine building a Vue app where a small mistake in one component crashes the whole page, leaving users staring at a blank screen with no clue what went wrong.

The Problem

Without error boundaries, errors bubble up and break the entire app. Debugging is hard because the app stops working suddenly, and users get a bad experience with no helpful message.

The Solution

Vue's onErrorCaptured lets you catch errors inside components gracefully. You can show fallback UI or log errors without crashing the whole app, keeping your app stable and user-friendly.

Before vs After

✗ Before

export default { mounted() { throw new Error('Oops!') } }

✓ After

import { onErrorCaptured } from 'vue';
export default { setup() { onErrorCaptured(err => { console.error(err); return true; }); } }

What It Enables

This lets your app handle unexpected errors smoothly, improving reliability and user trust.

Real Life Example

Think of an online store where a product detail component fails to load. Instead of crashing the whole page, you show a friendly message and let users keep browsing other products.

Key Takeaways

Errors in components can crash the whole Vue app.

onErrorCaptured catches errors locally to prevent crashes.

This improves app stability and user experience.