{"id":557,"hash":"d98bd0349a4bc8bab58ef36169c3f399d7df938acf1602aa8790f40f09e8e490","pattern":"How to add a custom 404 page and a different Error page (for other errors) in SvelteKit?","full_message":"Basically, how to do the ff. in SvelteKit:\n\nAdd a custom 404 page first.\nHave a different generic Error page that will show a message/description about the error in SvelteKit","ecosystem":"npm","package_name":"svelte","package_version":null,"solution":"After reading through the updated docs, I found this:\n\nIf an error occurs during load, SvelteKit will render a default error\npage. You can customise this error page on a per-route basis by adding an +error.svelte file:\n\nsrc/routes/blog/[slug]/+error.svelte\n\n<script>\n  import { page } from '$app/stores';\n</script>\n\n<h1>{$page.status}: {$page.error.message}</h1>\n\nSvelteKit will 'walk up the tree' looking for the closest error\nboundary — if the file above didn't exist it would try\nsrc/routes/blog/+error.svelte and src/routes/+error.svelte before\nrendering the default error page.\n\nOf course, this is your own error page component so you may modify it however you want.\n\nOutdated solution:\nIf you have the following in your code, please update it to the updated solution found in the docs (as shown above).\n\nCreate an __error.svelte file in your routes folder.\nInside that file, you can do this as shown in the docs:\n\n<script context=\"module\">\n  export function load({ error, status }) {\n      return {\n          props: {\n              title: `${status}: ${error.message}`\n          }\n      };\n  }\n</script>\n\n<script>\n  export let title;\n</script>\n\n<h1>{title}</h1>\n\nWe'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):\n\n<script context=\"module\">\n  export function load({ error, status }) {\n      return {\n          props: {\n              message: error.message,\n              status // same as status: status\n          }\n      };\n  }\n</script>\n\n<script>\n  import ErrorScreen from '../components/screens/ErrorScreen.svelte'; // your own Error screen component\n  import NotFoundScreen from '../components/screens/NotFoundScreen.svelte'; // your own 404 screen component\n\n  export let message;\n  export let status;\n</script>\n\n{#if status == 404} <!-- Used '==' instead of '===' to match string/number status code (just to be sure) -->\n  <NotFoundScreen />\n{:else}\n  <ErrorScreen {message} {status} />\n{/if}\n\nYou'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).","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/69321948/how-to-add-a-custom-404-page-and-a-different-error-page-for-other-errors-in-sv","votes":31,"created_at":"2026-04-19T04:51:20.927866+00:00","updated_at":"2026-04-19T04:51:20.927866+00:00"}