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

为了防止错误导致应用程序处于损坏状态,你可以使用 <svelte:boundary> 元素将它们包含在一个错误边界内。

在这个例子中,<FlakyComponent> 包含一个 bug — 点击按钮会将 mouse 设置为 null,这意味着模板中的 {mouse.x}{mouse.y} 表达式将无法渲染。

在理想情况下,我们应该直接修复这个 bug。但这并不总是可行的选择 — 有时组件属于其他人,有时你只是需要防范意外情况。首先用 <svelte:boundary> 包装 <FlakyComponent />

App
<svelte:boundary>
	<FlakyComponent />
</svelte:boundary>

到目前为止,还没有任何变化,因为边界没有指定处理程序。添加一个 failed 代码片段来提供发生错误时显示的 UI:

App
<svelte:boundary>
	<FlakyComponent />

	{#snippet failed(error)}
		<p>糟糕!{error.message}</p>
	{/snippet}
</svelte:boundary>

现在,当我们点击按钮时,边界的内容会被代码片段替换。我们可以通过使用传递给 failed 的第二个参数来尝试重置:

App
<svelte:boundary>
	<FlakyComponent />

	{#snippet failed(error, reset)}
		<p>Oops! {error.message}</p>
		<button onclick={reset}>Reset</button>
	{/snippet}
</svelte:boundary>

我们还可以指定一个 onerror 处理程序,它会用与传递给 failed 代码片段相同的参数进行调用:

App
<svelte:boundary onerror={(e) => console.error(e)}>
	<FlakyComponent />

	{#snippet failed(error, reset)}
		<p>糟糕!{error.message}</p>
		<button onclick={reset}>重置</button>
	{/snippet}
</svelte:boundary>

这对于将错误信息发送到报告服务,或在错误边界之外添加 UI 非常有用。

在 GitHub 编辑此页面

上一页 下一页
1
2
3
4
5
6
<script>
	import FlakyComponent from './FlakyComponent.svelte';
</script>
 
<FlakyComponent />