Test Svelte playground

[Reversean]

Closes #137

Some playground UI preview:

recording_2025-12-12_02.22.45.mp4

[Copilot]

Pull request overview

This PR introduces a comprehensive SvelteKit playground for testing and demonstrating the Hawk.so error tracking integration with Svelte 5. The playground provides 14 different error scenarios to validate error handling across various contexts including load functions, lifecycle hooks, event handlers, async operations, form actions, error boundaries, and store subscriptions.

Key Changes

• Complete SvelteKit application setup with Vite, TypeScript, and Svelte 5 configuration
• Implementation of both client-side and server-side error handlers with console logging
• 14 test pages demonstrating different error scenarios and their expected behavior
• Global error handler setup with visual console markers (🔴, 🟡, 🟢) to distinguish error capture locations

Reviewed changes

Copilot reviewed 34 out of 37 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
package.json	Project setup with SvelteKit dependencies and Hawk.so integration
vite.config.ts	Vite configuration with SvelteKit plugin and network host access
svelte.config.js	SvelteKit configuration with auto adapter and vite preprocessing
tsconfig.json	TypeScript configuration with strict mode and Svelte-specific settings
hooks.client.ts	Client-side error handler with Hawk initialization and logging
hooks.server.ts	Server-side error handler with detailed error logging
app.css	Complete styling system with dark theme and component styles
+layout.svelte	Root layout with global error handler registration
+page.svelte	Home page with playground introduction and navigation
errors/+page.svelte	Error test suite index with categorized test scenarios
Error test pages	Individual test pages for various error scenarios (load, lifecycle, events, async, forms, boundaries, stores)
errorStore.ts	Store with intentional subscription error for testing
yarn.lock	Locked dependencies for reproducible builds
README.md	Comprehensive documentation of error scenarios and testing guide

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Inconsistent indentation detected. Lines 34-36 use tabs while the rest of the file uses spaces. This should be normalized to match the file's indentation style (2 spaces).

Suggested change

	triggerError = false;
	reset();
	}}
	triggerError = false;
	reset();
	}}

[Copilot]

The URL path references a static file path incorrectly. The href should be "/" for the home page, not "/packages/svelte/playground/static". This appears to be a repository structure path rather than a web application route.

Suggested change

	<a href="/packages/svelte/playground/static">← Back to Home</a>
	<a href="/">← Back to Home</a>

[Copilot]

The event.route.id property can be null and needs null-safe handling. The route.id is null for error pages and certain dynamic routes, which could cause the returned object to have inconsistent types.

Suggested change

	console.error('🔴 [Server handleError] Caught error:', {
	error,
	status,
	message,
	route: event.route.id,
	url: event.url.pathname
	});
	return {
	message: message || 'An unexpected server error occurred',
	code: (error as any)?.code ?? 'UNKNOWN_ERROR',
	route: event.route.id
	const routeId = event.route.id ?? 'UNKNOWN_ROUTE';
	console.error('🔴 [Server handleError] Caught error:', {
	error,
	status,
	message,
	route: routeId,
	url: event.url.pathname
	});
	return {
	message: message || 'An unexpected server error occurred',
	code: (error as any)?.code ?? 'UNKNOWN_ERROR',
	route: routeId

[Copilot]

The event.route.id property can be null and needs null-safe handling. The route.id is null for error pages and certain dynamic routes, which could cause the returned object to have inconsistent types.

Suggested change

	console.error('🔴 [Client handleError] Caught error:', {
	error,
	status,
	message,
	route: event.route.id,
	url: event.url.pathname
	});
	return {
	message: message || 'An unexpected client error occurred',
	code: (error as any)?.code ?? 'UNKNOWN_ERROR',
	route: event.route.id
	const routeId = event.route.id ?? 'UNKNOWN_ROUTE';
	console.error('🔴 [Client handleError] Caught error:', {
	error,
	status,
	message,
	route: routeId,
	url: event.url.pathname
	});
	return {
	message: message || 'An unexpected client error occurred',
	code: (error as any)?.code ?? 'UNKNOWN_ERROR',
	route: routeId

[Copilot]

The Google Fonts URL uses an older syntax. Consider updating to the more modern CSS2 API with explicit weight syntax for better control and performance. The current URL works but css2 API is recommended.

Suggested change

	@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

[Copilot]

Missing import statement for the ErrorEffectComponent. The component is used on line 27 but not imported at the top of the script section.

[Copilot]

The gitignore file has a logical error. Line 22 adds .env.example to be ignored, but line 23 immediately negates it with !.env.example. Since .env.example should be committed (it's a template file), only the negation is needed, or these two lines should be removed entirely as .env on line 21 already handles the actual environment file.

Suggested change

.env.example

[Copilot]

The URL path references a static file path incorrectly. The href should be "/" for the home page, not "/packages/svelte/playground/static". This appears to be a repository structure path rather than a web application route.

Suggested change

	<a href="/packages/svelte/playground/static">Home</a>
	<a href="/">Home</a>

[neSpecc]

use 2-space indentation. You can copy the .editorconfig file from some of our repos

[neSpecc]

Please, add JSdocs here with explanation

[neSpecc]

It is redundant info, I guess