<svelte:boundary>

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

[!注意] 此功能添加于 5.3.0

边界允许您“隔离”应用程序的部分，以便您：

• 提供当 await 表达式首次解析时应显示的 UI
• 处理渲染或运行效果时发生的错误，并在发生错误时提供应渲染的用户界面

如果边界处理了一个错误（使用failed代码片段或onerror处理器，或两者都有），其现有内容将被删除。

[!注意] 在渲染过程之外发生的错误（例如，在事件处理器中或在 setTimeout 或异步工作之后）不会被错误边界捕获。

属性

为了边界执行任何操作，必须提供以下之一。

待处理

截至 Svelte 5.36，具有pending片段的边界可以包含await表达式。此片段将在边界首次创建时显示，并且将保持可见，直到边界内的所有await表达式都得到解决（演示）：

<svelte:boundary>
	<p>{await delayed('hello!')}</p>

	{#snippet pending()}
		<p>loading...</p>
	{/snippet}
</svelte:boundary>

The pending snippet will not be shown for subsequent async updates — for these, you can use $effect.pending().

[!注意] 在沙盒中，您的应用在一个带有空挂起代码片段的边界内渲染，这样您就可以使用await而无需创建一个。

失败

如果提供了一个失败的代码片段，当在边界内抛出错误时，它将被渲染，同时显示错误和一个重置函数，该函数重新创建内容（演示）：

<svelte:boundary>
	<FlakyComponent />

	{#snippet failed(error, reset)}
		<button onclick={reset}>oops! try again</button>
	{/snippet}
</svelte:boundary>

[!注意] 与传递给组件的代码片段一样，可以显式地将失败的代码片段作为属性传递...

<svelte:boundary {failed}>...</svelte:boundary>

...或隐式地通过在边界内直接声明，如上例所示。

onerror

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

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

...或使用错误和重置在边界之外：

<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 函数内部发生错误（或者如果重新抛出错误），如果存在父边界，它将被处理。