Skip to content

Commit 9501e2e

Browse files
committed
feat(svelte-integration): add Hawk Catcher integration and error handling playground
1 parent 001c8ab commit 9501e2e

File tree

37 files changed

+1881
-0
lines changed

37 files changed

+1881
-0
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_HAWK_TOKEN=your_integration_token_here
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Dependencies
2+
node_modules
3+
4+
# Build output
5+
.output
6+
.vercel
7+
.netlify
8+
.wrangler
9+
.svelte-kit
10+
build
11+
dist
12+
13+
# OS
14+
.DS_Store
15+
Thumbs.db
16+
17+
# IDE
18+
.idea/
19+
20+
# Environment
21+
.env
22+
.env.*
23+
!.env.example
Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# Hawk Error Tracker - SvelteKit Playground
2+
3+
Test playground for Hawk Error Tracker integration with SvelteKit and Svelte 5.
4+
5+
## Table of Contents
6+
7+
- [Getting Started](#getting-started)
8+
- [What Hawk Catches](#what-hawk-catches)
9+
- [Error Test Scenarios](#error-test-scenarios)
10+
- [Testing Guide](#testing-guide)
11+
12+
## Getting Started
13+
14+
### Prerequisites
15+
16+
- Node.js 18+
17+
- Yarn 1.x
18+
19+
### Setup
20+
21+
1. Install dependencies:
22+
23+
```shell
24+
yarn install
25+
```
26+
27+
2. Configure Hawk token:
28+
29+
```shell
30+
cp .env.example .env
31+
```
32+
33+
Then add your token from [hawk.so](https://garage.hawk.so) to `.env`:
34+
35+
```env
36+
VITE_HAWK_TOKEN=your_integration_token_here
37+
```
38+
39+
3. Start development server:
40+
41+
```shell
42+
yarn dev
43+
```
44+
45+
## What Hawk Catches
46+
47+
### ✅ Automatically Caught
48+
49+
Hawk automatically catches these errors via `window.onerror` and `window.onunhandledrejection`:
50+
51+
- Event handler errors (`onclick`, `onsubmit`, etc.)
52+
- Lifecycle errors (`onMount`, `onDestroy`)
53+
- Reactive errors (`$effect`, `$derived`)
54+
- Async errors (`setTimeout`, `setInterval`)
55+
- Unhandled promise rejections
56+
- Component rendering errors
57+
58+
### ❌ Not Caught
59+
60+
- Form validation errors (intentional, use `fail()`)
61+
- Errors caught by `<svelte:boundary>` (requires manual `hawk.send()`)
62+
- SvelteKit `handleError` hook errors (requires manual `hawk.send()`)
63+
64+
## Error Test Scenarios
65+
66+
Visit `/errors` to test 14 error scenarios:
67+
68+
### Load Functions
69+
70+
- **Load Expected** - `error()` helper in `+page.ts`
71+
- **Load Unexpected** - Direct throw in `+page.ts`
72+
- **Server Load** - Error in `+page.server.ts`
73+
74+
### Component Lifecycle
75+
76+
- **onMount Error** - Error in `onMount()` hook
77+
- **$effect Error** - Error in Svelte 5 `$effect` rune
78+
79+
### Event Handlers
80+
81+
- **Click Handler** - Error in `onclick`
82+
- **Submit Handler** - Error in form `onsubmit`
83+
84+
### Async Errors
85+
86+
- **setTimeout Error** - Error inside `setTimeout`
87+
- **Promise Rejection** - Unhandled promise rejection
88+
89+
### Form Actions
90+
91+
- **Form Validation** - `fail()` helper (not tracked)
92+
- **Form Unexpected** - Unexpected form action error
93+
94+
### Error Boundaries
95+
96+
- **Boundary Render** - Component rendering error
97+
- **Boundary Effect** - `$effect` error inside boundary
98+
99+
### Stores
100+
101+
- **Store Subscription** - Error in store callback
102+
103+
## Testing Guide
104+
105+
### Manual Testing
106+
107+
```bash
108+
yarn dev
109+
```
110+
111+
1. Open `http://localhost:5173/errors`
112+
2. Open DevTools Console (F12)
113+
3. Click each test card
114+
4. Trigger the error
115+
5. Check Hawk dashboard for tracked errors
116+
117+
### Console Markers
118+
119+
| Marker | Handler | Description |
120+
|--------|---------------------|------------------------------|
121+
| 🔴 | `handleError` hook | Load/form action errors |
122+
| 🟡 | Global handlers | Event/async/lifecycle errors |
123+
| 🟢 | `<svelte:boundary>` | Component rendering errors |
124+
125+
### Expected Behavior
126+
127+
| Error Type | Caught by Hawk | Notes |
128+
|------------------|----------------|----------------------------|
129+
| Event handlers || Auto via `window.onerror` |
130+
| Lifecycle hooks || Auto via `window.onerror` |
131+
| Async errors || Auto via global handlers |
132+
| Load functions || Needs manual `hawk.send()` |
133+
| Form actions || Needs manual `hawk.send()` |
134+
| Error boundaries || Needs manual `hawk.send()` |
135+
136+
## Integration
137+
138+
Current integration in `hooks.client.ts`:
139+
140+
```typescript
141+
import HawkCatcher from '@hawk.so/javascript';
142+
143+
if (import.meta.env.VITE_HAWK_TOKEN) {
144+
new HawkCatcher(import.meta.env.VITE_HAWK_TOKEN);
145+
}
146+
```
147+
148+
Hawk automatically registers global error handlers for:
149+
150+
- `window.onerror`
151+
- `window.onunhandledrejection`
152+
153+
**Note:** HawkCatcher is browser-only and cannot run on the server (uses `localStorage`, `window`, etc.). Server-side errors are not tracked automatically.
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "hawk-svelte-playground",
3+
"private": true,
4+
"version": "1.0.0",
5+
"description": "SvelteKit playground for testing Hawk.so error handling integration",
6+
"type": "module",
7+
"scripts": {
8+
"dev": "vite dev",
9+
"build": "vite build",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@hawk.so/javascript": "file:../../.."
14+
},
15+
"devDependencies": {
16+
"@sveltejs/adapter-auto": "^7.0.0",
17+
"@sveltejs/kit": "^2.48.5",
18+
"@sveltejs/vite-plugin-svelte": "^6.2.1",
19+
"svelte": "^5.45.10",
20+
"typescript": "^5.9.3",
21+
"vite": "^7.2.2"
22+
}
23+
}

0 commit comments

Comments
 (0)