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 関数が指定されている場合、同じ 2 つの 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>