Error Boundaries

<script lang="ts">
  import ThrowOnSsr from './ThrowOnSsr.svelte';
  import ThrowOnClient from './ThrowOnClient.svelte';
  import ThrowOnServerIsland from './ThrowOnServerIsland.svelte';
  import HealthyServerIsland from './HealthyServerIsland.svelte';
  import { files } from './files.ts';

  const sources = await loadSources(files);
</script>

{#snippet caughtFallback(error: unknown)}
  <div class="caught">
    Caught by user-written boundary:
    <code>{error instanceof Error ? error.message : String(error)}</code>
  </div>
{/snippet}

<section class="mode">
  <header>
    <h2>1. Non-hydrated component + user <code>&lt;svelte:boundary&gt;</code></h2>
    <p>
      Non-hydrated components don't get an automatic boundary. If they can throw during SSR, wrap them in a hand-written <code>&lt;svelte:boundary&gt;</code> — otherwise the throw
      bubbles up and crashes the whole request.
    </p>
  </header>
  <svelte:boundary failed={caughtFallback}><ThrowOnSsr label="ThrowOnSsr (no directive)" /></svelte:boundary>
</section>

<section class="mode">
  <header>
    <h2>2. <code>mochi:hydrate</code> — SSR throw (recovery)</h2>
    <p>
      The framework auto-wraps every <code>mochi:hydrate</code> island in a boundary. This island throws on the server only — the boundary catches the SSR throw and the rest of the
      page renders unaffected.
    </p>
  </header>
  <ThrowOnSsr mochi:hydrate label="ThrowOnSsr" />
</section>

<section class="mode">
  <header>
    <h2>3. <code>mochi:hydrate</code> — client throw</h2>
    <p>
      SSR is fine, but the script throws synchronously once the island tries to hydrate. The defensive try/catch around <code>hydrate()</code> catches it and swaps the island for the
      failure stub — the rest of the page (already rendered on the server) is untouched.
    </p>
  </header>
  <ThrowOnClient mochi:hydrate label="ThrowOnClient" />
</section>

<section class="mode">
  <header>
    <h2>4. <code>mochi:defer</code> — server island throw</h2>
    <p>
      Server islands render at a separate endpoint. When that render throws, the endpoint returns a 200 with an error stub — the browser doesn't waste retries on a deterministic
      failure. The user-supplied loading children stay until the response arrives.
    </p>
  </header>
  <ThrowOnServerIsland mochi:defer label="ThrowOnServerIsland">
    <div class="placeholder">Loading from server…</div>
  </ThrowOnServerIsland>
</section>

<section class="mode">
  <header>
    <h2>
      5. <code>mochi:defer</code> — healthy island, inner <code>mochi:hydrate</code> client throw
    </h2>
    <p>
      The server island itself renders successfully — it's the inner <code>mochi:hydrate</code>
      child that throws once it tries to hydrate on the client. The child's auto-boundary catches its own failure, so the rest of the server island content stays intact.
    </p>
  </header>
  <HealthyServerIsland mochi:defer>
    <div class="placeholder">Loading from server…</div>
  </HealthyServerIsland>
</section>