<svelte:boundary>

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

この機能は 5.3.0 で追加されました

boundary (境界) を使用すると、アプリの一部で発生したエラーがアプリ全体を壊すのを防ぎ、それらのエラーから回復することができます。

<svelte:boundary> 内の子要素をレンダリングまたは更新するとき、あるいはそれに含まれる $effect 関数の実行中にエラーが発生すると、そのコンテンツは削除されます。

レンダリングプロセスの外で発生するエラー (例えば、イベントハンドラー内で発生するエラーや、setTimeoutや非同期処理の後のエラー) は error boundary では捕捉されません。

プロパティ

boundary を機能させるには、以下のうち、1つ以上を提供する必要があります。

pending

Svelte 5.36 以降、pending snippet を持つ boundary は await 式を含むことができます。この snippet は boundary が最初に作成されたときに表示され、boundary 内のすべての await 式が解決されるまで表示され続けます (デモ)。

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

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

pending snippet は、後続の非同期更新では表示されません — これについては、$effect.pending() を使用できます。

[playground]では、空の pending snippet を持つ boundary 内でアプリがレンダリングされるため、boundary を作成せずに await を使用できます。

failed

failed snippet が提供される場合、それは boundary 内でエラーがスローされたときにレンダリングされます。failed snippet にはその error と、コンテンツを再作成する reset 関数が引数として渡されます (デモ)。

<svelte:boundary>
	<FlakyComponent />

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

コンポーネントに渡される snippet と同様に、failed snippet はプロパティとして明示的に渡すことができます...

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

...または、上記の例のように boundary 内に直接記述することで暗黙的に渡すこともできます。

onerror

onerror 関数が提供されると、failed と同じ error と reset の2つの引数とともに呼び出されます。これはエラーレポートサービスでエラーを追跡するのに役立ちます...

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

...または、error と reset を 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 関数内でエラーが発生した場合 (またはエラーを再スローした場合)、もし親の boundary が存在すればそこで処理されます。