apps/web: add sentry scope to set user on client

apps/web/pages/index.jsx

@@ -6,14 +6,15 @@ import { Grid } from '@/Components/Layout/Page';
 import Output from '@/Components/Output';
 import { defaultRoles } from '@/config/users';
 import * as CRMTypes from '@/graphql/crm.types';
-import { useInsuranceData, useMainData, useReactions } from '@/process/hooks';
+import * as hooks from '@/process/hooks';
 import { dehydrate, QueryClient } from '@tanstack/react-query';
 import Head from 'next/head';
 
 export default function Home(props) {
-  useMainData();
-  useInsuranceData();
-  useReactions();
+  hooks.useSentryScope();
+  hooks.useMainData();
+  hooks.useInsuranceData();
+  hooks.useReactions();
 
   if (props.statusCode !== 200) return <Error {...props} />;
 

apps/web/pages/unlimited.jsx

@@ -4,7 +4,7 @@ import { Error } from '@/Components/Common/Error';
 import { Grid } from '@/Components/Layout/Page';
 import Output from '@/Components/Output';
 import { unlimitedRoles } from '@/config/users';
-import { useGetUsers, useInsuranceData, useMainData, useReactions } from '@/process/hooks';
+import * as hooks from '@/process/hooks';
 import { useStore } from '@/stores/hooks';
 import Head from 'next/head';
 
@@ -12,10 +12,11 @@ export default function Unlimited(props) {
   const store = useStore();
   store.$process.add('Unlimited');
 
-  useMainData();
-  useGetUsers();
-  useInsuranceData();
-  useReactions();
+  hooks.useSentryScope();
+  hooks.useMainData();
+  hooks.useGetUsers();
+  hooks.useInsuranceData();
+  hooks.useReactions();
 
   if (props.statusCode !== 200) return <Error {...props} />;
 

apps/web/process/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './common';
 export * from './init';
 export * from './reactions';
+export * from './sentry';

apps/web/process/hooks/sentry.ts

@@ -0,0 +1,16 @@
+import { getUser } from '@/api/user/query';
+import { STALE_TIME } from '@/constants/request';
+import { getCurrentScope } from '@sentry/nextjs';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+export function useSentryScope() {
+  const { data: user } = useQuery(['user'], ({ signal }) => getUser({ signal }), {
+    staleTime: STALE_TIME,
+  });
+
+  useEffect(() => {
+    const scope = getCurrentScope();
+    if (user) scope.setUser(user);
+  }, []);
+}