feat/sentry masking

apps/frontend/src/components/analytics/stars.table.component.tsx

@@ -150,7 +150,7 @@ export const StarsTableComponent = () => {
     [page, key, state]
   );
   return (
-    <div className="flex flex-1 flex-col gap-[15px] min-h-[426px]">
+    <div className="flex flex-1 flex-col gap-[15px] min-h-[426px]" data-sentry-mask>
       <div className="text-textColor flex gap-[8px] items-center select-none">
         <div
           onClick={changePage('decrease')}
@@ -205,7 +205,7 @@ export const StarsTableComponent = () => {
             <thead>
               <tr>
                 <th>
-                  <UpDown name="Repository" param="login" />
+                  <span data-sentry-mask><UpDown name="Repository" param="login" /></span>
                 </th>
                 <th>
                   <UpDown name="Date" param="date" />

apps/frontend/src/components/autopost/autopost.tsx

@@ -90,8 +90,8 @@ export const Autopost: FC = () => {
               <div>{t('active', 'Active')}</div>
               {data?.map((p: any) => (
                 <Fragment key={p.id}>
-                  <div className="flex flex-col justify-center">{p.title}</div>
-                  <div className="flex flex-col justify-center">{p.url}</div>
+                  <div className="flex flex-col justify-center" data-sentry-mask>{p.title}</div>
+                  <div className="flex flex-col justify-center" data-sentry-mask>{p.url}</div>
                   <div className="flex flex-col justify-center">
                     <div>
                       <Button onClick={addWebhook(p)}>

apps/frontend/src/components/launches/launches.component.tsx

@@ -187,6 +187,7 @@ export const MenuGroupComponent: FC<
                   'data-tooltip-content': group.name,
                 }
               : {})}
+            data-sentry-mask
           >
             {group.name}
           </div>
@@ -325,6 +326,7 @@ export const MenuComponent: FC<
           'group-[.sidebar]:hidden flex-1 whitespace-nowrap text-ellipsis overflow-hidden cursor-move',
           integration.disabled && 'opacity-50'
         )}
+        data-sentry-mask
       >
         {integration.name}
       </div>

apps/frontend/src/components/new-launch/manage.modal.tsx

@@ -459,7 +459,7 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
           <div>
             <TopTitle title="" removeTitle={true} extraClass="h-[75px]">
               <div className="flex flex-1 gap-[10px]">
-                <div>
+                <div data-sentry-mask>
                   {!dummy && (
                     <TagsComponent
                       name="tags"
@@ -470,10 +470,12 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
                   )}
                 </div>
                 {!dummy && (
-                  <SelectCustomer
-                    onChange={changeCustomer}
-                    integrations={integrations}
-                  />
+                  <div data-sentry-mask>
+                    <SelectCustomer
+                      onChange={changeCustomer}
+                      integrations={integrations}
+                    />
+                  </div>
                 )}
               </div>
               <svg

apps/frontend/src/components/new-launch/picks.socials.component.tsx

@@ -47,6 +47,7 @@ export const PicksSocialsComponent: FC<{ toolTip?: boolean }> = ({
                     'data-tooltip-content': integration.name,
                   })}
                 >
+                  <span data-sentry-mask>{integration.name}</span>
                   <div
                     onClick={() => {
                       if (exising.integration) {

apps/frontend/src/components/preview/preview.wrapper.tsx

@@ -28,8 +28,10 @@ export const PreviewWrapper = ({ children }: { children: ReactNode }) => {
         runtimeUrl={backendUrl + '/copilot/chat'}
       >
         <MantineWrapper>
-          <Toaster />
-          {children}
+          <div data-sentry-mask>
+            <Toaster />
+            {children}
+          </div>
         </MantineWrapper>
       </CopilotKit>
     </ContextWrapper>

apps/frontend/src/components/public-api/public.component.tsx

@@ -48,7 +48,7 @@ export const PublicComponent = () => {
         </a>
       </div>
       <div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
-        <div className="flex items-center">
+        <div className="flex items-center" data-sentry-mask>
           {reveal ? (
             user.publicApi
           ) : (
@@ -79,7 +79,7 @@ export const PublicComponent = () => {
         )}
       </div>
       <div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
-        <div className="flex items-center">
+        <div className="flex items-center" data-sentry-mask>
           {reveal2 ? (
             `${backendUrl}/mcp/` + user.publicApi + '/sse'
           ) : (

apps/frontend/src/components/sets/sets.tsx

@@ -169,7 +169,7 @@ export const Sets: FC = () => {
               <div>{t('delete', 'Delete')}</div>
               {data?.map((p: any) => (
                 <Fragment key={p.id}>
-                  <div className="flex flex-col justify-center">{p.name}</div>
+                  <div className="flex flex-col justify-center" data-sentry-mask>{p.name}</div>
                   <div className="flex flex-col justify-center">
                     <div>
                       <Button onClick={addSet(p)}>{t('edit', 'Edit')}</Button>

apps/frontend/src/components/settings/signatures.component.tsx

@@ -67,7 +67,7 @@ export const SignaturesComponent: FC<{
               {data?.map((p: any) => (
                 <Fragment key={p.id}>
                   <div className="relative flex-1 me-[20px] overflow-x-hidden">
-                    <div className="absolute start-0 line-clamp-1 top-[50%] -translate-y-[50%] text-ellipsis">
+                    <div className="absolute start-0 line-clamp-1 top-[50%] -translate-y-[50%] text-ellipsis" data-sentry-mask>
                       {p.content.slice(0, 15) + '...'}
                     </div>
                   </div>

apps/frontend/src/components/settings/teams.component.tsx

@@ -199,7 +199,7 @@ export const TeamsComponent = () => {
         <div className="flex flex-col gap-[16px]">
           {(data || []).map((p) => (
             <div key={p.user.id} className="flex items-center">
-              <div className="flex-1">
+              <div className="flex-1" data-sentry-mask>
                 {capitalize(p.user.email.split('@')[0]).split('.')[0]}
               </div>
               <div className="flex-1">

apps/frontend/src/components/webhooks/webhooks.tsx

@@ -81,8 +81,8 @@ export const Webhooks: FC = () => {
               <div>{t('delete', 'Delete')}</div>
               {data?.map((p: any) => (
                 <Fragment key={p.id}>
-                  <div className="flex flex-col justify-center">{p.name}</div>
-                  <div className="flex flex-col justify-center">{p.url}</div>
+                  <div className="flex flex-col justify-center" data-sentry-mask>{p.name}</div>
+                  <div className="flex flex-col justify-center" data-sentry-mask>{p.url}</div>
                   <div className="flex flex-col justify-center">
                     <div>
                       <Button onClick={addWebhook(p)}>

libraries/react-shared-libraries/src/sentry/initialize.sentry.client.ts

@@ -7,8 +7,13 @@ export const initializeSentryClient = (environment: string, dsn: string) =>
       // Add default integrations back
       Sentry.browserTracingIntegration(),
       Sentry.replayIntegration({
-        maskAllText: true,
+        maskAllText: false,
         maskAllInputs: true,
+        blockAllMedia: true,
+
+        // Manual Masking
+        mask: ['.sentry-mask', '[data-sentry-mask]', 'data-sentry-mask'],
+        unmask: ['.sentry-unmask', '[data-sentry-unmask]', 'data-sentry-unmask'],
       }),
       Sentry.feedbackIntegration({
         // Disable the injection of the default widget