<svelte:boundary>

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

Границы позволяют «отделить» части вашего приложения, чтобы вы могли:

отображать интерфейс, который должен показываться во время первоначального выполнения await-выражений
обрабатывать ошибки, возникающие при рендеринге или выполнении эффектов, и предоставлять интерфейс для отображения при возникновении ошибки

Если граница обрабатывает ошибку (с помощью сниппета failed или обработчика onerror, или обоих), её текущее содержимое будет удалено.

Параметры

Чтобы граница выполняла свою функцию, должен быть предоставлен хотя бы один из следующих элементов.

`pending`

Начиная со Svelte 5.36, границы со сниппетом pending могут содержать выражения await. Этот сниппет будет отображаться при создании границы и останется видимым, пока все выражения await внутри границы не будут выполнены (демонстрация):

<svelte:boundary>
  <p>{await delayed('привет!')}</p>

  {#snippet pending()}
    <p>загрузка...</p>
  {/snippet}
</svelte:boundary>

`failed`

Если предусмотрен сниппет failed, он будет отображаться при возникновении ошибки внутри границы, получая доступ к объекту error и функции reset для повторного создания содержимого (демонстрация):

<svelte:boundary>
  <FlakyComponent />

  {#snippet failed(error, reset)}
    <button onclick={reset}>упс! попробовать ещё раз</button>
  {/snippet}
</svelte:boundary>

Как и в случае со сниппетами, передаваемыми в компоненты, сниппет failed может быть передан явно как свойство…

<svelte:boundary {failed}>...</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 (или если вы повторно выбрасываете ошибку), она будет обработана родительской границей, если таковая существует.