404 Not Found? A Guide to SvelteKit Custom 404 Pages

Justin Ahinon
Last updated on
Table of Contents
Get this article emailed to you .
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!
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!
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!
FAQ
What is a 404 error page?
A 404 error page is what users see when they try to visit a page that doesn't exist on your website. It's an opportunity to inform users that they've made a wrong turn while also showing off your brand's personality.
How does SvelteKit handle 404 pages by default?
By default, if an error occurs during the rendering of a page (in a load function, for example), or if a user tries to access a route that doesn't exist, SvelteKit will render its default 404 page.
Can I customize the 404 page in SvelteKit?
Yes! SvelteKit allows you to customize the error page at the website level and even on a per-route basis. This can be done by adding a
+error.svelte
file in the appropriate directory.
How can I manually trigger a 404 page in SvelteKit?
You can manually trigger error pages in SvelteKit by throwing an
error
object (imported from
@sveltejs/kit
) in either load functions, hooks, API routes, or form actions.