+error.svelte for Custom Error Pages
Create custom error UIs that display the status code and message.
+error.svelte for Custom Error Pages is a free Sveltejs Academy lesson on CoddyKit — lesson 1 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 Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Custom Error UI
Create +error.svelte in any route folder for a tailored error page.
Root Error Page
src/routes/+error.svelte catches errors anywhere not caught by a nested error boundary.
<!-- +error.svelte -->
<script>
import { page } from "$app/stores";
</script>
<h1>{$page.status}: {$page.error?.message}</h1>Access Status
$page.status gives the HTTP status (404, 500, etc.).
Access Message
$page.error.message gives the message you provided to error() or the generic message from handleError.
Pre-render Differences
Static error pages can be prerendered; dynamic ones render per request.
Nested Boundaries
Place +error.svelte in subfolders to scope error UI to specific sections.
Friendly Messages
Tailor the message: a 404 should suggest navigating elsewhere, a 500 should apologize and link to support.
Tracking IDs
Display a tracking ID returned from handleError so users can quote it to support.
Recovery Links
Always offer a way back: a link home, a search box, or a reload button.
Branding
Style the error page like the rest of your app; it is part of the user experience.
Reactive Updates
$page updates if the user navigates within the error context, keeping the UI fresh.
Quick Check
How do you access the error status?
Recap
Place +error.svelte per folder for scoped error UIs. Read $page.status and $page.error.
Frequently asked questions
Is the “+error.svelte for Custom Error Pages” lesson free?
Yes — the full text of “+error.svelte for Custom Error Pages” is free to read here on the web, and the Sveltejs 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 Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “+error.svelte for Custom Error Pages”?
Create custom error UIs that display the status code and message. You practise Sveltejs 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 Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “+error.svelte for Custom Error Pages” 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 Sveltejs Academy lesson?
Yes. Every Sveltejs 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.
All lessons in this course
- +error.svelte for Custom Error Pages
- Expected vs Unexpected Errors
- error() and redirect() Helpers
- Error Pages in Nested Layouts