Error boundary

Using <svelte:boundary> to catch errors

Pattern Usage:

<svelte:boundary onerror={(error) => {
  // Handle error
}}>
  {#snippet failed(error, reset)}
    <div>
      <p>Error: {error.message}</p>
      <button onclick={reset}>Retry</button>
    </div>
  {/snippet}

  <!-- Content that might throw errors -->
  {#await errorProneQuery()}
    <p>Loading...</p>
  {:then data}
    <p>{data}</p>
  {/await}
</svelte:boundary>

Live Demo:

Current: Success Query

Loading data...

How it works: <svelte:boundary> catches errors thrown by queries (and any other code) within its scope. When an error occurs, it renders the {#snippet failed} with the error object and a reset() function to retry. This provides a clean way to handle errors with custom UI and recovery options. Toggle the checkbox above to trigger an error and see the boundary in action.