Merge branch 'sentry-user' into 'main'

Send username/id to Sentry

See merge request soapbox-pub/soapbox!2803

src/actions/me.ts

@@ -1,4 +1,5 @@
 import { selectAccount } from 'soapbox/selectors';
+import { setSentryAccount } from 'soapbox/sentry';
 import KVStore from 'soapbox/storage/kv-store';
 import { getAuthUserId, getAuthUserUrl } from 'soapbox/utils/auth';
 
@@ -8,6 +9,7 @@ import { loadCredentials } from './auth';
 import { importFetchedAccount } from './importer';
 
 import type { AxiosError, RawAxiosRequestHeaders } from 'axios';
+import type { Account } from 'soapbox/schemas';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity } from 'soapbox/types/entities';
 
@@ -88,10 +90,14 @@ const fetchMeRequest = () => ({
   type: ME_FETCH_REQUEST,
 });
 
-const fetchMeSuccess = (me: APIEntity) => ({
+const fetchMeSuccess = (account: Account) => {
+  setSentryAccount(account);
+
+  return {
     type: ME_FETCH_SUCCESS,
-  me,
-});
+    me: account,
+  };
+};
 
 const fetchMeFail = (error: APIEntity) => ({
   type: ME_FETCH_FAIL,

src/hooks/index.ts

@@ -19,7 +19,6 @@ export { useOwnAccount } from './useOwnAccount';
 export { usePrevious } from './usePrevious';
 export { useRefEventHandler } from './useRefEventHandler';
 export { useRegistrationStatus } from './useRegistrationStatus';
-export { useSentry } from './useSentry';
 export { useSettings } from './useSettings';
 export { useSoapboxConfig } from './useSoapboxConfig';
 export { useSystemTheme } from './useSystemTheme';

src/init/soapbox-head.tsx

@@ -1,14 +1,14 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import {
-  useSentry,
   useSettings,
   useSoapboxConfig,
   useTheme,
   useLocale,
 } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
+import { startSentry } from 'soapbox/sentry';
 import { generateThemeCss } from 'soapbox/utils/theme';
 
 const Helmet = React.lazy(() => import('soapbox/components/helmet'));
@@ -26,6 +26,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   const demo = !!settings.get('demo');
   const darkMode = useTheme() === 'dark';
   const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
+  const dsn = soapboxConfig.sentryDsn;
 
   const bodyClass = clsx('h-full bg-white text-base dark:bg-gray-800', {
     'no-reduce-motion': !settings.get('reduceMotion'),
@@ -33,7 +34,11 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
     'demetricator': settings.get('demetricator'),
   });
 
-  useSentry(soapboxConfig.sentryDsn);
+  useEffect(() => {
+    if (dsn) {
+      startSentry(dsn).catch(console.error);
+    }
+  }, [dsn]);
 
   return (
     <>

src/reducers/compose.test.ts

@@ -167,7 +167,7 @@ describe('compose reducer', () => {
       type: ME_FETCH_SUCCESS,
       me: { pleroma: { settings_store: { soapbox_fe: { defaultPrivacy: 'unlisted' } } } },
     };
-    expect(reducer(state, action).toJS().default).toMatchObject({
+    expect(reducer(state, action as any).toJS().default).toMatchObject({
       privacy: 'unlisted',
     });
   });

src/sentry.ts

@@ -1,13 +1,4 @@
-import { useEffect } from 'react';
-
-/** Hook to start Sentry. Should only be called once. */
-function useSentry(dsn: string | undefined) {
-  useEffect(() => {
-    if (dsn) {
-      startSentry(dsn).catch(console.error);
-    }
-  }, [dsn]);
-}
+import type { Account } from './schemas';
 
 /** Start Sentry. */
 async function startSentry(dsn: string): Promise<void> {
@@ -47,4 +38,14 @@ async function startSentry(dsn: string): Promise<void> {
   });
 }
 
-export { useSentry };
+/** Associate the account with Sentry events. */
+async function setSentryAccount(account: Account) {
+  const Sentry = await import('@sentry/react');
+
+  Sentry.setUser({
+    id: account.id,
+    username: account.acct,
+  });
+}
+
+export { startSentry, setSentryAccount };