Error pages: +error.svelte

When a page is not found or load reports an error, SvelteKit shows an error page. The default one is plain: a code and a text. Your own page is described in a +error.svelte file — a regular component rendered in place of the page inside the layout.

Your own error page

Create the file src/routes/+error.svelte:

<!-- src/routes/+error.svelte -->
<script>
  import { page } from '$app/state';
</script>
 
<h1>Error {page.status}</h1>
<p>{page.error?.message}</p>
<a href="/">Home</a>

Open a non-existent address, for example http://localhost:5173/nothing — you see "Error 404", the message "Not Found" and a link home. The menu from the root layout stays, because +error.svelte is rendered inside +layout.svelte.

Where the code and message come from

For expected errors the message comes from the error call. The text of unexpected exceptions is not shown to the visitor — it is replaced with a safe message that you can set in the handleError hook (previous lesson).

Different codes, different text

Inside the component you can pick the text by code:

<!-- src/routes/+error.svelte -->
<script>
  import { page } from '$app/state';
</script>
 
{#if page.status === 404}
  <h1>Page not found</h1>
  <p>Check the address or go back to the <a href="/blog">blog</a>.</p>
{:else}
  <h1>Something broke</h1>
  <p>Try reloading the page in a minute.</p>
{/if}

Now /nothing and /blog/nothing both show "Page not found" with a link to the blog.

A section error page

SvelteKit looks for the nearest +error.svelte, going up the folders from the failing page to the root. The file src/routes/blog/+error.svelte is shown for errors in /blog and nested addresses, and it is rendered inside the blog layout:

<!-- src/routes/blog/+error.svelte -->
<script>
  import { page } from '$app/state';
</script>
 
<p>Post unavailable: {page.error?.message}</p>
<a href="/blog">All posts</a>

The address /blog/nothing shows "Post unavailable: Post not found" with the blog sidebar.

An error in the root layout

If the load of the root layout itself fails, there is nowhere to render +error.svelte. For this case SvelteKit uses the static file src/error.html — you can create it with simple HTML markup.

Common mistake

Importing page from $app/stores and writing $page.status. This is the old way from SvelteKit 1 and early versions of 2; it still works, but in new projects use page from $app/state — without the $ before the name.