为了防止错误导致你的应用处于损坏状态，你可以使用 <svelte:boundary> 元素将它们包含在错误边界内。
在这个示例中，<FlakyComponent> 包含一个错误——点击按钮会将 mouse 设置为 null，这意味着模板中的 {mouse.x} 和 {mouse.y} 表达式将无法渲染。
在理想情况下，我们会简单地修复该错误。但这不是总能实现的——有时组件属于其他人，有时你只需要防范意外情况。首先用 <svelte:boundary> 包裹 <FlakyComponent />
应用
<svelte:boundary>
<FlakyComponent />
</svelte:boundary>到目前为止，没有任何变化，因为边界没有指定处理程序。添加一个 failed 代码片段 来提供一些 UI，以显示错误发生时的情况
应用
<svelte:boundary>
<FlakyComponent />
{#snippet failed(error)}
<p>Oops! {error.message}</p>
{/snippet}
</svelte:boundary>现在，当我们点击按钮时，边界的内容将替换为代码片段。我们可以尝试通过利用传递给 failed 的第二个参数来重置某些内容
应用
<svelte:boundary>
<FlakyComponent />
{#snippet failed(error, reset)}
<p>Oops! {error.message}</p>
<button onclick={reset}>Reset</button>
{/snippet}
</svelte:boundary>我们还可以指定一个 onerror 处理程序，该处理程序将使用传递给 failed 代码片段的相同参数进行调用
应用
<svelte:boundary onerror={(e) => console.error(e)}>
<FlakyComponent />
{#snippet failed(error, reset)}
<p>Oops! {error.message}</p>
<button onclick={reset}>Reset</button>
{/snippet}
</svelte:boundary>这对于将有关错误的信息发送到报告服务或在错误边界本身之外添加 UI 很有用。
上一个 下一个
1
2
3
4
5
6
<script>
import FlakyComponent from './FlakyComponent.svelte';
</script>
<FlakyComponent />