Set Sentry scope user

Author: LaurentTreguier

src/app.d.ts

@@ -14,6 +14,7 @@ declare global {
 		'account.email': string;
 		'account.isWaitingForRandomCode': boolean;
 		'account.isRegistering': boolean;
+		'currentUser.id': string;
 	}
 }
 

src/routes/+layout.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { onMount, type Snippet } from 'svelte';
+	import { type Snippet } from 'svelte';
 	import { t } from 'i18next';
+	import * as Sentry from '@sentry/sveltekit';
 	import { navigate, Destination } from '$lib/destinations';
 	import { DisplayableError } from '$lib/events';
+	import { getUsersClient } from '$lib/openapi';
 	import SavedValue from '$lib/components/saved-value.svelte';
 	import EventListener from '$lib/components/event-listener.svelte';
 	import CurrentDestination from '$lib/components/current-destination.svelte';
@@ -17,10 +19,15 @@
 	let { children }: Props = $props();
 
 	let token = $state<string>();
+	let currentUserId = $state<string>();
 	let currentDestination = $state(Destination.Feed);
 	let errors = $state<DisplayableError[]>([]);
 	let currentError = $state<DisplayableError>();
 
+	$effect(() => {
+		fetchCurrentUser(token);
+	});
+
 	$effect(() => {
 		if (!token && currentDestination.requiresAuthentication) {
 			navigate(Destination.Settings);
@@ -39,9 +46,22 @@
 			currentError = errors[0];
 		}
 	}
+
+	async function fetchCurrentUser(token?: string) {
+		if (token) {
+			const client = await getUsersClient();
+			let currentUser = await client.getCurrentUser();
+			currentUserId = currentUser.id;
+			Sentry.setUser({ id: currentUserId, username: currentUser.username });
+		} else {
+			currentUserId = '';
+			Sentry.setUser(null);
+		}
+	}
 </script>
 
 <SavedValue name="connection.token" bind:value={token} />
+<SavedValue name="currentUser.id" bind:value={currentUserId} />
 <EventListener type={DisplayableError} listener={(event) => addError(event.detail)} />
 <CurrentDestination bind:destination={currentDestination} />
 

src/routes/settings/+page.svelte

@@ -8,8 +8,8 @@
 	import SavedValue from '$lib/components/saved-value.svelte';
 	import List from '$lib/components/list.svelte';
 	import Button from '$lib/components/inputs/button.svelte';
-	import EditableAvatar from './editable-avatar.svelte';
 	import TextArea from '$lib/components/inputs/text-area.svelte';
+	import EditableAvatar from './editable-avatar.svelte';
 
 	let isRegistering = $state(false);
 	let token = $state<string>();