build: 👷 Add Sentry context

apps/builder/contexts/UserContext.tsx

@@ -13,6 +13,7 @@ import { updateUser as updateUserInDb } from 'services/user/user'
 import { useToast } from '@chakra-ui/react'
 import { dequal } from 'dequal'
 import { User } from 'db'
+import { setUser as setSentryUser } from '@sentry/nextjs'
 
 const userContext = createContext<{
   user?: User
@@ -48,7 +49,9 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
 
   useEffect(() => {
     if (isDefined(user) || isNotDefined(session)) return
-    setUser(session.user as User)
+    const parsedUser = session.user as User
+    setUser(parsedUser)
+    setSentryUser({ id: parsedUser.id })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session])
 

apps/builder/sentry.client.config.js

@@ -7,4 +7,14 @@ import * as Sentry from '@sentry/nextjs'
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   ignoreErrors: ['ResizeObserver loop limit exceeded'],
+  beforeBreadcrumb(breadcrumb, hint) {
+    try {
+      if (breadcrumb.category?.startsWith('ui')) {
+        breadcrumb.message = `${hint?.event.target.tagName.toLowerCase()}: ${
+          hint?.event.target.innerText
+        }`
+      }
+    } catch (e) {}
+    return breadcrumb
+  },
 })