为了防止错误导致应用程序处于损坏状态，你可以使用 <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 非常有用。
上一页 下一页
1
2
3
4
5
6
<script>
import FlakyComponent from './FlakyComponent.svelte';
</script>
<FlakyComponent />