How to add a custom 404 page and a different Error page (for other errors) in SvelteKit?

Question

Basically, how to do the ff. in SvelteKit:

• Add a custom 404 page first.
• Have a different generic Error page that will show a message/description about the error in SvelteKit

Answer 1

After reading through the updated docs, I found this:

If an error occurs during load, SvelteKit will render a default error page. You can customise this error page on a per-route basis by adding an +error.svelte file:

src/routes/blog/[slug]/+error.svelte

<script>
  import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h1>

SvelteKit will 'walk up the tree' looking for the closest error boundary — if the file above didn't exist it would try src/routes/blog/+error.svelte and src/routes/+error.svelte before rendering the default error page.

Of course, this is your own error page component so you may modify it however you want.

Outdated solution:

If you have the following in your code, please update it to the updated solution found in the docs (as shown above).

1. Create an __error.svelte file in your routes folder.
2. Inside that file, you can do this as shown in the docs:

<script context="module">
  export function load({ error, status }) {
      return {
          props: {
              title: `${status}: ${error.message}`
          }
      };
  }
</script>

<script>
  export let title;
</script>

<h1>{title}</h1>

3. We're not done yet! You can check for the status code and then render different screen components. (You can configure the props inside the load function, by the way):

<script context="module">
  export function load({ error, status }) {
      return {
          props: {
              message: error.message,
              status // same as status: status
          }
      };
  }
</script>

<script>
  import ErrorScreen from '../components/screens/ErrorScreen.svelte'; // your own Error screen component
  import NotFoundScreen from '../components/screens/NotFoundScreen.svelte'; // your own 404 screen component

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

{#if status == 404} <!-- Used '==' instead of '===' to match string/number status code (just to be sure) -->
  <NotFoundScreen />
{:else}
  <ErrorScreen {message} {status} />
{/if}

4. You're all set! You can test it out by changing the #if status == 404 to like #if status == 500 to see if everything works. (Don't forget to change it back to 404).