跳至主要內容

當 `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` 頁面則會針對發生的任何其他錯誤渲染。

在 GitHub 上編輯此頁面

上一個 下一個
1
2
<h1>home</h1>