Sveltekit - Errors

Quiz

SvelteKit provides a structured approach to handle errors, ensuring developers manage user experience effectively when things go wrong. This chapter provides brief knowledge about SvelteKit error handling, custom error pages, and fallback errors.

Types of Errors

There are two types of errors that developers mostly faces: Expected Errors and Unexpected Errors.

Expected Errors

Expected Errors are those that developers anticipate and manage directly using the error helper from @sveltejs/kit. For example:

import { error } from '@sveltejs/kit';

export function load() {
    throw error(420, 'Enhance your calm');
}

Unexpected Errors

In SvelteKit, unexpected errors are any exceptions that occur while processing a request that was not anticipated by the developer. These errors are treated as potential bugs in the application and aren't specifically triggered using the error helper function. For example:

export function load() {
    throw new Error('Kaboom!');
}

Custom Error Pages

SvelteKit lets developers make custom error pages to improve user experience. By adding a +error.svelte file in the routes directory, you can decide how errors are shown.

Syntax

To handle errors for specific routes, create a +error.svelte file within the route directory.

<script>
    import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h1>

Fallback Errors

When an unexpected error happens, or if SvelteKit can't handle it with specific error pages, it shows a fallback error page. This is a basic HTML page that lets users know something went wrong.

Example structure

The following is an example of fallback errors structure in SvelteKit:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>%sveltekit.error.message%</title>
</head>
<body>
    <h1>My custom error page</h1>
    <p>Status: %sveltekit.status%</p>
    <p>Message: %sveltekit.error.message%</p>
</body>
</html>

Example

The following is a simple example of SvelteKit error handling that demonstrates expected errors (404, 403, etc.) handling and Error messages propagating to an error page.

<!--src/routes/+error.svelte-->
<script>
    import { page } from '$app/stores';
</script>

<main>
    <h1>{$page.status}: {$page.error.message}</h1>
    <a href="/">Home</a>
</main>

<style>
    main { text-align: center; padding: 2rem; }
    h1 { color: red; }
</style>

<!--src/routes/+page.svelte-->
<script>
    /** @type {import('./$types').PageData} */
    export let data;
</script>

<nav>
    <a href="/notfound">404 Error</a>
    <a href="/protected">403 Error</a>
    <button on:click={() => {
        throw new Error('Client Error');
    }}>500 Error</button>
</nav>

<p>{data.message}</p>

<!--src/routes/+page.server.js-->
export function load() {
    return {
        message: 'Working!'
    };
}

<!--src/routes/notfound/+page.server.js-->
import { error } from '@sveltejs/kit';

export function load() {
    throw error(404, 'Page not found');
}

<!--src/routes/protected/+page.server.js-->
import { error } from '@sveltejs/kit';

export function load() {
    throw error(403, 'Access denied');
}

Output

Print Page