Sveltejs Academy · Lesson

+error.svelte for Custom Error Pages

Create custom error UIs that display the status code and message.

Lesson 1 of 413 steps

+error.svelte for Custom Error Pages is a free Sveltejs Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The Sveltejs Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

Recap

Place +error.svelte per folder for scoped error UIs. Read $page.status and $page.error.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 41
Lessons: 163

Start learning free View the full course

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. 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. The Sveltejs Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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

← Back to Sveltejs Academy