高级

错误

在 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 中，你必须自己抛出错误

意外错误永久链接

意外错误是指处理请求时发生的任何其他异常。由于这些异常可能包含敏感信息，因此意外错误消息和堆栈跟踪不会向用户公开。

默认情况下，意外错误会打印到控制台（或在生产环境中打印到服务器日志），而向用户公开的错误具有通用形状

ts
{ "message": "Internal Error" }

意外错误将通过handleError钩子，你可以在其中添加自己的错误处理 — 例如，将错误发送到报告服务，或返回一个自定义错误对象，该对象将变为$page.error。

响应永久链接

如果在handle或+server.js请求处理程序中发生错误，SvelteKit 将根据请求的Accept标头响应后备错误页面或错误对象的 JSON 表示。

你可以通过添加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 使用后备错误页面。

类型安全性永久链接

如果你正在使用 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属性。

进一步阅读永久链接

上一个钩子

下一个链接选项