feat(ourlogs): Use new aliases, add byte renderer (#97725)

k-fish · web-flow · commit 4df639d03ed0 · 2025-08-12T19:16:57.000-04:00
### Summary
This adds units for the bytes in payload_size and updates the timestamp
and observed aliases to not be prefixed by sentry
diff --git a/static/app/components/events/ourlogs/ourlogsSection.spec.tsx b/static/app/components/events/ourlogs/ourlogsSection.spec.tsx
@@ -6,6 +6,7 @@ import {ProjectFixture} from 'sentry-fixture/project';
 import {render, screen, userEvent, within} from 'sentry-test/reactTestingLibrary';
 
 import {OurlogsSection} from 'sentry/components/events/ourlogs/ourlogsSection';
+import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
 
 const TRACE_ID = '00000000000000000000000000000000';
 
@@ -97,7 +98,7 @@ describe('OurlogsSection', function () {
             severity_number: 0,
             severity: 'info',
             timestamp: now.toISOString(),
-            'tags[sentry.timestamp_precise,number]': now.getTime() * 1e6,
+            [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: now.getTime() * 1e6,
             message: 'i am a log',
           },
         ],
diff --git a/static/app/utils/discover/fieldRenderers.tsx b/static/app/utils/discover/fieldRenderers.tsx
@@ -191,6 +191,7 @@ export const SIZE_UNITS = {
 };
 
 export const ABYTE_UNITS = [
+  'byte',
   'kilobyte',
   'megabyte',
   'gigabyte',
diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTooltipValue.spec.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTooltipValue.spec.tsx
@@ -46,7 +46,7 @@ describe('formatTooltipValue', () => {
 
   describe('size', () => {
     it.each([
-      [0, 'byte', '0.0 B'],
+      [0, 'byte', '0 B'],
       [0.712, 'megabyte', '712 KB'],
       [1231, 'kibibyte', '1.2 MiB'],
     ])('Formats %s as %s', (value, unit, formattedValue) => {
diff --git a/static/app/views/explore/logs/fieldRenderers.spec.tsx b/static/app/views/explore/logs/fieldRenderers.spec.tsx
@@ -40,6 +40,7 @@ describe('Logs Field Renderers', function () {
       organization,
       location: {} as any,
       theme: ThemeFixture(),
+      attributeTypes: {},
       attributes,
       highlightTerms: [],
       logColors: {
@@ -107,7 +108,7 @@ describe('Logs Field Renderers', function () {
       expect(TimestampRenderer).toBeDefined();
       const preciseTimestamp = '1705329045123456789';
       const props = makeRendererProps(timestamp, {
-        'tags[sentry.timestamp_precise,number]': preciseTimestamp,
+        [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: preciseTimestamp,
       });
       const result = TimestampRenderer!(props);
 
diff --git a/static/app/views/explore/logs/fieldRenderers.tsx b/static/app/views/explore/logs/fieldRenderers.tsx
@@ -9,24 +9,27 @@ import Version from 'sentry/components/version';
 import {tct} from 'sentry/locale';
 import {defined} from 'sentry/utils';
 import {stripAnsi} from 'sentry/utils/ansiEscapeCodes';
+import type {EventsMetaType} from 'sentry/utils/discover/eventView';
 import {
   getFieldRenderer,
   type RenderFunctionBaggage,
 } from 'sentry/utils/discover/fieldRenderers';
-import {parseFunction} from 'sentry/utils/discover/fields';
+import {parseFunction, type ColumnValueType} from 'sentry/utils/discover/fields';
 import {NumberContainer, VersionContainer} from 'sentry/utils/discover/styles';
 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 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 {LOG_ATTRIBUTE_LAZY_LOAD_HOVER_TIMEOUT} from 'sentry/views/explore/logs/constants';
 import LogsTimestampTooltip from 'sentry/views/explore/logs/logsTimeTooltip';
 import {
   AlignedCellContent,
   ColoredLogCircle,
   ColoredLogText,
+  LogBasicRendererContainer,
   LogDate,
   LogsHighlight,
   WrappingText,
@@ -51,6 +54,10 @@ import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 interface LogFieldRendererProps extends AttributesFieldRendererProps<RendererExtra> {}
 
 export interface RendererExtra extends RenderFunctionBaggage {
+  attributeTypes: Record<
+    string,
+    TraceItemResponseAttribute['type'] | EventsMetaType['fields'][string]
+  >;
   attributes: Record<string, string | number | boolean>;
   highlightTerms: string[];
   logColors: ReturnType<typeof getLogColors>;
@@ -120,8 +127,8 @@ export function SeverityCircleRenderer(props: Omit<LogFieldRendererProps, 'item'
 }
 
 function TimestampRenderer(props: LogFieldRendererProps) {
-  const preciseTimestamp =
-    props.extra.attributes?.['tags[sentry.timestamp_precise,number]'];
+  const preciseTimestamp = props.extra.attributes[OurLogKnownFieldKey.TIMESTAMP_PRECISE];
+
   const timestampToUse = preciseTimestamp
     ? new Date(Number(preciseTimestamp) / 1_000_000) // Convert nanoseconds to milliseconds
     : props.item.value;
@@ -402,6 +409,50 @@ export function LogFieldRenderer(props: LogFieldRendererProps) {
   );
 }
 
+/**
+ * Only formats the field the same as discover does, does not apply any additional rendering, but has a container to fix styling.
+ */
+function BasicDiscoverRenderer(props: LogFieldRendererProps) {
+  const logMeta: EventsMetaType =
+    Object.keys(props.meta ?? {}).length > 0 ? props.meta! : logFieldBasicMetas;
+  const basicRenderer = getFieldRenderer(props.item.fieldKey, logMeta, false);
+  const attributeType = props.extra.attributeTypes[props.item.fieldKey];
+  const align = logsFieldAlignment(props.item.fieldKey, attributeType as ColumnValueType);
+  let castValue: string | number | boolean | null = props.item.value;
+  // TODO: Values being emitted by ProjectTraceItemDetails and Events should be the same type, and their type names should match (or be casted from rpc types to discover types).
+  if (
+    attributeType === 'int' ||
+    attributeType === 'float' ||
+    attributeType === 'size' ||
+    attributeType === 'number' ||
+    attributeType === 'integer' ||
+    attributeType === 'duration' ||
+    attributeType === 'percentage' ||
+    attributeType === 'rate' ||
+    attributeType === 'percent_change' ||
+    attributeType === 'score'
+  ) {
+    castValue = Number(props.item.value);
+  }
+  if (attributeType === 'bool' || attributeType === 'boolean') {
+    castValue = Boolean(props.item.value);
+  }
+  return (
+    <LogBasicRendererContainer align={align}>
+      {basicRenderer(
+        {
+          [props.item.fieldKey]: castValue,
+        },
+        {
+          unit: logMeta.units[props.item.fieldKey] ?? undefined,
+          ...props.extra,
+          theme: props.extra.theme,
+        }
+      )}
+    </LogBasicRendererContainer>
+  );
+}
+
 export const LogAttributesRendererMap: Record<
   OurLogFieldKey,
   (props: LogFieldRendererProps) => React.ReactNode
@@ -415,8 +466,19 @@ export const LogAttributesRendererMap: Record<
   [OurLogKnownFieldKey.CODE_FILE_PATH]: CodePathRenderer,
   [OurLogKnownFieldKey.RELEASE]: ReleaseRenderer,
   [OurLogKnownFieldKey.TEMPLATE]: LogTemplateRenderer,
+  [OurLogKnownFieldKey.PAYLOAD_SIZE]: BasicDiscoverRenderer,
 };
 
 const fullFieldToExistingField: Record<OurLogFieldKey, string> = {
   [OurLogKnownFieldKey.TRACE_ID]: 'trace',
 };
+
+// Meta returned from TraceItemDetails is empty, in which case we can provide our own meta to map known fields to their types to get the basic rendering working.
+const logFieldBasicMetas: EventsMetaType = {
+  fields: {
+    [OurLogKnownFieldKey.PAYLOAD_SIZE]: 'size',
+  },
+  units: {
+    [OurLogKnownFieldKey.PAYLOAD_SIZE]: 'byte', // SIZE_UNITS
+  },
+};
diff --git a/static/app/views/explore/logs/logsTab.spec.tsx b/static/app/views/explore/logs/logsTab.spec.tsx
@@ -14,6 +14,7 @@ import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceIte
 import {AlwaysPresentLogFields} from 'sentry/views/explore/logs/constants';
 import {LogsQueryParamsProvider} from 'sentry/views/explore/logs/logsQueryParamsProvider';
 import {LogsTabContent} from 'sentry/views/explore/logs/logsTab';
+import {OurLogKnownFieldKey} from 'sentry/views/explore/logs/types';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 import type {PickableDays} from 'sentry/views/explore/utils';
 
@@ -82,7 +83,7 @@ describe('LogsTabContent', function () {
             severity_text: 'info',
             timestamp: '2025-04-10T19:21:12+00:00',
             message: 'some log message1',
-            'tags[sentry.timestamp_precise,number]': 1.7443128722090732e18,
+            [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: 1.7443128722090732e18,
           },
           {
             'sentry.item_id': '0196212624a17144aa392d01420256a2',
@@ -92,7 +93,7 @@ describe('LogsTabContent', function () {
             severity_text: 'info',
             timestamp: '2025-04-10T19:21:10+00:00',
             message: 'some log message2',
-            'tags[sentry.timestamp_precise,number]': 1.744312870049196e18,
+            [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: 1.744312870049196e18,
           },
         ],
         meta: {
@@ -104,7 +105,7 @@ describe('LogsTabContent', function () {
             severity_text: 'string',
             timestamp: 'string',
             message: 'string',
-            'tags[sentry.timestamp_precise,number]': 'number',
+            [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: 'number',
           },
           units: {
             'sentry.item_id': null,
@@ -114,7 +115,7 @@ describe('LogsTabContent', function () {
             severity_text: null,
             timestamp: null,
             message: null,
-            'tags[sentry.timestamp_precise,number]': null,
+            [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: null,
           },
           isMetricsData: false,
           isMetricsExtractedData: false,
@@ -192,8 +193,7 @@ describe('LogsTabContent', function () {
           dataset: 'ourlogs',
           yAxis: 'count(message)',
           interval: '1h',
-          query:
-            'severity:error tags[sentry.timestamp_precise,number]:<=1508208040000000000',
+          query: 'severity:error timestamp_precise:<=1508208040000000000',
         }),
       })
     );
diff --git a/static/app/views/explore/logs/styles.tsx b/static/app/views/explore/logs/styles.tsx
@@ -8,6 +8,7 @@ import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import Panel from 'sentry/components/panels/panel';
 import {GRID_BODY_ROW_HEIGHT} from 'sentry/components/tables/gridEditable/styles';
 import {space} from 'sentry/styles/space';
+import {NumberContainer} from 'sentry/utils/discover/styles';
 import {chonkStyled} from 'sentry/utils/theme/theme.chonk';
 import {withChonk} from 'sentry/utils/theme/withChonk';
 import {unreachable} from 'sentry/utils/unreachable';
@@ -116,6 +117,12 @@ export const LogFirstCellContent = styled('div')`
   align-items: center;
 `;
 
+export const LogBasicRendererContainer = styled('span')<{align?: 'left' | 'right'}>`
+  ${NumberContainer} {
+    text-align: ${p => p.align || 'left'};
+  }
+`;
+
 export const DetailsBody = styled('div')`
   display: flex;
   border-bottom: 1px solid ${p => p.theme.innerBorder};
diff --git a/static/app/views/explore/logs/tables/logsAggregateTable.tsx b/static/app/views/explore/logs/tables/logsAggregateTable.tsx
@@ -105,6 +105,7 @@ export function LogsAggregateTable() {
                 : (row[column.key] as string | number);
             const extra: RendererExtra = {
               attributes: row,
+              attributeTypes: data?.meta?.fields ?? {},
               highlightTerms: [],
               logColors: getLogColors(SeverityLevel.DEFAULT, theme),
               location,
diff --git a/static/app/views/explore/logs/tables/logsTable.spec.tsx b/static/app/views/explore/logs/tables/logsTable.spec.tsx
@@ -82,7 +82,7 @@ describe('LogsTable', function () {
           '10.5.55.212 - - [05/May/2025:18:36:15 +0000] "POST /v1/automation/autofix/state HTTP/1.1" 200 293642 "-" "python-requests/2.32.3"',
         'sentry.release': '985bae16edc2f3f8132e346a4f6c5a559f7c968b',
         'code.file.path': '/usr/local/lib/python3.11/dist-packages/gunicorn/glogging.py',
-        'tags[sentry.timestamp_precise,number]': 1.7464701752771756e18,
+        [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: 1.7464701752771756e18,
       },
       {
         'sentry.item_id': '0196a1bc00e3720f8d47c84c53131891',
@@ -95,7 +95,7 @@ describe('LogsTable', function () {
           '10.5.58.189 - - [05/May/2025:18:36:14 +0000] "POST /v0/issues/similar-issues HTTP/1.1" 200 131 "-" "python-urllib3/2.2.2"',
         'sentry.release': '985bae16edc2f3f8132e346a4f6c5a559f7c968b',
         'code.file.path': '/usr/local/lib/python3.11/dist-packages/gunicorn/glogging.py',
-        'tags[sentry.timestamp_precise,number]': 1.746470174947077e18,
+        [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: 1.746470174947077e18,
       },
       {
         'sentry.item_id': '0196a1bc007c7dfbbe099b6328e41d12',
@@ -108,7 +108,7 @@ describe('LogsTable', function () {
           '10.5.62.140 - - [05/May/2025:18:36:14 +0000] "POST /v0/issues/similar-issues HTTP/1.1" 200 586 "-" "python-urllib3/2.2.2"',
         'sentry.release': '985bae16edc2f3f8132e346a4f6c5a559f7c968b',
         'code.file.path': '/usr/local/lib/python3.11/dist-packages/gunicorn/glogging.py',
-        'tags[sentry.timestamp_precise,number]': 1.7464701748443016e18,
+        [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: 1.7464701748443016e18,
       },
     ],
     meta: {
@@ -122,7 +122,7 @@ describe('LogsTable', function () {
         message: 'string',
         'sentry.release': 'string',
         'code.file.path': 'string',
-        'tags[sentry.timestamp_precise,number]': 'number',
+        [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: 'number',
       },
     },
     isLoading: false,
diff --git a/static/app/views/explore/logs/tables/logsTableRow.tsx b/static/app/views/explore/logs/tables/logsTableRow.tsx
@@ -234,6 +234,7 @@ export const LogRowContent = memo(function LogRowContent({
     location,
     organization,
     attributes: dataRow,
+    attributeTypes: meta?.fields ?? {},
     theme,
     projectSlug,
   };
@@ -406,6 +407,8 @@ function LogRowDetails({
     data?.attributes?.reduce((it, {name, value}) => ({...it, [name]: value}), {
       [OurLogKnownFieldKey.TIMESTAMP]: dataRow[OurLogKnownFieldKey.TIMESTAMP],
     }) ?? {};
+  const attributeTypes =
+    data?.attributes?.reduce((it, {name, type}) => ({...it, [name]: type}), {}) ?? {};
 
   if (missingLogId || isError) {
     return (
@@ -437,6 +440,7 @@ function LogRowDetails({
                     organization,
                     projectSlug,
                     attributes,
+                    attributeTypes,
                     theme,
                   },
                 })}
@@ -456,6 +460,7 @@ function LogRowDetails({
                     organization,
                     projectSlug,
                     attributes,
+                    attributeTypes,
                     theme,
                     disableLazyLoad: true, // We disable lazy loading in the log details view since a user has to open it first.
                   }}
diff --git a/static/app/views/explore/logs/types.tsx b/static/app/views/explore/logs/types.tsx
@@ -25,14 +25,19 @@ export enum OurLogKnownFieldKey {
   PROJECT = 'project',
   SPAN_ID = 'span_id',
   TIMESTAMP = 'timestamp',
-  TIMESTAMP_PRECISE = 'tags[sentry.timestamp_precise,number]',
-  OBSERVED_TIMESTAMP_PRECISE = 'sentry.observed_timestamp_nanos',
+  TIMESTAMP_PRECISE = 'timestamp_precise',
+  OBSERVED_TIMESTAMP_PRECISE = 'observed_timestamp',
+
+  PAYLOAD_SIZE = 'payload_size',
+
+  TEMPLATE = 'message.template',
+  PARENT_SPAN_ID = 'trace.parent_span_id',
+
+  // Field renderer aliases
   CODE_FILE_PATH = 'code.file.path',
   CODE_LINE_NUMBER = 'tags[code.line.number,number]',
   CODE_FUNCTION_NAME = 'code.function.name',
 
-  TEMPLATE = 'message.template',
-  PARENT_SPAN_ID = 'trace.parent_span_id',
   // SDK attributes https://develop.sentry.dev/sdk/telemetry/logs/#default-attributes
   RELEASE = 'release',
   SDK_NAME = 'sdk.name',
@@ -64,6 +69,7 @@ type OurLogsKnownFieldResponseMap = Record<
   [OurLogKnownFieldKey.PROJECT_ID]: string;
   [OurLogKnownFieldKey.TIMESTAMP]: string;
   [OurLogKnownFieldKey.TIMESTAMP_PRECISE]: string | number;
+  [OurLogKnownFieldKey.OBSERVED_TIMESTAMP_PRECISE]: string | number;
 };
 
 type OurLogsCustomFieldResponseMap = Record<OurLogCustomFieldKey, string | number>;
diff --git a/static/app/views/explore/logs/useLogsQuery.spec.tsx b/static/app/views/explore/logs/useLogsQuery.spec.tsx
diff --git a/static/app/views/insights/cache/views/cacheLandingPage.spec.tsx b/static/app/views/insights/cache/views/cacheLandingPage.spec.tsx
diff --git a/static/app/views/performance/newTraceDetails/traceOurlogs.spec.tsx b/static/app/views/performance/newTraceDetails/traceOurlogs.spec.tsx
diff --git a/tests/js/fixtures/log.ts b/tests/js/fixtures/log.ts
