sentry: identify frontend

src/hooks.client.ts

@@ -1,6 +1,7 @@
 import { handleErrorWithSentry, init } from '@sentry/sveltekit';
 import type { NavigationEvent } from '@sveltejs/kit';
 import { dev } from '$app/environment';
+import { log } from '$lib';
 
 init({
 	enabled: !dev,
@@ -9,6 +10,8 @@ init({
 	tracesSampleRate: 1.0
 });
 
+log.info(`sentry init`);
+
 const myErrorHandler = ({ error, event }: { error: any; event: NavigationEvent }) => {
 	console.error('An error occurred on the client side:', error, event);
 };

src/lib/sentry.ts

@@ -0,0 +1,21 @@
+import { setUser } from '@sentry/sveltekit';
+import type { User } from '$lib/api';
+import * as log from '$lib/log';
+
+export default () => {
+	return {
+		identify: (user: User | undefined) => {
+			if (user) {
+				log.info(`sentry identify`);
+				setUser({
+					id: user.id.toString(),
+					email: user.email,
+					username: user.name
+				});
+			} else {
+				log.info(`sentry reset`);
+				setUser(null);
+			}
+		}
+	};
+};

src/routes/+layout.svelte

@@ -12,7 +12,7 @@
 	import { onMount } from 'svelte';
 
 	export let data: LayoutData;
-	const { user, posthog, projects } = data;
+	const { user, posthog, projects, sentry } = data;
 
 	const project = derived([page, projects], ([page, projects]) =>
 		projects.find((project) => project.id === page.params.projectId)
@@ -27,6 +27,7 @@
 	);
 
 	user.subscribe(posthog.identify);
+	user.subscribe(sentry.identify);
 </script>
 
 <div class="flex h-full max-h-full min-h-full flex-col">

src/routes/+layout.ts

@@ -4,6 +4,7 @@ import { building } from '$app/environment';
 import type { Project } from '$lib/projects';
 import Api from '$lib/api';
 import Posthog from '$lib/posthog';
+import Sentry from '$lib/sentry';
 import * as log from '$lib/log';
 import { wrapLoadWithSentry } from '@sentry/sveltekit';
 
@@ -39,6 +40,7 @@ export const load: LayoutLoad = wrapLoadWithSentry(async ({ fetch }) => {
 		projects,
 		user,
 		api: Api({ fetch }),
-		posthog: Posthog()
+		posthog: Posthog(),
+		sentry: Sentry()
 	};
 });