<svelte:boundary>

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

Заметка

Эта функция была добавлена в 5.3.0

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

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

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

Заметка

Ошибки, возникающие вне процесса рендеринга (например, в обработчиках событий, после setTimeout или асинхронных операциях), не перехватываются границами обработки ошибок.

Параметры

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

pending

Этот сниппет будет показан при первом создании границы и останется видимым до тех пор, пока все выражения 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 (или если вы повторно выбрасываете ошибку), она будет обработана родительской границей, если таковая существует.