From db3488aeb8fdae77d66067869ac06122593faf97 Mon Sep 17 00:00:00 2001
From: Enno Gelhaus <egelhaus@ennogelhaus.de>
Date: Fri, 1 Aug 2025 11:27:00 +0200
Subject: [PATCH] feat/sentry masking

---
 .../components/analytics/stars.table.component.tsx   |  4 ++--
 apps/frontend/src/components/autopost/autopost.tsx   |  4 ++--
 .../src/components/launches/launches.component.tsx   |  2 ++
 .../src/components/new-launch/manage.modal.tsx       | 12 +++++++-----
 .../new-launch/picks.socials.component.tsx           |  1 +
 .../src/components/preview/preview.wrapper.tsx       |  6 ++++--
 .../src/components/public-api/public.component.tsx   |  4 ++--
 apps/frontend/src/components/sets/sets.tsx           |  2 +-
 .../src/components/settings/signatures.component.tsx |  2 +-
 .../src/components/settings/teams.component.tsx      |  2 +-
 apps/frontend/src/components/webhooks/webhooks.tsx   |  4 ++--
 .../src/sentry/initialize.sentry.client.ts           |  7 ++++++-
 12 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/apps/frontend/src/components/analytics/stars.table.component.tsx b/apps/frontend/src/components/analytics/stars.table.component.tsx
index ad805eee..ec69a347 100644
--- a/apps/frontend/src/components/analytics/stars.table.component.tsx
+++ b/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" />
diff --git a/apps/frontend/src/components/autopost/autopost.tsx b/apps/frontend/src/components/autopost/autopost.tsx
index 21af4652..542f934c 100644
--- a/apps/frontend/src/components/autopost/autopost.tsx
+++ b/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)}>
diff --git a/apps/frontend/src/components/launches/launches.component.tsx b/apps/frontend/src/components/launches/launches.component.tsx
index 39cbfcd6..6736c478 100644
--- a/apps/frontend/src/components/launches/launches.component.tsx
+++ b/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>
diff --git a/apps/frontend/src/components/new-launch/manage.modal.tsx b/apps/frontend/src/components/new-launch/manage.modal.tsx
index f1657155..9ce3f721 100644
--- a/apps/frontend/src/components/new-launch/manage.modal.tsx
+++ b/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
diff --git a/apps/frontend/src/components/new-launch/picks.socials.component.tsx b/apps/frontend/src/components/new-launch/picks.socials.component.tsx
index c966a177..f5593f17 100644
--- a/apps/frontend/src/components/new-launch/picks.socials.component.tsx
+++ b/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) {
diff --git a/apps/frontend/src/components/preview/preview.wrapper.tsx b/apps/frontend/src/components/preview/preview.wrapper.tsx
index 9022b106..0520a78a 100644
--- a/apps/frontend/src/components/preview/preview.wrapper.tsx
+++ b/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>
diff --git a/apps/frontend/src/components/public-api/public.component.tsx b/apps/frontend/src/components/public-api/public.component.tsx
index bb3a778e..a92c6fec 100644
--- a/apps/frontend/src/components/public-api/public.component.tsx
+++ b/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'
           ) : (
diff --git a/apps/frontend/src/components/sets/sets.tsx b/apps/frontend/src/components/sets/sets.tsx
index b088e068..95bda5f8 100644
--- a/apps/frontend/src/components/sets/sets.tsx
+++ b/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>
diff --git a/apps/frontend/src/components/settings/signatures.component.tsx b/apps/frontend/src/components/settings/signatures.component.tsx
index 403fd32e..c90f6b19 100644
--- a/apps/frontend/src/components/settings/signatures.component.tsx
+++ b/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>
diff --git a/apps/frontend/src/components/settings/teams.component.tsx b/apps/frontend/src/components/settings/teams.component.tsx
index 75a0b91d..add0e2d2 100644
--- a/apps/frontend/src/components/settings/teams.component.tsx
+++ b/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">
diff --git a/apps/frontend/src/components/webhooks/webhooks.tsx b/apps/frontend/src/components/webhooks/webhooks.tsx
index 96498287..ea73e1d4 100644
--- a/apps/frontend/src/components/webhooks/webhooks.tsx
+++ b/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)}>
diff --git a/libraries/react-shared-libraries/src/sentry/initialize.sentry.client.ts b/libraries/react-shared-libraries/src/sentry/initialize.sentry.client.ts
index 70e626d7..0fb16de1 100644
--- a/libraries/react-shared-libraries/src/sentry/initialize.sentry.client.ts
+++ b/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