feat(ourlogs): Add pii scrubbing reason tooltip to logs scrubbed fields (#98120)

### Summary
This adds the scrubbing reason as a tooltip when hovering the 'Filtered'
etc. scrubbed text

#### Screenshots
<img width="431" height="243" alt="Screenshot 2025-08-21 at 6 38 54 PM"
src="https://github.com/user-attachments/assets/7a4a1bb5-bbda-4df0-84ca-84042124c630"
/>


Closes LOGS-81

Author: k-fish

static/app/utils/discover/fieldRenderers.tsx

@@ -57,6 +57,7 @@ import {decodeScalar} from 'sentry/utils/queryString';
 import {isUrl} from 'sentry/utils/string/isUrl';
 import {QuickContextHoverWrapper} from 'sentry/views/discover/table/quickContext/quickContextWrapper';
 import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
+import type {TraceItemDetailsMeta} from 'sentry/views/explore/hooks/useTraceItemDetails';
 import {PerformanceBadge} from 'sentry/views/insights/browser/webVitals/components/performanceBadge';
 import {PercentChangeCell} from 'sentry/views/insights/common/components/tableCells/percentChangeCell';
 import {ResponseStatusCodeCell} from 'sentry/views/insights/common/components/tableCells/responseStatusCodeCell';
@@ -105,6 +106,11 @@ export type RenderFunctionBaggage = {
   disableLazyLoad?: boolean;
   eventView?: EventView;
   projectSlug?: string;
+  /**
+   * The trace item meta data for the trace item, which includes information needed to render annotated tooltip (eg. scrubbing reasons)
+   */
+  traceItemMeta?: TraceItemDetailsMeta;
+
   unit?: string;
 };
 

static/app/views/explore/components/annotatedAttributeTooltip.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import {Tooltip} from 'sentry/components/core/tooltip';
+import type {Project} from 'sentry/types/project';
+import {useApiQuery} from 'sentry/utils/queryClient';
+import type {RendererExtra} from 'sentry/views/explore/logs/fieldRenderers';
+import {TraceItemMetaInfo} from 'sentry/views/explore/utils';
+
+export function AnnotatedAttributeTooltip({
+  children,
+  extra,
+  fieldKey,
+}: {
+  children: React.ReactNode;
+  extra: Pick<RendererExtra, 'traceItemMeta' | 'organization' | 'project'>;
+  fieldKey?: string;
+}) {
+  // Fetch full project details including `project.relayPiiConfig`
+  // That property is not normally available in the store.
+  // Taken from FilteredAnnotatedTextValue.tsx
+  const {data: projectDetails} = useApiQuery<Project>(
+    [`/projects/${extra.organization.slug}/${extra.project?.slug}/`],
+    {
+      staleTime: Infinity,
+      retry: false,
+      enabled: !!extra.project?.slug && !!fieldKey && !!extra.traceItemMeta,
+      notifyOnChangeProps: ['data'],
+    }
+  );
+
+  // Check if there's meta information for this field
+  if (!fieldKey || !extra.traceItemMeta) {
+    return <React.Fragment>{children}</React.Fragment>;
+  }
+
+  const metaTooltip = TraceItemMetaInfo.getTooltipText(
+    fieldKey,
+    extra.traceItemMeta,
+    extra.organization,
+    projectDetails
+  );
+
+  if (!metaTooltip) {
+    return <React.Fragment>{children}</React.Fragment>;
+  }
+
+  return (
+    <Tooltip title={metaTooltip} isHoverable>
+      {children}
+    </Tooltip>
+  );
+}

static/app/views/explore/components/traceItemAttributes/attributesTreeValue.tsx

@@ -5,7 +5,9 @@ import {openNavigateToExternalLinkModal} from 'sentry/actionCreators/modal';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {type RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
 import {isUrl} from 'sentry/utils/string/isUrl';
+import {AnnotatedAttributeTooltip} from 'sentry/views/explore/components/annotatedAttributeTooltip';
 import {getAttributeItem} from 'sentry/views/explore/components/traceItemAttributes/utils';
+import {TraceItemMetaInfo} from 'sentry/views/explore/utils';
 
 import type {
   AttributesFieldRender,
@@ -45,6 +47,16 @@ export function AttributesTreeValue<RendererExtra extends RenderFunctionBaggage>
     });
   }
 
+  if (renderExtra.traceItemMeta) {
+    const metaInfo = new TraceItemMetaInfo(renderExtra.traceItemMeta);
+    if (metaInfo.hasRemarks(attributeKey)) {
+      return (
+        <AnnotatedAttributeTooltip fieldKey={attributeKey} extra={renderExtra}>
+          {defaultValue}
+        </AnnotatedAttributeTooltip>
+      );
+    }
+  }
   return isUrl(String(content.value)) ? (
     <AttributeLinkText>
       <ExternalLink

static/app/views/explore/hooks/useTraceItemDetails.tsx

@@ -1,12 +1,9 @@
+import {useState} from 'react';
 import {useHover} from '@react-aria/interactions';
 import {captureException} from '@sentry/react';
 
-import {
-  fetchDataQuery,
-  useApiQuery,
-  useQueryClient,
-  type ApiQueryKey,
-} from 'sentry/utils/queryClient';
+import type {Meta} from 'sentry/types/group';
+import {useApiQuery, type ApiQueryKey} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import useProjectFromId from 'sentry/utils/useProjectFromId';
 import type {TraceItemDataset} from 'sentry/views/explore/types';
@@ -43,9 +40,21 @@ interface UseTraceItemDetailsProps {
   enabled?: boolean;
 }
 
+export type TraceItemAttributeMeta = Pick<Meta, 'len' | 'rem'>;
+interface TraceItemDetailsMetaRecord {
+  meta: {
+    value: {
+      '': TraceItemAttributeMeta;
+    };
+  };
+}
+
+export type TraceItemDetailsMeta = Record<string, TraceItemDetailsMetaRecord>;
+
 export interface TraceItemDetailsResponse {
   attributes: TraceItemResponseAttribute[];
   itemId: string;
+  meta: TraceItemDetailsMeta;
   timestamp: string;
   links?: TraceItemResponseLink[];
 }
@@ -137,7 +146,7 @@ function traceItemDetailsQueryKey({
   ];
 }
 
-export function usePrefetchTraceItemDetailsOnHover({
+export function useFetchTraceItemDetailsOnHover({
   traceItemId,
   projectId,
   traceId,
@@ -161,32 +170,23 @@ export function usePrefetchTraceItemDetailsOnHover({
    */
   hoverPrefetchDisabled?: boolean;
 }) {
-  const organization = useOrganization();
-  const project = useProjectFromId({project_id: projectId});
-  const queryClient = useQueryClient();
+  const [timeoutReached, setTimeoutReached] = useState(false);
+  const traceItemsResult = useTraceItemDetails({
+    projectId,
+    traceItemId,
+    traceId,
+    traceItemType,
+    referrer,
+    enabled: timeoutReached,
+  });
 
   const {hoverProps} = useHover({
     onHoverStart: () => {
       if (sharedHoverTimeoutRef.current) {
         clearTimeout(sharedHoverTimeoutRef.current);
       }
       sharedHoverTimeoutRef.current = setTimeout(() => {
-        queryClient.prefetchQuery({
-          queryKey: traceItemDetailsQueryKey({
-            urlParams: {
-              organizationSlug: organization.slug,
-              projectSlug: project?.slug ?? '',
-              traceItemId,
-            },
-            queryParams: {
-              traceItemType,
-              referrer,
-              traceId,
-            },
-          }),
-          queryFn: fetchDataQuery,
-          staleTime: Infinity, // Prefetched items are never stale as the row is either entirely stored or not stored at all.
-        });
+        setTimeoutReached(true);
       }, timeout);
     },
     onHoverEnd: () => {
@@ -197,5 +197,8 @@ export function usePrefetchTraceItemDetailsOnHover({
     isDisabled: hoverPrefetchDisabled,
   });
 
-  return hoverProps;
+  return {
+    hoverProps,
+    traceItemsResult,
+  };
 }

static/app/views/explore/logs/fieldRenderers.tsx

@@ -7,6 +7,7 @@ import {DateTime} from 'sentry/components/dateTime';
 import useStacktraceLink from 'sentry/components/events/interfaces/frame/useStacktraceLink';
 import Version from 'sentry/components/version';
 import {tct} from 'sentry/locale';
+import type {Project} from 'sentry/types/project';
 import {defined} from 'sentry/utils';
 import {stripAnsi} from 'sentry/utils/ansiEscapeCodes';
 import type {EventsMetaType} from 'sentry/utils/discover/eventView';
@@ -20,9 +21,13 @@ import normalizeUrl from 'sentry/utils/url/normalizeUrl';
 import {useRelease} from 'sentry/utils/useRelease';
 import {QuickContextHoverWrapper} from 'sentry/views/discover/table/quickContext/quickContextWrapper';
 import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
+import {AnnotatedAttributeTooltip} from 'sentry/views/explore/components/annotatedAttributeTooltip';
 import type {AttributesFieldRendererProps} from 'sentry/views/explore/components/traceItemAttributes/attributesTree';
 import {stripLogParamsFromLocation} from 'sentry/views/explore/contexts/logs/logsPageParams';
-import type {TraceItemResponseAttribute} from 'sentry/views/explore/hooks/useTraceItemDetails';
+import type {
+  TraceItemDetailsResponse,
+  TraceItemResponseAttribute,
+} from 'sentry/views/explore/hooks/useTraceItemDetails';
 import {LOG_ATTRIBUTE_LAZY_LOAD_HOVER_TIMEOUT} from 'sentry/views/explore/logs/constants';
 import LogsTimestampTooltip from 'sentry/views/explore/logs/logsTimeTooltip';
 import {
@@ -44,10 +49,12 @@ import {
 import {
   adjustLogTraceID,
   getLogSeverityLevel,
+  logOnceFactory,
   logsFieldAlignment,
   SeverityLevel,
   severityLevelToText,
 } from 'sentry/views/explore/logs/utils';
+import {TraceItemMetaInfo} from 'sentry/views/explore/utils';
 import {TraceViewSources} from 'sentry/views/performance/newTraceDetails/traceHeader/breadcrumbs';
 import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 
@@ -62,8 +69,11 @@ export interface RendererExtra extends RenderFunctionBaggage {
   highlightTerms: string[];
   logColors: ReturnType<typeof getLogColors>;
   align?: 'left' | 'center' | 'right';
+  meta?: EventsMetaType;
+  project?: Project;
   projectSlug?: string;
   shouldRenderHoverElements?: boolean;
+  traceItemMeta?: TraceItemDetailsResponse['meta'];
   useFullSeverityText?: boolean;
   wrapBody?: true;
 }
@@ -250,6 +260,11 @@ function useLazyLoadAttributeOnHover(hoverTimeout: number, props: LogFieldRender
   };
 }
 
+/**
+ * This should only wrap the 'body' attribute as it is the only 'field' that is not returned by the trace-items endpoint (since it is not an attribute but rather a field).
+ *
+ * Once the trace-items endpoint returns 'body', we can remove this component.
+ */
 function FilteredTooltip({
   value,
   children,
@@ -346,13 +361,11 @@ export function LogBodyRenderer(props: LogFieldRendererProps) {
 
 function LogTemplateRenderer(props: LogFieldRendererProps) {
   return (
-    <FilteredTooltip value={props.item.value} extra={props.extra}>
-      <span>
-        {typeof props.item.value === 'string'
-          ? stripAnsi(props.item.value)
-          : props.basicRendered}
-      </span>
-    </FilteredTooltip>
+    <span>
+      {typeof props.item.value === 'string'
+        ? stripAnsi(props.item.value)
+        : props.basicRendered}
+    </span>
   );
 }
 
@@ -399,16 +412,59 @@ export function LogFieldRenderer(props: LogFieldRendererProps) {
   const align = logsFieldAlignment(adjustedFieldKey, type);
 
   if (!customRenderer) {
-    return <Fragment>{basicRendered}</Fragment>;
+    return (
+      <AnnotatedAttributeWrapper extra={props.extra} fieldKey={props.item.fieldKey}>
+        {basicRendered}
+      </AnnotatedAttributeWrapper>
+    );
   }
 
   return (
-    <AlignedCellContent align={align}>
-      {customRenderer({...props, basicRendered})}
-    </AlignedCellContent>
+    <AnnotatedAttributeWrapper extra={props.extra} fieldKey={props.item.fieldKey}>
+      <AlignedCellContent align={align}>
+        {customRenderer({...props, basicRendered})}
+      </AlignedCellContent>
+    </AnnotatedAttributeWrapper>
   );
 }
 
+const logInfoOnceHasRemarks = logOnceFactory('info');
+
+function AnnotatedAttributeWrapper(props: {
+  children: React.ReactNode;
+  extra: RendererExtra;
+  fieldKey: string;
+}) {
+  if (props.extra.traceItemMeta) {
+    const metaInfo = new TraceItemMetaInfo(props.extra.traceItemMeta);
+    if (metaInfo.hasRemarks(props.fieldKey)) {
+      try {
+        logInfoOnceHasRemarks(
+          `AnnotatedAttributeWrapper: ${props.fieldKey} has remarks, rendering tooltip`,
+          {
+            organization: props.extra.organization,
+            project: props.extra.project,
+            text: TraceItemMetaInfo.getTooltipText(
+              props.fieldKey,
+              props.extra.traceItemMeta,
+              props.extra.organization,
+              props.extra.project
+            ),
+          }
+        );
+      } catch {
+        // defensive
+      }
+      return (
+        <AnnotatedAttributeTooltip extra={props.extra} fieldKey={props.fieldKey}>
+          {props.children}
+        </AnnotatedAttributeTooltip>
+      );
+    }
+  }
+  return props.children;
+}
+
 /**
  * Only formats the field the same as discover does, does not apply any additional rendering, but has a container to fix styling.
  */

static/app/views/explore/logs/tables/logsInfiniteTable.spec.tsx

@@ -5,6 +5,7 @@ import {OrganizationFixture} from 'sentry-fixture/organization';
 import {ProjectFixture} from 'sentry-fixture/project';
 
 import {
+  act,
   render,
   screen,
   userEvent,
@@ -254,7 +255,9 @@ describe('LogsInfiniteTable', () => {
     for (const row of allTreeRows) {
       for (const field of visibleColumnFields) {
         await userEvent.hover(row, {delay: null});
-        jest.advanceTimersByTime(DEFAULT_TRACE_ITEM_HOVER_TIMEOUT + 1);
+        act(() => {
+          jest.advanceTimersByTime(DEFAULT_TRACE_ITEM_HOVER_TIMEOUT + 1);
+        });
         const cell = await within(row).findByTestId(`log-table-cell-${field}`);
         const actionsButton = within(cell).queryByRole('button', {
           name: 'Actions',