Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

handleError 钩子允许你拦截意外错误并触发一些行为,比如发送消息到 Slack 频道或将数据发送到错误日志服务。

正如你在之前的练习中所了解的,如果一个错误不是通过 @sveltejs/kit 中的 error 函数创建的,那么它就是意外的。这通常意味着你的应用程序中有需要修复的地方。默认行为是记录错误:

src/hooks.server
export function handleError({ event, error }) {
	console.error(error.stack);
}

如果你导航到 /the-bad-place,你会看到这个效果 — 错误页面会显示,如果你打开终端(使用 URL 栏右侧的按钮),你会看到来自 src/routes/the-bad-place/+page.server.js 的消息。

注意,我们不会向用户显示错误消息。这是因为错误消息可能包含敏感信息,这些信息最好的情况下会让用户感到困惑,最坏的情况下可能会被不法分子利用。相反,您的应用程序中可用的错误对象 — 在你的 +error.svelte 页面中表示为 page.error,或在 src/error.html 中表示为 %sveltekit.error% — 仅仅是这样的:

{
	message: 'Internal Error' // 或者对于 404 错误显示 'Not Found'
}

在某些情况下,你可能想要自定义这个对象。为此,你可以从 handleError 返回一个对象:

src/hooks.server
export function handleError({ event, error }) {
	console.error(error.stack);

	return {
		message: 'everything is fine',
		code: 'JEREMYBEARIMY'
	};
}

现在你可以在自定义错误页面中引用除 message 之外的属性。创建 src/routes/+error.svelte

src/routes/+error
<script>
	import { page } from '$app/state';
</script>

<h1>{page.status}</h1>
<p>{page.error.message}</p>
<p>error code: {page.error.code}</p>
<script lang="ts">
	import { page } from '$app/state';
</script>

<h1>{page.status}</h1>
<p>{page.error.message}</p>
<p>error code: {page.error.code}</p>

在 GitHub 编辑此页面

上一页 下一页
1
<h1>home</h1>