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

Author: Reversean

packages/svelte-playground/README.md

@@ -55,6 +55,23 @@ Global browser error handlers that catch unhandled errors:
 
 **Note:** global errors will be caught using Hawk Catcher.
 
+### Error Boundaries (🟡)
+
+Svelte `<svelte:boundary>` catches errors during:
+
+- Component rendering (synchronous errors in component body)
+- Component initialization
+
+Example usage:
+
+```svelte
+<svelte:boundary onerror={handleBoundaryError} failed={fallback}>
+  <ErrorProneComponent />
+</svelte:boundary>
+```
+
+**Note:** error boundaries will be caught using Hawk Catcher.
+
 ## Error Test Pages
 
 The playground includes test pages to demonstrate each error catching mechanism:
@@ -68,3 +85,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.unhandledrejection`
+
+### Error Boundaries (🟡)
+
+3. **Component Render Error** (`/errors/component-render`)
+   - Demonstrates error during component rendering
+   - Caught by `<svelte:boundary>`
+

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

@@ -20,6 +20,14 @@
       href: '/errors/promise-rejection',
       category: 'Global Error Handlers (🔴)'
     },
+
+    // Error Boundaries
+    {
+      title: 'Component Rendering Error',
+      description: 'Error thrown during component render',
+      href: '/errors/component-render',
+      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/svelte-playground/src/routes/errors/component-render/+page.svelte

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

packages/svelte-playground/src/routes/errors/component-render/ErrorComponent.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  let { shouldError }: { shouldError: boolean } = $props();
+
+  if (shouldError) {
+    throw new Error('Rendering error caught by svelte:boundary');
+  }
+</script>
+
+<div>This should not render if error is thrown</div>