404 Not Found? A Guide to SvelteKit Custom 404 Pages

Did you know that every time a user sees a boring, default 404 page, a cute kitten from the internet cries? Okay, maybe not, but wouldn't it be cool if you could spare those digital kittens by creating custom 404 pages in SvelteKit?

If you've ever wondered how to spice up those error pages, or if you've just been cruising along, blissfully unaware that such customization was even possible, then buckle up! We're about to embark on a journey into the wild and exciting world of 404 pages in SvelteKit.

It's time to turn your "Page Not Found" into "Page Not Found, But Hey, Here's Something Cool Instead!"

The Default SvelteKit 404 Page

Have you ever wondered what happens behind the scenes when a brave user ventures into uncharted territories of your website? When do they end up at a location so desolate and unknown that not even your website recognizes it? They get to meet SvelteKit's default 404 page.

This default 404 page is a bit like your friendly neighborhood superhero, always ready to swoop in and save the day when things go awry. It's less "super" and more... let's say, "efficient" .

It doesn't fly or wear a cape; it simply tells the user, "Hey, you're lost."

Now, the question you may be asking is, how does SvelteKit know when to bring out this superhero? Well, it's actually pretty simple.

Whenever an error occurs during the rendering of a page (for example, in a load function), or if a brave adventurer tries to access a route that doesn't exist , SvelteKit says, "Oops, time to show the 404 page."

Remember, the default 404 page is just the beginning. It's like a blank canvas waiting for your creative touch. In the next sections, we'll explore how you can customize this error page at the website level and even on a per-route basis to add a little bit of spice to your user's unexpected detours.

Get help with your Svelte or SvelteKit code

Got a Svelte/Sveltekit bug giving you headaches? I’ve been there!

Book a free 15 min consultation call, and I’ll review your code base and give you personalized feedback on your code.

P.S. If you have a bigger problem that may need more than 15 minutes, you can also pick my brain for a small fee. 😊 But that’s up to you!

Get a free 15 minutes meeting!

Customizing the Error Page at the Website Level

SvelteKit default 404 page is good, but it could be so much more with a sprinkle of your creativity . This is where the +error.svelte file comes into play.

Adding this special file to your src/routes directory allows you to customize the default error page at the website level. It's like adding your favorite toppings to that vanilla ice cream.

The Role of +error.svelte File

+error.svelte is the superhero costume for your 404 page. It's a Svelte component that allows you to define what your error page should look like and how it should behave.

Imagine replacing that dull "404 - Page Not Found" with something more like "Oops! You've ventured off the map. Let's get you back on track.". Or adding more styles and customizations to that page.

Making Adjustments per Route

But what if you wanted to add a different flavor to the 404 page for different sections of your website?

Well, SvelteKit has got you covered. You can customize the error page on a per-route basis by adding a +error.svelte file inside the relevant src/routes/{route} directory. It's like giving each section of your website its own unique ice cream flavor.

How to Add Route-Specific +error.svelte Files

Adding a route-specific +error.svelte file is as simple as placing it in the directory corresponding to the route you want to customize. For example, if you wanted to customize the error page for your blog section, you would place the +error.svelte file in the src/routes/blog directory.

Manually Triggering Error Pages

Sometimes, you might want to manually trigger an error page . This could be for a variety of reasons - maybe you want to show a custom error message or handle a specific error condition.

SvelteKit lets you manually trigger error pages by throwing an error object, which can be imported from @sveltejs/kit .

The error object can be used in load functions, hooks , API routes, and form actions to trigger an error page. For example, you might want to show a custom error page if a blog post doesn't exist. Here's how you could do that:

Leveraging error Object for Customization

But wait, there's more! The error object isn't just for triggering error pages - it's also a powerful tool for customizing them. The error object returns an error status and a message (either a string or an object with the message property) that you can use to customize your error page. Here's an example of how you could use it:

throw error(404, { message: 'Not found' })

And then in your component:

Get help with your Svelte or SvelteKit code

Got a Svelte/Sveltekit bug giving you headaches? I’ve been there!

Book a free 15 min consultation call, and I’ll review your code base and give you personalized feedback on your code.

P.S. If you have a bigger problem that may need more than 15 minutes, you can also pick my brain for a small fee. 😊 But that’s up to you!

Get a free 15 minutes meeting!

Wrapping Up

Whew! You've made it to the end, and you're now armed with the knowledge to turn the blandest of 404s into a remarkable custom experience. With SvelteKit, you can handle 404 pages gracefully and add a touch of creativity to them .

Remember, every 404 page is an opportunity to make your users smile and show off your brand's personality. So let those creative juices flow, and happy coding!