Error pages (+error.svelte)

Introduction

Error pages help users understand when something goes wrong on a website. They show friendly messages instead of confusing errors.

When a user visits a page that does not exist (404 error).

When the server has a problem and cannot load the page (500 error).

When a user tries to access a page without permission (403 error).

When you want to customize the look and message of error pages in your Svelte app.

Syntax

Svelte

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

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

The +error.svelte file is a special SvelteKit file that shows error pages automatically.

It receives error and status props to display error details.

Examples

Basic error page showing the status code and error message.

Svelte

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

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

Custom message with status and error details.

Svelte

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

<h1>Oops! Something went wrong.</h1>
<p>Status: {status}</p>
<p>{error.message}</p>

Styled error page with red heading and italic message.

Svelte

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

<style>
  h1 { color: red; }
  p { font-style: italic; }
</style>

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

Sample Program

This is a complete +error.svelte file for SvelteKit. It shows the error status and message in a centered box. It uses semantic HTML and accessibility features like role="alert" and aria-live="assertive" so screen readers announce the error immediately.

Svelte

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

<style>
  main {
    max-width: 600px;
    margin: 3rem auto;
    padding: 1rem;
    font-family: system-ui, sans-serif;
    text-align: center;
  }
  h1 {
    color: #b00020;
    font-size: 3rem;
  }
  p {
    font-size: 1.25rem;
    color: #333;
  }
</style>

<main role="alert" aria-live="assertive">
  <h1>Error {status}</h1>
  <p>{error.message}</p>
</main>

Important Notes

The +error.svelte file automatically catches errors from your routes.

You can customize the error page to match your site's style and tone.

Always use semantic HTML and accessibility attributes to help all users understand the error.

Summary

Error pages show friendly messages when something goes wrong.

Use +error.svelte in SvelteKit to create custom error pages.

Display the status and error.message to inform users clearly.