当 load 函数内部发生错误时,SvelteKit 会渲染一个错误页面。
默认错误页面有点单调。我们可以通过创建一个 src/routes/+error.svelte 组件来自定义它。
src/routes/+error
<script>
import { page } from '$app/stores';
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 组件是在根 +layout.svelte 内渲染的。我们可以创建更细粒度的 +error.svelte 边界。
src/routes/expected/+error
<h1>this error was expected</h1>此组件将为 /expected 渲染,而根 src/routes/+error.svelte 页面将为发生的任何其他错误渲染。
1
2
<h1>home</h1>