Error Pages in Sveltekit

Feb 25, 2022 . 1 min Muhammed Mukhthar CM

Recently I’ve been playing with Svelte. As a relatively new guy to the web development field, I can certainly certify svelte as one of the easiest frameworks to get the hang of. And if you don’t know, SvelteKit is the officially preferred method for creating Svelte Apps.

The default error pages in SvelteKit are kind of basic. Something like I’ve shown below.

404
Not found: /dfkdf
Error: Not found: /dfkdf
// continues here....

This is helpful while our app is in development, but our end users were gonna see this page, they’ll never know what went wrong.

SvelteKit makes it easy for implementing custom Error pages. All we have to do is, create a file named __error.svelte in the routes folder. Anything we put inside this file will be shown on pages with an error instead of the default error page.

For example, we can show Page Not Found in our error pages with the below code.

<!-- __error.svelte -->
<strong>
    Page Not Found
</strong>

I hope you found something useful here. If you found some errors or a typo, or you wanna just talk contact me 😊