Errors and redirects / Error pages • Svelte Tutorial

Basic SvelteKit Errors and redirects Error pages

load 関数の内側でなにか問題が発生したとき、SvelteKit はエラーページをレンダリングします。

デフォルトのエラーページは当たり障りないものです。src/routes/+error.svelte コンポーネントを作成することで、カスタマイズすることができます。

src/routes/+error

<script>
	import { page } from '$app/state';
	import { emojis } from './emojis.js';
</script>

<h1>{page.status} {page.error.message}</h1>
<span style="font-size: 10em">
	{emojis[page.status] ?? emojis[500]}
</span>

<script lang="ts">
	import { page } from '$app/state';
	import { emojis } from './emojis.js';
</script>

<h1>{page.status} {page.error.message}</h1>
<span style="font-size: 10em">
	{emojis[page.status] ?? emojis[500]}
</span>

+error.svelte コンポーネントは最上位(root)の +layout.svelte の内側でレンダリングされます。よりきめ細やかな +error.svelte 境界を作ることもできます。

src/routes/expected/+error

<h1>this error was expected</h1>

このコンポーネントは /expected でエラーが発生した場合にレンダリングされ、その他の場所でエラーが発生した場合は最上位(root)の src/routes/+error.svelte ページがレンダリングされます。

Edit this page on GitHub

previous next

Basics Fallback errors

<h1>home</h1>

show text show editor