<svelte:boundary>
<svelte:boundary onerror={handler}>...</svelte:boundary>Границы позволяют вам защититься от ошибок в части вашего приложения, которые могут привести к сбою всего приложения, и восстановиться после этих ошибок.
Если ошибка происходит во время рендеринга или обновления дочерних элементов <svelte:boundary>, или при выполнении любых функций $effect, содержащихся в них, содержимое будет удалено.
Ошибки, возникающие вне процесса рендеринга (например, в обработчиках событий или после setTimeout или асинхронной работы), не перехватываются границами ошибок.
Параметры
Чтобы граница ошибок выполняла свою функцию, необходимо указать один или оба параметра: failed и onerror.
failed
Если предоставлен фрагмент failed, он будет отрендерен с ошибкой, которая была выброшена, а также с функцией reset, которая воссоздаёт содержимое (демонстрация):
<svelte:boundary>
<FlakyComponent />
{#snippet failed(error, reset)}
<button onclick={reset}>упс! попробовать ещё раз</button>
{/snippet}
</svelte:boundary>onerror
Если предоставлена функция onerror, она будет вызвана с теми же двумя аргументами: 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();
}}>
упс! попробовать ещё раз
</button>
{/if}Если ошибка происходит внутри функции onerror (или если вы повторно выбрасываете ошибку), она будет обработана родительской границей, если таковая существует.