<svelte:boundary>

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

Cette fonctionnalité a été ajoutée avec la version 5.3.0

Les frontières (boundaries) vous permettent de compartimenter votre application, afin que vous puissiez :

• fournir une interface à afficher lorsque les expressions await sont en cours de première résolution
• gérer les erreurs qui se produisent lors du rendu ou lors de l’exécution des effets, et fournir une interface à afficher lorsqu’une erreur se produit

Si une frontière gère une erreur (avec un snippet failed ou un gestionnaire onerror, ou les deux), son contenu existant sera supprimé.

Les erreurs se produisant à l’extérieur du processus de rendu (par exemple, dans les gestionnaires d’évènement ou après un setTimeout ou du travail asynchrone) ne sont pas attrapées par les frontières d’erreur.

Propriétés

Pour que les frontières puissent fonctionner, l’une des propriétés suivantes doit être fournie en props.

pending

Ce snippet sera affiché lors de la création initiale de la frontière, et restera visible tant que les expressions await au sein de la frontière ne sont pas résolues (démo):

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

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

Le snippet pending ne sera pas affiché pour les mises à jour asynchrones suivantes — pour celles-ci, vous pouvez utiliser $effect.pending().

Dans le bac à sable, votre application est rendue au sein d’une frontière ayant un snippet pending vide, afin que vous puissez utiliser await sans avoir à en créer un.

failed

Si un snippet failed est fourni, il sera rendu lorsque l’erreur sera levée au sein d’une frontière, avec l’error et une fonction reset permettant de recréer le contenu (demo).

<svelte:boundary>
	<ComposantFragile />

	{#snippet failed(error, reset)}
		<button onclick={reset}>oups ! essaye encore</button>
	{/snippet}
</svelte:boundary>

Comme avec tout snippet passé à un composant, le snippet failed peut être passé explicitement comme propriété...

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

... ou implicitement en le déclarant directement dans la frontière, comme montré dans la l’exemple ci-dessus.

onerror

Si une fonction onerror est fournie, celle-ci sera appelée avec les même arguments error et reset que le snippet failed. Cela est utile pour traiter les erreurs via des services de gestion d’erreur...

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

... ou pour utiliser error et reset en dehors de la frontière elle-même :

<script>
	let error = $state(null);
	let reset = $state(() => {});

	function onerror(e, r) {
		error = e;
		reset = r;
	}
</script>

<svelte:boundary {onerror}>
	<ComposantFragile />
</svelte:boundary>

{#if error}
	<button onclick={() => {
		error = null;
		reset();
	}}>
		oups ! essaye encore
	</button>
{/if}

Si une erreur se produit dans la fonction onerror (ou si vous y levez une erreur), celle-ci sera gérée par une éventuelle frontière parente, si elle existe.