進階

錯誤

在 GitHub 上編輯此頁面

錯誤是軟體開發中不可避免的事實。SvelteKit 會根據錯誤發生的地方、錯誤的種類以及傳入請求的性質，以不同的方式處理錯誤。

錯誤物件永久連結

SvelteKit 區分預期錯誤和意外錯誤，預設情況下這兩種錯誤都表示為簡單的 { message: string } 物件。

您可以新增其他屬性，例如 code 或追蹤 id，如下面的範例所示。（在使用 TypeScript 時，這需要您重新定義 Error 類型，如類型安全性中所述）。

預期錯誤永久連結

預期錯誤是使用從 @sveltejs/kit 匯入的 error 幫手建立的

src/routes/blog/[slug]/+page.server.js

ts
import { error } from '@sveltejs/kit';
import * as db from '$lib/server/database';

/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
	const post = await db.getPost(params.slug);

	if (!post) {
		error(404, {
			message: 'Not found'
		});
	}

	return { post };
}

src/routes/blog/[slug]/+page.server.ts

ts
import { error } from '@sveltejs/kit';
import * as db from '$lib/server/database';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
	const post = await db.getPost(params.slug);

	if (!post) {
		error(404, {
			message: 'Not found',
		});
	}

	return { post };
};

這會引發 SvelteKit 會捕捉的例外，導致它將回應狀態碼設定為 404 並呈現一個 +error.svelte 元件，其中 $page.error 是提供給 error(...) 的第二個引數的物件。

src/routes/+error.svelte

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

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

src/routes/+error.svelte

<script lang="ts">
	import { page } from '$app/stores';
</script>

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

如果需要，您可以新增額外的屬性到錯誤物件中...

error(404, {
	message: 'Not found',
	code: 'NOT_FOUND'
});

...否則，為了方便起見，您可以將字串傳遞為第二個引數

error(404, { message: 'Not found' });
error(404, 'Not found');

在 SvelteKit 1.x 中，您必須自己 throw error

意外的錯誤permalink

意外錯誤是處理要求時發生的任何其他例外。由於這些錯誤可能包含敏感資訊，因此不會將意外錯誤訊息和堆疊追蹤公開給使用者。

預設情況下，意外錯誤會印出到主控台（或在生產環境中，您的伺服器記錄），而公開給使用者的錯誤則具有通用的形狀

ts
{ "message": "Internal Error" }

意外錯誤會經過 handleError 鉤子，您可以在其中新增自己的錯誤處理，例如將錯誤傳送給報告服務，或傳回成為 $page.error 的自訂錯誤物件。

回應permalink

如果錯誤發生在 handle 內部或在 +server.js 要求處理程式內部，SvelteKit 會回應備用錯誤頁面或錯誤物件的 JSON 表示，這取決於要求的 Accept 標頭。

您可以透過新增 src/error.html 檔案來自訂備用錯誤頁面

<!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>

SvelteKit 會將 %sveltekit.status% 和 %sveltekit.error.message% 替換為它們對應的值。

如果錯誤發生在呈現頁面的 load 函式內部，SvelteKit 會呈現最接近錯誤發生位置的 +error.svelte 元件。如果錯誤發生在 +layout(.server).js 中的 load 函式內部，樹狀結構中最近的錯誤邊界是該佈局上方（而不是旁邊）的 +error.svelte 檔案。

例外情況是當錯誤發生在根 +layout.js 或 +layout.server.js 內部時，因為根佈局通常會包含 +error.svelte 元件。在這種情況下，SvelteKit 會使用備用錯誤頁面。

類型安全permalink

如果您正在使用 TypeScript 並需要自訂錯誤的形狀，您可以透過在應用程式中宣告 App.Error 介面來執行此操作（依慣例，在 src/app.d.ts 中，儘管它可以存在於 TypeScript 可以「看到」的任何位置）

src/app.d.ts

declare global {
	namespace App {
		interface Error {
			code: string;
			id: string;
		}
	}
}

export {};

此介面總是包含一個 message: string 屬性。

進一步閱讀永久連結

上一個掛勾

下一個連結選項