Svelte特殊元素

<svelte:boundary>

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

此功能在 5.3.0 版本中添加。

边界允许您防止应用程序一部分中的错误影响整个应用程序，并从这些错误中恢复。

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

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

属性

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

failed

如果提供了 failed 代码段，它将与抛出的错误一起渲染，以及一个 reset 函数，该函数重新创建内容 (演示)

<svelte:boundary>
	<FlakyComponent />

	{#snippet failed(error, reset)}
		<button onclick={reset}>oops! try again</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();
	}}>
		oops! try again
	</button>
{/if}

如果在 onerror 函数内部发生错误（或重新抛出错误），则如果存在父边界，则将由父边界处理。

在 GitHub 上编辑此页面

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