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')}
@@ -199,13 +199,13 @@ export const StarsTableComponent = () => {
           )}
         </div>
       </div>
-      <div className="flex-1 bg-secondary">
+      <div className="flex-1 bg-secondary" data-sentry-mask>
         {stars?.stars?.length ? (
           <table className={`table1`}>
             <thead>
               <tr>
                 <th>
-                  <UpDown name="Repository" param="login" />
+                  <UpDown name="Repository" param="login"/>
                 </th>
                 <th>
                   <UpDown name="Date" param="date" />

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

@@ -87,8 +87,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/launches/select.customer.tsx

@@ -18,7 +18,7 @@ export const SelectCustomer: FC<{
     return null;
   }
   return (
-    <Select
+    <Select data-sentry-mask
       hideErrors={true}
       label=""
       name="customer"
@@ -33,7 +33,7 @@ export const SelectCustomer: FC<{
       {uniqBy(integrations, (u) => u?.customer?.name)
         .filter((f) => f.customer?.name)
         .map((p) => (
-          <option key={p.customer?.id} value={p.customer?.id}>
+          <option key={p.customer?.id} value={p.customer?.id} data-sentry-mask>
             {t('customer', 'Customer:')}
             {p.customer?.name}
           </option>

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

@@ -304,7 +304,7 @@
   );
 
   return (
     <>
       <div
         className={clsx(
           'flex flex-col md:flex-row bg-newBgLineColor gap-[1px] rounded-[24px] trz'
@@ -454,7 +454,7 @@
           <div>
             <TopTitle title="" removeTitle={true} extraClass="h-[75px]">
               <div className="flex flex-1 gap-[10px]">
-                <div>
+                <div data-sentry-mask>
                   {!dummy && (
                     <TagsComponent
                       name="tags"

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

@@ -29,7 +29,7 @@ export const PreviewWrapper = ({ children }: { children: ReactNode }) => {
         showDevConsole={false}
       >
         <MantineWrapper>
-          <Toaster />
+          <Toaster/>
           {children}
         </MantineWrapper>
       </CopilotKit>

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

@@ -58,7 +58,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
           ) : (
@@ -89,7 +89,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

@@ -176,7 +176,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

@@ -87,7 +87,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

@@ -175,7 +175,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

@@ -78,8 +78,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

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

libraries/react-shared-libraries/src/toaster/toaster.tsx

@@ -66,7 +66,7 @@ export const Toaster = () => {
           </svg>
         )}
       </div>
-      <div className="flex-1 text-textColor">{toasterText}</div>
+      <div className="flex-1 text-textColor" data-sentry-mask>{toasterText}</div>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="60"

libraries/react-shared-libraries/tsconfig.json

@@ -16,4 +16,4 @@
       "path": "./tsconfig.lib.json"
     }
   ]
-}
+}