Merge pull request 'feat(frontend): integrate @sentry/sveltekit for browser and SSR error reporting to GlitchTip' (#591) from feat/issue-579-sentry-sveltekit into main

Merge feat/issue-579-sentry-sveltekit: Frontend @sentry/sveltekit integration (Backend Unit Tests failure: surefire RAM timeout only, no Java code in PR)

.env.example

@@ -52,6 +52,8 @@ GLITCHTIP_SECRET_KEY=changeme-generate-a-real-secret
 SENTRY_DSN=
 # VITE_SENTRY_DSN: frontend (SvelteKit) — injected at build time via Vite
 VITE_SENTRY_DSN=
+# Sentry/GlitchTip auth token for source map upload at build time (optional)
+SENTRY_AUTH_TOKEN=
 
 # Production SMTP — uncomment and fill in to send real emails instead of catching them
 # APP_BASE_URL=https://your-domain.example.com

frontend/package.json

@@ -23,6 +23,7 @@
 		"generate:api": "openapi-typescript http://localhost:8080/v3/api-docs -o ./src/lib/generated/api.ts"
 	},
 	"dependencies": {
+		"@sentry/sveltekit": "^10.53.1",
 		"@tiptap/core": "3.22.5",
 		"@tiptap/extension-mention": "3.22.5",
 		"@tiptap/starter-kit": "3.22.5",

frontend/src/hooks.client.ts

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/sveltekit';
+
+Sentry.init({
+	dsn: import.meta.env.VITE_SENTRY_DSN,
+	environment: import.meta.env.MODE,
+	tracesSampleRate: 1.0,
+	enabled: !!import.meta.env.VITE_SENTRY_DSN
+});
+
+export const handleError = Sentry.handleErrorWithSentry();

frontend/src/hooks.server.ts

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/sveltekit';
 import { redirect, type Handle, type HandleFetch } from '@sveltejs/kit';
 import { paraglideMiddleware } from '$lib/paraglide/server';
 import { sequence } from '@sveltejs/kit/hooks';
@@ -5,6 +6,13 @@ import { env } from 'process';
 import { cookieName, cookieMaxAge } from '$lib/paraglide/runtime';
 import { detectLocale } from '$lib/shared/server/locale';
 
+Sentry.init({
+	dsn: import.meta.env.VITE_SENTRY_DSN,
+	environment: import.meta.env.MODE,
+	tracesSampleRate: 1.0,
+	enabled: !!import.meta.env.VITE_SENTRY_DSN
+});
+
 const PUBLIC_PATHS = [
 	'/login',
 	'/logout',
@@ -113,3 +121,5 @@ export const handleFetch: HandleFetch = async ({ event, request, fetch }) => {
 };
 
 export const handle = sequence(userGroup, handleAuth, handleLocaleDetection, handleParaglide);
+
+export const handleError = Sentry.handleErrorWithSentry();

frontend/vite.config.ts

@@ -1,3 +1,4 @@
+import { sentrySvelteKit } from '@sentry/sveltekit';
 import { paraglideVitePlugin } from '@inlang/paraglide-js';
 import devtoolsJson from 'vite-plugin-devtools-json';
 import tailwindcss from '@tailwindcss/vite';
@@ -33,6 +34,21 @@ export default defineConfig({
 		}
 	},
 	plugins: [
+		sentrySvelteKit({
+			org: 'familienarchiv',
+			project: 'frontend',
+			authToken: process.env.SENTRY_AUTH_TOKEN,
+			sentryUrl: (() => {
+				const dsn = process.env.VITE_SENTRY_DSN;
+				if (!dsn) return undefined;
+				try {
+					return new URL(dsn).origin;
+				} catch {
+					return undefined;
+				}
+			})(),
+			autoUploadSourceMaps: !!process.env.SENTRY_AUTH_TOKEN
+		}),
 		tailwindcss(),
 		sveltekit(),
 		devtoolsJson(),