feat(sveltekit-integration): add error boundary test page in sveltekit playground

Author: Reversean

packages/sveltekit/playground/README.md

@@ -57,6 +57,30 @@ Global browser error handlers that catch unhandled errors:
 
 **Caught by Hawk Catcher.**
 
+### Error Boundaries (🟢)
+
+Svelte `<svelte:boundary>` catches errors during:
+
+- Component rendering (synchronous errors in component body)
+- Component initialization
+
+Example usage:
+
+```sveltehtml
+<svelte:boundary onerror={handleBoundaryError} {failed}>
+  <ErrorProneComponent />
+</svelte:boundary>
+
+{#snippet failed(error, reset)}
+  <div class="error-fallback">
+    <p>Error: {error.message}</p>
+    <button onclick={reset}>Reset</button>
+  </div>
+{/snippet}
+```
+
+**Not caught by Hawk Catcher.**
+
 ## Error Test Pages
 
 The playground includes test pages to demonstrate each error catching mechanism:
@@ -70,3 +94,10 @@ The playground includes test pages to demonstrate each error catching mechanism:
 2. **Promise Rejection** (`/errors/promise-rejection`)
    - Demonstrates unhandled Promise rejection
    - Caught by window event listener `unhandledrejection`
+
+### Error Boundaries (🟢) - Not caught by Hawk
+
+1. **Boundary Error** (`/errors/boundary`)
+   - Demonstrates svelte boundary feature
+   - Caught by `<svelte:boundary>`
+

packages/sveltekit/playground/src/routes/+page.svelte

@@ -20,6 +20,14 @@
       href: '/errors/promise-rejection',
       category: 'Global Error Handlers (🟡)'
     },
+
+    // Error Boundaries
+    {
+      title: 'Boundary Error',
+      description: 'Error caught by svelte:boundary',
+      href: '/errors/boundary',
+      category: 'Error Boundaries (🟢)'
+    },
   ];
 
   const categories = Array.from(new Set(errorTests.map(t => t.category)));
@@ -41,6 +49,7 @@
       <li>Look for colored emoji markers:
         <ul>
           <li>🟡 = Caught by global <code>window.error</code> or <code>window.unhandledrejection</code></li>
+          <li>🟢 = Caught by <code>&lt;svelte:boundary&gt;</code></li>
         </ul>
       </li>
       <li>Each test demonstrates where errors are caught in the SvelteKit error handling hierarchy</li>

packages/sveltekit/playground/src/routes/errors/boundary/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import ErrorComponent from './ErrorComponent.svelte';
+
+  let showError = $state(false);
+
+  function triggerError() {
+    showError = !showError;
+  }
+
+  function handleBoundaryError(error: Error) {
+    console.error('🟢 [svelte:boundary] Caught error:', error);
+  }
+</script>
+
+<div class="container">
+  <h1>Error Boundary Test</h1>
+  <p>Click the button to trigger a rendering error.</p>
+  <p><strong>Caught by:</strong> <code>&lt;svelte:boundary&gt;</code> (🟢 green dot in console)</p>
+
+  <button onclick={triggerError} disabled={showError}>
+    Trigger Error
+  </button>
+
+  {#snippet failed(error, reset)}
+    <div class="error-fallback">
+      <h3>Error Boundary Caught Error</h3>
+      <p>Message: {error.message}</p>
+      <button onclick={() => { showError = false; reset(); }}>Reset</button>
+    </div>
+  {/snippet}
+
+  <svelte:boundary onerror={handleBoundaryError} {failed}>
+    {#if showError}
+      <ErrorComponent/>
+    {/if}
+  </svelte:boundary>
+</div>

packages/sveltekit/playground/src/routes/errors/boundary/ErrorComponent.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  throw new Error('Error caught by svelte:boundary');
+</script>
+
+<div>This should not render if error is thrown</div>