エラーによってアプリが壊れた状態になるのを防ぐために、<svelte:boundary> 要素を使用してエラー境界内にエラーを閉じ込めることができます。

この例では、<FlakyComponent> にバグが含まれています。ボタンをクリックすると mouse が null に設定されるため、テンプレート内の {mouse.x} および {mouse.y} 式がレンダリングに失敗します。

理想的な世界では、単にバグを修正します。ただし、それが常に選択肢とは限りません。コンポーネントが他のユーザーに属している場合もあれば、予期しない事態に備える必要がある場合もあります。まず、<FlakyComponent /> を <svelte:boundary> でラップします。

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

今のところ、境界線はハンドラを指定していないため、何も変更されていません。エラーが発生したときに表示するUIを提供するために、failed スニペットを追加します。

<svelte:boundary>
	<FlakyComponent />

	{#snippet failed(error)}
		<p>Oops! {error.message}</p>
	{/snippet}
</svelte:boundary>

これで、ボタンをクリックすると、境界線の内容がスニペットに置き換えられます。failed に渡される2番目の引数を利用して、リセットを試みることができます。

<svelte:boundary>
	<FlakyComponent />

	{#snippet failed(error, reset)}
		<p>Oops! {error.message}</p>
		<button onclick={reset}>Reset</button>
	{/snippet}
</svelte:boundary>

また、onerror ハンドラを指定することもできます。これは、failed スニペットに渡されるのと同じ引数で呼び出されます。

<svelte:boundary onerror={(e) => console.error(e)}>
	<FlakyComponent />

	{#snippet failed(error, reset)}
		<p>Oops! {error.message}</p>
		<button onclick={reset}>Reset</button>
	{/snippet}
</svelte:boundary>

これは、エラーに関する情報をレポートサービスに送信したり、エラー境界自体の外側にUIを追加したりするのに役立ちます。