Lesson 9 of 9 beginner 5 min read

Errors and Redirects

Throwing error() and redirect() helpers, custom error pages, and nested error boundaries.

Interactive Laboratory

Live Runtime

Experiment directly with Errors and Redirects concepts in real time

SvelteKit Full-Stack Pipeline

1. Request

Hook

2. Loader

load()

3. Server

SSR HTML

4. Browser

Hydrate

Errors and Redirects

SvelteKit provides explicit helpers to handle expected application errors, unexpected exceptions, and server-side redirects.

1. Throwing Expected Errors (`error()`)

Use error() from @sveltejs/kit in load functions or form actions:

// src/routes/posts/[id]/+page.server.ts
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
 
export const load: PageServerLoad = async ({ params }) => {
	const post = await fetchPostById(params.id);
 
	if (!post) {
		// Throws a type-safe 404 response
		error(404, {
			message: `Post #${params.id} could not be found`
		});
	}
 
	return { post };
};

2. Triggering Redirects (`redirect()`)

Redirect users (e.g., after login or when accessing protected routes):

// src/routes/admin/+page.server.ts
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
 
export const load: PageServerLoad = async ({ locals }) => {
	if (!locals.user) {
		// 303 See Other or 307 Temporary Redirect
		redirect(303, '/login?redirectTo=/admin');
	}
 
	return { adminData: 'Top Secret' };
};

3. Custom Error Fallback (`+error.svelte`)

When an error is thrown, SvelteKit walks up the route tree to find the nearest +error.svelte boundary:

<!-- src/routes/+error.svelte -->
<script lang="ts">
	import { page } from '$app/state';
</script>
 
<div class="error-container">
	<h1>{page.status}</h1>
	<p>{page.error?.message ?? 'An unexpected error occurred'}</p>
	<a href="/">Return Home</a>
</div>

J