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

Author: Reversean

packages/sveltekit/playground/README.md

@@ -81,6 +81,12 @@ Example usage:
 
 **Not caught by Hawk Catcher.**
 
+### SSR Errors (🔴)
+
+Server-side errors in `load` functions are caught by `handleError` hook in `hooks.server.ts`.
+
+**Not caught by Hawk Catcher.**
+
 ## Error Test Pages
 
 The playground includes test pages to demonstrate each error catching mechanism:
@@ -101,3 +107,8 @@ The playground includes test pages to demonstrate each error catching mechanism:
    - Demonstrates svelte boundary feature
    - Caught by `<svelte:boundary>`
 
+### SSR Errors (🔴) - Not caught by Hawk
+
+1. **Server-side Error** (`/errors/server-error`)
+   - Demonstrates error in `load` function
+   - Caught by `handleError` in `hooks.server.ts`

packages/sveltekit/playground/src/hooks.server.ts

@@ -0,0 +1,10 @@
+import type { HandleServerError } from '@sveltejs/kit';
+
+export const handleError: HandleServerError = async ({ error, event, status, message }) => {
+  console.error('🔴 [server.handleError]', error, `at ${event.url.pathname}`);
+
+  return {
+    message,
+    status,
+  };
+};

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

@@ -28,6 +28,14 @@
       href: '/errors/boundary',
       category: 'Error Boundaries (🟢)'
     },
+
+    // SSR Errors
+    {
+      title: 'Server-side Error',
+      description: 'Error thrown in load function',
+      href: '/errors/server-error',
+      category: 'SSR Errors (🔴)'
+    },
   ];
 
   const categories = Array.from(new Set(errorTests.map(t => t.category)));
@@ -48,6 +56,7 @@
       <li>Open your browser's DevTools Console to see error logs</li>
       <li>Look for colored emoji markers:
         <ul>
+          <li>🔴 = SSR error (caught by <code>handleError</code> in hooks.server.ts)</li>
           <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>

packages/sveltekit/playground/src/routes/errors/server-error/+error.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { goto } from '$app/navigation';
+
+  function reset() {
+    goto('/errors/server-error');
+  }
+</script>
+
+<div class="container">
+  <h1>Server-side Error Test</h1>
+  <p><strong>Caught by:</strong> <code>handleError</code> in hooks.server.ts (🔴 red dot in console)</p>
+
+  <div class="error-fallback">
+    <h3>Server Error Caught</h3>
+    <p>Status: {$page.status}</p>
+    <p>Message: {$page.error?.message}</p>
+    <button onclick={reset}>Reset</button>
+  </div>
+</div>

packages/sveltekit/playground/src/routes/errors/server-error/+page.server.ts

@@ -0,0 +1,13 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+  const shouldError = url.searchParams.get('error') === 'true';
+
+  if (shouldError) {
+    throw new Error('Server-side error in load function');
+  }
+
+  return {
+    message: 'Server data loaded successfully',
+  };
+};

packages/sveltekit/playground/src/routes/errors/server-error/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+
+  let { data } = $props();
+
+  function triggerError() {
+    goto('?error=true');
+  }
+</script>
+
+<div class="container">
+  <h1>Server-side Error Test</h1>
+  <p>Click the button to trigger a server-side error in <code>load</code> function.</p>
+  <p><strong>Caught by:</strong> <code>handleError</code> in hooks.server.ts (🔴 red dot in console)</p>
+
+  <button onclick={triggerError}>
+    Trigger Server Error
+  </button>
+
+  <div class="success-message">
+    <p>{data.message}</p>
+  </div>
+</div>