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

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

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

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

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

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

## 
属性

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

### 
`待处理`

截至 Svelte 5.36，具有`pending`片段的边界可以包含`await`表达式。此片段将在边界首次创建时显示，并且将保持可见，直到边界内的所有`await`表达式都得到解决（[演示](/playground/untitled#H4sIAAAAAAAAE21QQW6DQAz8ytY9BKQVpFdKkPqDHnorPWzAaSwt3tWugUaIv1eE0KpKD5as8YxnNBOw6RAKKOOAVrA4up5bEy6VGknOyiO3xJ8qMnmPAhpOZDFC8T6BXPyiXADQ258X77P1FWg4moj_4Y1jQZZ49W0CealqruXUcyPkWLVozQXbZDC2R606spYiNo7bqA7qab_fp2paFLUElD6wYhzVa3AdRUySgNHZAVN1qDZaLRHljTp0vSTJ9XJjrSbpX5f0eZXN6zLXXOa_QfmurIVU-moyoyH5ib87o7XuYZfOZe6vnGWmx1uZW7lJOq9upa-sMwuUZdkmmfIbfQ1xZwwaBL8ECgk9zh8axJAdiVsoTsZGnL8Bg4tX_OMBAAA=)）：

```svelte
<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()`]($effect#$effect.pending).

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

### 
`失败`

如果提供了一个`失败的`代码片段，当在边界内抛出错误时，它将被渲染，同时显示`错误`和一个`重置`函数，该函数重新创建内容（[演示](/playground/hello-world#H4sIAAAAAAAAE3VRy26DMBD8lS2tFCIh6JkAUlWp39Cq9EBg06CAbdlLArL87zWGKk8ORnhmd3ZnrD1WtOjFXqKO2BDGW96xqpBD5gXerm5QefG39mgQY9EIWHxueRMinLosti0UPsJLzggZKTeilLWgLGc51a3gkuCjKQ7DO7cXZotgJ3kLqzC6hmex1SZnSXTWYHcrj8LJjWTk0PHoZ8VqIdCOKayPykcpuQxAokJaG1dGybYj4gw4K5u6PKTasSbjXKgnIDlA8VvUdo-pzonraBY2bsH7HAl78mKSHZpgIcuHjq9jXSpZSLixRlveKYQUXhQVhL6GPobXAAb7BbNeyvNUs4qfRg3OnELLj5hqH9eQZqCnoBwR9lYcQxuVXeBzc8kMF8yXY4yNJ5oGiUzP_aaf_waTRGJib5_Ad3P_vbCuaYxzeNpbU0eUMPAOKh7Yw1YErgtoXyuYlPLzc10_xo_5A91zkQL_AgAA)）：

```svelte
<svelte:boundary>
	<FlakyComponent />

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

> \[!注意\] 与传递给组件的[代码片段](snippet#Passing-snippets-to-components)一样，可以显式地将`失败的`代码片段作为属性传递...
> 
> ```svelte
> <svelte:boundary {failed}>...</svelte:boundary>
> ```
> 
> ...或隐式地通过在边界内直接声明，如上例所示。

### `onerror`

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

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

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

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