Svelte特殊元素

<svelte:boundary>

<svelte:boundary onerror={handler}>...</svelte:boundary>

此功能在 5.3.0 版本中添加

边界允许你防止应用程序的某一部分出错进而影响整个应用程序，并且可以从这些错误中恢复。

如果在渲染或更新 <svelte:boundary> 的子组件时发生错误，或在执行其中包含的任何 $effect 函数时发生错误，内容将被移除。

在渲染过程之外发生的错误（例如，在事件处理程序中）不会被错误边界捕获。

属性

要使边界发挥作用，必须提供 failed 和 onerror 中的一个或两个。

failed

如果提供了 failed 代码片段，它将与抛出的错误一起渲染，并提供一个重新创建内容的 reset 函数（demo）：

<svelte:boundary>
	<FlakyComponent />

	{#snippet failed(error, reset)}
		<button onclick={reset}>糟糕！再试一次</button>
	{/snippet}
</svelte:boundary>

与传递给组件的代码片段一样，failed 代码片段可以作为属性显式传递...
<svelte:boundary {failed}>...</svelte:boundary>
...或者像上面的例子那样直接在边界内部隐式声明。

onerror

如果提供了 onerror 函数，它将被调用并传入相同的两个参数 error 和 reset 。这对于使用错误报告服务跟踪错误很有用...

<svelte:boundary onerror={(e) => report(e)}>
	...
</svelte:boundary>

...或者在边界本身之外使用 error 和 reset：

<script>
	let error = $state(null);
	let reset = $state(() => {});

	function onerror(e, r) {
		error = e;
		reset = r;
	}
</script>

<svelte:boundary {onerror}>
	<FlakyComponent />
</svelte:boundary>

{#if error}
	<button onclick={() => {
		error = null;
		reset();
	}}>
		糟糕！再试一次
	</button>
{/if}

如果在 onerror 函数内部发生错误（或者如果你重新抛出错误），它将被父边界处理（如果存在的话）。

在 GitHub 编辑此页面

嵌套的 <style> 元素 <svelte:window>