Error Boundary Components
Building an ErrorBoundary wrapper component with fallback slot and error display.
Error Boundary Components is a free Vue Academy lesson on CoddyKit — lesson 2 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.
What Is an Error Boundary
An error boundary is a reusable component that wraps part of your UI, catches errors from inside it, and shows a fallback instead of letting the whole app break.
The Core Idea
The boundary keeps a hasError flag. While false it renders its children; once an error is captured it flips to true and renders a fallback.
import { ref } from "vue";
const hasError = ref(false);Capturing the Error
Use onErrorCaptured to set the flag and stop propagation, so the boundary fully owns the failure.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Storing Error Details
Capture the error itself too, so the fallback can display a message or you can offer a retry.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});The Template Structure
Render the default slot (the children) when healthy, and a fallback slot when an error occurred.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>Default Slot Shows Children
The default slot holds the protected UI. Under normal conditions the boundary is invisible - it just passes children through.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>Fallback Slot Shows on Error
Provide a named fallback slot for the error UI. It can receive the error via a scoped slot prop.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Adding a Retry
Expose a reset so users can recover. A method clears the flag and re-renders the children.
function reset() {
hasError.value = false;
error.value = null;
}Retry in the Fallback
Pass reset through the scoped slot so the fallback can offer a Try Again button.
<slot v-else name="fallback" :error="error" :reset="reset" />A Default Fallback
Give the fallback slot sensible default content so the boundary works even without a custom fallback supplied.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Why Boundaries Matter
Without boundaries, one failing widget can crash an entire view. Boundaries isolate failures so the rest of the app keeps working - a key resilience pattern.
Quick Check
How does an error boundary decide what to render?
Recap
You built an error boundary: a hasError ref, onErrorCaptured that sets it and returns false, a default slot for children and a fallback slot (with the error and a reset) shown when an error occurs - isolating failures from the rest of the app.
Frequently asked questions
Is the “Error Boundary Components” lesson free?
Yes — the full text of “Error Boundary Components” 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 “Error Boundary Components”?
Building an ErrorBoundary wrapper component with fallback slot and error display. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Error Boundary Components” 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.