svelte:boundaryについて

昨日12月1日にSvelte5.3.0が出されましたがsvelte:boundaryの機能はこの5.3.0 で追加されました。この記事はそのドキュメントを翻訳しました。Bluesky上のSvelteによるとクリスマスまで毎日一つ発表すると言ってます。

svelte:boundaryは、アプリの一部でのエラーがアプリ全体を壊すことを防ぎ、それらのエラーから回復するために使用します。
<svelte:boundary>のcchildrenのレンダリングまたは更新中、あるいはその中に含まれる $effect 関数の実行中にエラーが発生した場合、そのコンテンツは削除されます。
レンダリングプロセス外で発生するエラー例えばイベントハンドラ内などは、エラーboundaryによって捕捉されません。

プロパティ

バウンダリが機能するためには、failed と onerror の少なくとも一方を提供する必要があります。

failed

failed スニペットが提供された場合、throwされたエラーと、コンテンツを再作成する reset 関数と共にレンダリングされます。(デモ)

<svelte:boundary>
	<FlakyComponent />

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

コンポーネントに渡されるスニペットと同様に、failed スニペットは明示的にプロパティとして渡すこともできます。

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

または上記のようにboundary内で直接宣言することもできます。

onerror

onerror 関数が提供された場合、同じ 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 関数内でエラーが発生した場合（またはエラーを再スローした場合）、親バウンダリが存在する場合はそこで処理されます。