Errors in Vue apps fall into three buckets: render/setup throws, async failures, and event handler mistakes. Each needs a different tool—global handlers, local try/catch, and user-visible error state.
Async and fetch
Wrap awaits in try/catch, store a message in a ref, and show retry UI. Do not rely on the template alone to catch promise rejections.
Render errors
Production apps use app.config.errorHandler or libraries like error boundaries in meta-frameworks. The playground focuses on catching async errors and validating props before render.
Event handlers
Errors inside @click handlers do not bubble to a magical boundary—use try/catch or centralized logging in the handler.
Self-check
- Where do you handle a failed fetch vs a typo in template expression?
- Why show users an error message instead of a silent failure?
Tip: Wrap async work in try/catch and surface role="alert" messages—users cannot read console.error.
Interview prep
- How do you handle async errors in Vue?
try/catcharound awaits, store messages in refs, show retry UI—do not assume templates catch promise rejections.