<svelte:boundary>

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

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

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

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

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

プロパティ

boundary を機能させるには、failed または onerror のいずれか、または両方を提供する必要があります。

failed

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 が存在すればそこで処理されます。