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>