Why Error pages (+error.svelte)? - Purpose & Use Cases

The Big Idea

Discover how a simple file can turn frustrating errors into helpful guides for your users!

The Scenario

Imagine your website suddenly shows a blank screen or confusing messages when something goes wrong, like a missing page or server error.

Users get lost and frustrated because they don't know what happened or what to do next.

The Problem

Manually handling errors means writing lots of repeated code everywhere to catch problems.

This is slow, easy to forget, and often leads to inconsistent or ugly error messages that confuse users.

The Solution

The +error.svelte file in SvelteKit lets you create one place to show friendly, clear error pages automatically whenever something goes wrong.

This keeps your app clean and users informed without extra work everywhere.

Before vs After

✗ Before

try { fetchData() } catch { showAlert('Error!') }

✓ After

<script>
  export let status;
  export let error;
</script>

<h1>{status}</h1>
<p>{error.message}</p>

What It Enables

You can provide smooth, helpful error experiences that guide users back on track without breaking your app's flow.

Real Life Example

When a user visits a broken link, instead of a confusing blank page, they see a friendly message like "Oops! Page not found" with a button to go home.

Key Takeaways

Error pages improve user experience by handling problems gracefully.

+error.svelte centralizes error display in SvelteKit apps.

This saves time and keeps your app consistent and user-friendly.