BLOG-90 feat: integrate Sentry for error tracking and performance monitoring

- Added Sentry initialization in both client and server hooks.
- Configured Sentry with environment variables for DSN and sampling rates.
- Implemented error handling with Sentry in server hooks.
- Updated environment configuration to include SENTRY_DSN.
- Configured Vite to upload source maps to Sentry.

frontend/.gitignore

@@ -21,3 +21,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Sentry Config File
+.env.sentry-build-plugin

frontend/Dockerfile

@@ -23,6 +23,8 @@ EXPOSE 3000
 ENV NODE_ENV=production
 ENV HOSTNAME=0.0.0.0
 ENV PORT=3000
+ENV SENTRY_AUTH_TOKEN=
+ENV PUBLIC_SENTRY_DSN=
 ENV PUBLIC_API_BASE_URL=http://127.0.0.1:8080/
 ENV PUBLIC_GA_MEASUREMENT_ID=
 CMD ["node", "build"]

frontend/package.json

@@ -47,5 +47,8 @@
 			"esbuild"
 		]
 	},
-	"packageManager": "pnpm@10.12.4"
+	"packageManager": "pnpm@10.12.4",
+	"dependencies": {
+		"@sentry/sveltekit": "^10.1.0"
+	}
 }

frontend/src/hooks.client.ts

@@ -0,0 +1,26 @@
+import { Environment } from '$lib/environment';
+import { handleErrorWithSentry, replayIntegration } from '@sentry/sveltekit';
+import * as Sentry from '@sentry/sveltekit';
+
+Sentry.init({
+	dsn: Environment.SENTRY_DSN,
+
+	tracesSampleRate: 1.0,
+
+	// Enable logs to be sent to Sentry
+	enableLogs: true,
+
+	// This sets the sample rate to be 10%. You may want this to be 100% while
+	// in development and sample at a lower rate in production
+	replaysSessionSampleRate: 0.1,
+
+	// If the entire session is not sampled, use the below sample rate to sample
+	// sessions when an error occurs.
+	replaysOnErrorSampleRate: 1.0,
+
+	// If you don't want to use Session Replay, just remove the line below:
+	integrations: [replayIntegration()]
+});
+
+// If you have a custom error handler, pass it to `handleErrorWithSentry`
+export const handleError = handleErrorWithSentry();

frontend/src/hooks.server.ts

@@ -1,3 +1,5 @@
+import { sequence } from '@sveltejs/kit/hooks';
+import * as Sentry from '@sentry/sveltekit';
 import { PostRepositoryImpl } from '$lib/post/adapter/gateway/postRepositoryImpl';
 import { PostBloc } from '$lib/post/adapter/presenter/postBloc';
 import { PostListBloc } from '$lib/post/adapter/presenter/postListBloc';
@@ -5,8 +7,15 @@ import { GetAllPostsUseCase } from '$lib/post/application/useCase/getAllPostsUse
 import { GetPostUseCase } from '$lib/post/application/useCase/getPostUseCase';
 import { PostApiServiceImpl } from '$lib/post/framework/api/postApiServiceImpl';
 import type { Handle } from '@sveltejs/kit';
+import { Environment } from '$lib/environment';
 
-export const handle: Handle = ({ event, resolve }) => {
+Sentry.init({
+	dsn: Environment.SENTRY_DSN,
+	tracesSampleRate: 1,
+	enableLogs: true
+});
+
+export const handle: Handle = sequence(Sentry.sentryHandle(), ({ event, resolve }) => {
 	const postApiService = new PostApiServiceImpl(event.fetch);
 	const postRepository = new PostRepositoryImpl(postApiService);
 	const getAllPostsUseCase = new GetAllPostsUseCase(postRepository);
@@ -16,4 +25,6 @@ export const handle: Handle = ({ event, resolve }) => {
 	event.locals.postBloc = new PostBloc(getPostUseCase);
 
 	return resolve(event);
-};
+});
+
+export const handleError = Sentry.handleErrorWithSentry();

frontend/src/lib/environment.ts

@@ -3,4 +3,5 @@ import { env } from '$env/dynamic/public';
 export abstract class Environment {
 	static readonly API_BASE_URL = env.PUBLIC_API_BASE_URL ?? 'http://localhost:5173/api/';
 	static readonly GA_MEASUREMENT_ID = env.PUBLIC_GA_MEASUREMENT_ID ?? '';
+	static readonly SENTRY_DSN = env.PUBLIC_SENTRY_DSN ?? '';
 }

frontend/vite.config.ts

@@ -1,3 +1,4 @@
+import { sentrySvelteKit } from '@sentry/sveltekit';
 import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
@@ -5,7 +6,16 @@ import { defineConfig } from 'vite';
 import { version } from './package.json';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()],
+	plugins: [
+		sentrySvelteKit({
+			sourceMapsUploadOptions: {
+				org: 'squidspirit',
+				project: 'blog-beta-frontend'
+			}
+		}),
+		tailwindcss(),
+		sveltekit()
+	],
 	define: {
 		'App.__VERSION__': JSON.stringify(version)
 	},