set sentry user ID, if available and applicable

client/wrappers/SentryWrapper.tsx

@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/nextjs';
+import { useEffect } from 'react';
+
+import { useAppSelector } from '@/store/hooks';
+
+const SentryWrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+  const user = useAppSelector((state) => state.auth.user);
+
+  useEffect(() => {
+    const sentryUser: Sentry.User | null = user && { ...user, id: user?.id.toString() };
+    Sentry.setUser(sentryUser);
+  }, [user]);
+
+  return <>{children}</>;
+};
+
+export default SentryWrapper;

client/wrappers/index.tsx

@@ -1,17 +1,18 @@
 import DateWrapper from './DateWrapper';
 import FontWrapper from './FontWrapper';
+import SentryWrapper from './SentryWrapper';
 import ThemeWrapper from './ThemeWrapper';
 
-const WrapperRegistry: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
+const WrapperRegistry: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
-  return (
+  <ThemeWrapper>
-    <ThemeWrapper>
+    <FontWrapper>
-      <FontWrapper>
+      <DateWrapper>
-        <DateWrapper>
+        <SentryWrapper>
           <>{children}</>
-        </DateWrapper>
+        </SentryWrapper>
-      </FontWrapper>
+      </DateWrapper>
-    </ThemeWrapper>
+    </FontWrapper>
-  );
+  </ThemeWrapper>
-};
+);
 
 export default WrapperRegistry;