npmsvelte95% confidence\u2191 31

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

Full error message
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

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). Create an __error.svelte file in your routes folder. 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> 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} 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).

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/d98bd0349a4bc8bab58ef36169c3f399d7df938acf1602aa8790f40f09e8e490
hash \u00b7 d98bd0349a4bc8bab58ef36169c3f399d7df938acf1602aa8790f40f09e8e490
How to add a custom 404 page and a different Error page (for… — DepScope fix | DepScope