chore: sentry mask

Author: tmm

src/components/Dashboard.tsx

@@ -32,7 +32,7 @@ function Stat(props: { label: string; tooltip?: React.ReactNode; value?: string
   return (
     <div className="bg-gray-a1/50 border-gray-a3 relative border px-3 py-3">
       <div className="text-gray8 text-xs">{props.label}</div>
-      <div className="mt-1 text-2xl font-bold tabular-nums">
+      <div className="mt-1 text-2xl font-bold tabular-nums" data-sentry-mask>
         {props.value ?? <span className="text-gray5">&mdash;</span>}
       </div>
       {props.tooltip && (

src/router.tsx

@@ -40,7 +40,10 @@ export function getRouter() {
       tunnel: rpc.api.tunnel.$url().pathname,
       integrations: [
         Sentry.tanstackRouterBrowserTracingIntegration(router),
-        Sentry.replayIntegration(),
+        Sentry.replayIntegration({
+          blockAllMedia: false,
+          maskAllText: false,
+        }),
       ],
       environment: __ENV__,
       release: __GIT_SHA__,

src/routes/_dash.$login/billing.tsx

@@ -236,20 +236,22 @@ function Component() {
                       {pm.funding !== 'unknown' && (
                         <span className="text-gray8">{pm.funding} </span>
                       )}
-                      <span className="text-gray8">&bull;&bull;&bull;&bull; {pm.last4}</span>
+                      <span className="text-gray8" data-sentry-mask>
+                        &bull;&bull;&bull;&bull; {pm.last4}
+                      </span>
                       {pm.is_default && (
                         <span className="border-gray-a3 text-gray8 ms-2 inline-flex items-center border px-1 py-0.5 text-xs leading-none uppercase">
                           Default
                         </span>
                       )}
                     </div>
-                    <div className="text-gray8 md:hidden">
+                    <div className="text-gray8 md:hidden" data-sentry-mask>
                       Valid until {pm.exp_month}/{String(pm.exp_year).slice(-2)}
                     </div>
                   </div>
                 </div>
                 <div className="flex shrink-0 items-center gap-3">
-                  <span className="text-gray8 hidden text-sm md:inline">
+                  <span className="text-gray8 hidden text-sm md:inline" data-sentry-mask>
                     Valid until {pm.exp_month}/{String(pm.exp_year).slice(-2)}
                   </span>
                   <Menu.Root>
@@ -436,7 +438,7 @@ function TransactionHistory(props: {
             Balance
           </Dashboard.Table.Th>
         </Dashboard.Table.Thead>
-        <tbody>
+        <tbody data-sentry-mask>
           {data.transactions.map((tx, i) => {
             const balanceAfter =
               props.balanceMills -

src/routes/_dash.$login/route.tsx

@@ -292,7 +292,9 @@ function AccountSwitcher(props: {
           avatarUrl={props.entity.avatar_url ?? undefined}
           name={props.entity.name ?? props.entity.login}
         />
-        <span className="truncate">{props.entity.name ?? props.entity.login}</span>
+        <span className="truncate" data-sentry-mask>
+          {props.entity.name ?? props.entity.login}
+        </span>
         <IconLucideChevronsUpDown className="text-gray8 ms-auto size-3.5 shrink-0" />
       </Menu.Trigger>
       <Menu.Portal>
@@ -314,7 +316,9 @@ function AccountSwitcher(props: {
                 }
               >
                 <EntityAvatar avatarUrl={e.avatar_url ?? undefined} name={e.name ?? e.login} />
-                <span className="truncate">{e.name ?? e.login}</span>
+                <span className="truncate" data-sentry-mask>
+                  {e.name ?? e.login}
+                </span>
               </Menu.Item>
             ))}
             {props.others.length > 0 && <div className="border-gray-a2 -mx-1 my-1 border-t" />}
@@ -506,7 +510,10 @@ function EntityAvatar(props: { avatarUrl?: string | null | undefined; name: stri
   if (props.avatarUrl)
     return <img alt={props.name} className="size-6 shrink-0" src={props.avatarUrl} />
   return (
-    <span className="bg-gray-a3 flex size-6 shrink-0 items-center justify-center text-xs uppercase">
+    <span
+      className="bg-gray-a3 flex size-6 shrink-0 items-center justify-center text-xs uppercase"
+      data-sentry-mask
+    >
       {props.name[0]}
     </span>
   )

src/routes/_dash.$login/settings.tsx

@@ -111,7 +111,10 @@ function SettingsForm(props: {
             {entity.avatar_url ? (
               <img alt={entity.name ?? entity.login} className="size-16" src={entity.avatar_url} />
             ) : (
-              <span className="bg-gray-a3 flex size-16 items-center justify-center text-xl uppercase">
+              <span
+                className="bg-gray-a3 flex size-16 items-center justify-center text-xl uppercase"
+                data-sentry-mask
+              >
                 {(entity.name ?? entity.login)[0]}
               </span>
             )}
@@ -193,7 +196,10 @@ function SettingsForm(props: {
             </div>
             <Dialog.Description>
               To confirm, type your current login{' '}
-              <span className="text-gray12 font-medium">{entity.login}</span>.
+              <span className="text-gray12 font-medium" data-sentry-mask>
+                {entity.login}
+              </span>
+              .
             </Dialog.Description>
             <input
               autoComplete="off"
@@ -288,7 +294,10 @@ function DeleteOrganization(props: {
             </div>
             <Dialog.Description>
               To confirm, type the organization login{' '}
-              <span className="text-gray12 font-medium">{props.entity.login}</span>.
+              <span className="text-gray12 font-medium" data-sentry-mask>
+                {props.entity.login}
+              </span>
+              .
             </Dialog.Description>
             <input
               autoComplete="off"
@@ -379,7 +388,10 @@ function DeleteAccount(props: { account: { id: string; login: string }; onDelete
             </div>
             <Dialog.Description>
               To confirm, type your login{' '}
-              <span className="text-gray12 font-medium">{props.account.login}</span>.
+              <span className="text-gray12 font-medium" data-sentry-mask>
+                {props.account.login}
+              </span>
+              .
             </Dialog.Description>
             <input
               autoComplete="off"