Skip to content

Commit 50c2087

Browse files
ReverseanReversean
committed
feat(svelte-integration): add global error handlers test pages in svelte playground
1 parent 5bbf3cf commit 50c2087

File tree

5 files changed

+130
-2
lines changed

5 files changed

+130
-2
lines changed

‎packages/svelte-playground/README.md‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ Test playground for Hawk Error Tracker integration with SvelteKit and Svelte.
66

77
- [Getting Started](#getting-started)
88
- [Hawk Integration](#hawk-integration)
9+
- [Error Handling](#error-handling)
10+
- [Error Test Pages](#error-test-pages)
911

1012
## Getting Started
1113

@@ -28,10 +30,10 @@ yarn dev
2830
Current integration in `hooks.client.ts`:
2931

3032
```typescript
31-
import Hawk from '@hawk.so/javascript';
33+
import HawkCatcher from '@hawk.so/javascript';
3234

3335
if (import.meta.env.VITE_HAWK_TOKEN) {
34-
new Hawk({
36+
new HawkCatcher({
3537
token: import.meta.env.VITE_HAWK_TOKEN
3638
});
3739
}
@@ -41,3 +43,31 @@ Hawk automatically registers global error handlers for:
4143

4244
- `window.onerror`
4345
- `window.onunhandledrejection`
46+
47+
**Note:** HawkCatcher is browser-only and cannot run on the server (uses `localStorage`, `window`, etc.). Server-side
48+
errors are not tracked automatically.
49+
50+
## Error Handling
51+
52+
### Global Error Handlers (🔴)
53+
54+
Global browser error handlers that catch unhandled errors:
55+
56+
- **`window.error`**
57+
- **`window.unhandledrejection`**
58+
59+
**Note:** global errors will be caught using Hawk Catcher.
60+
61+
## Error Test Pages
62+
63+
The playground includes test pages to demonstrate each error catching mechanism:
64+
65+
### Global Error Handlers (🔴)
66+
67+
1. **Runtime Error** (`/errors/runtime-error`)
68+
- Demonstrates synchronous error in event handler
69+
- Caught by `window.error`
70+
71+
2. **Promise Rejection** (`/errors/promise-rejection`)
72+
- Demonstrates unhandled Promise rejection
73+
- Caught by `window.unhandledrejection`

‎packages/svelte-playground/src/hooks.client.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,11 @@ if (import.meta.env.VITE_HAWK_TOKEN) {
55
token: import.meta.env.VITE_HAWK_TOKEN,
66
});
77
}
8+
9+
window.addEventListener('error', (event) => {
10+
console.error('🔴 [window.error]', event.error, `at ${event.filename}:${event.lineno}`);
11+
});
12+
13+
window.addEventListener('unhandledrejection', (event) => {
14+
console.error('🔴 [window.unhandledrejection]', event.reason);
15+
});

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,63 @@
1+
<script lang="ts">
2+
interface ErrorTest {
3+
title: string;
4+
description: string;
5+
href: string;
6+
category: string;
7+
}
8+
9+
const errorTests: ErrorTest[] = [
10+
// Window Error Handlers
11+
{
12+
title: 'Synchronous Runtime Error',
13+
description: 'Error thrown in event handler',
14+
href: '/errors/runtime-error',
15+
category: 'Global Error Handlers (🔴)'
16+
},
17+
{
18+
title: 'Unhandled Promise Rejection',
19+
description: 'Promise rejected without catch handler',
20+
href: '/errors/promise-rejection',
21+
category: 'Global Error Handlers (🔴)'
22+
},
23+
];
24+
25+
const categories = Array.from(new Set(errorTests.map(t => t.category)));
26+
</script>
27+
128
<svelte:head>
229
<title>Hawk Javascript SvelteKit Integration Playground</title>
330
</svelte:head>
31+
32+
<div class="container">
33+
<header>
34+
<h1>🧪 SvelteKit Error Handling Test Suite</h1>
35+
</header>
36+
37+
<div class="alert alert-warning">
38+
<strong>⚠️ Testing Instructions:</strong>
39+
<ul>
40+
<li>Open your browser's DevTools Console to see error logs</li>
41+
<li>Look for colored emoji markers:
42+
<ul>
43+
<li>🔴 = Caught by global <code>window.error</code> or <code>window.unhandledrejection</code></li>
44+
</ul>
45+
</li>
46+
<li>Each test demonstrates where errors are caught in the SvelteKit error handling hierarchy</li>
47+
</ul>
48+
</div>
49+
50+
{#each categories as category}
51+
<section>
52+
<h2>{category}</h2>
53+
<div class="grid">
54+
{#each errorTests.filter(t => t.category === category) as test}
55+
<a href={test.href} class="test-card" data-sveltekit-preload-data="off">
56+
<h3>{test.title}</h3>
57+
<p>{test.description}</p>
58+
</a>
59+
{/each}
60+
</div>
61+
</section>
62+
{/each}
63+
</div>

‎packages/svelte/playground/src/routes/errors/promise-rejection/+page.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
function triggerRejection() {
3+
Promise.reject(new Error('Unhandled promise rejection'));
4+
}
5+
</script>
6+
7+
<div class="container">
8+
<h1>Unhandled Promise Rejection Test</h1>
9+
<p>Click the button to trigger an unhandled promise rejection.</p>
10+
<p><strong>Caught by:</strong> <code>window.unhandledrejection</code> (🔴 red dot in console)</p>
11+
12+
<button onclick={triggerRejection}>
13+
Trigger Promise Rejection
14+
</button>
15+
</div>

‎packages/svelte/playground/src/routes/errors/runtime-error/+page.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
function triggerError() {
3+
throw new Error('Runtime error caught by window.onerror');
4+
}
5+
</script>
6+
7+
<div class="container">
8+
<h1>Window Error Handler Test</h1>
9+
<p>Click the button to trigger a runtime error.</p>
10+
<p><strong>Caught by:</strong> <code>window.onerror</code> (🔴 red dot in console)</p>
11+
12+
<button onclick={triggerError}>
13+
Trigger Runtime Error
14+
</button>
15+
</div>

0 commit comments

Comments
 (0)