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
Basically, how to do the ff. in SvelteKit:
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.sveltefile:
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.svelteandsrc/routes/+error.sveltebefore rendering the default error page.
Of course, this is your own error page component so you may modify it however you want. I've put a GIF on mine, by the way, so that it would be nice-looking even though it's an error page, hoping that the users won't get that much irritated when they get an error on my site ;)
If you have the following in your code, please update it to the updated solution found in the docs (as shown above).
__error.svelte file in your routes folder.<script context="module"> export function load({ error, status }) { return { props: { title: `${status}: ${error.message}` } }; } </script> <script> export let title; </script> <h1>{title}</h1>
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}
#if status == 404 to like #if status == 500 to see if everything works. (Don't forget to change it back to 404).You will find the up to date documentation on creating error pages here:
https://kit.svelte.dev/docs/routing#error
Quote from the documentation in-case the link breaks:
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.sveltefile:
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.svelteandsrc/routes/+error.sveltebefore rendering the default error page.