为了防止错误导致应用程序处于损坏状态,你可以使用 <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 />