fix(logs): don't render numbers with >13 digits using commas (#112354)

Extracts a `formatNumber` helper for the numeric field renderer. It
bypasses `formatFloat` for numbers that have over 13 digits.

Tangentially related:

* #110360
* #110858

Fixes EXP-866.

Co-authored-by: Cursor <noreply@cursor.com>

Author: 2 people

static/app/utils/discover/fieldRenderers.tsx

@@ -51,7 +51,7 @@ import {getShortEventId} from 'sentry/utils/events';
 import {formatRate} from 'sentry/utils/formatters';
 import {getDynamicText} from 'sentry/utils/getDynamicText';
 import {formatApdex} from 'sentry/utils/number/formatApdex';
-import {formatFloat} from 'sentry/utils/number/formatFloat';
+import {formatNumber} from 'sentry/utils/number/formatNumber';
 import {formatPercentage} from 'sentry/utils/number/formatPercentage';
 import {toPercent} from 'sentry/utils/number/toPercent';
 import {generateProfileFlamechartRouteWithQuery} from 'sentry/utils/profiling/routes';
@@ -63,10 +63,7 @@ import {
   findLinkedDashboardForField,
   getLinkedDashboardUrl,
 } from 'sentry/views/dashboards/utils/getLinkedDashboardUrl';
-import {
-  NUMBER_MAX_FRACTION_DIGITS,
-  NUMBER_MIN_VALUE,
-} from 'sentry/views/dashboards/widgets/common/settings';
+import {NUMBER_MIN_VALUE} from 'sentry/views/dashboards/widgets/common/settings';
 import {formatTooltipValue} from 'sentry/views/dashboards/widgets/timeSeriesWidget/formatters/formatTooltipValue';
 import {QuickContextHoverWrapper} from 'sentry/views/discover/table/quickContext/quickContextWrapper';
 import {ContextType} from 'sentry/views/discover/table/quickContext/utils';
@@ -319,16 +316,7 @@ export const FIELD_FORMATTERS: FieldFormatters = {
           </NumberContainer>
         );
       }
-      return (
-        <NumberContainer>
-          {formatFloat(data[field], NUMBER_MAX_FRACTION_DIGITS).toLocaleString(
-            undefined,
-            {
-              maximumFractionDigits: NUMBER_MAX_FRACTION_DIGITS,
-            }
-          )}
-        </NumberContainer>
-      );
+      return <NumberContainer>{formatNumber(data[field])}</NumberContainer>;
     },
   },
   percentage: {

static/app/utils/number/formatNumber.spec.ts

@@ -0,0 +1,31 @@
+import {formatNumber} from 'sentry/utils/number/formatNumber';
+
+describe('formatNumber()', () => {
+  it('returns the value with commas when the value has 12 digits', () => {
+    expect(formatNumber(123_456_789_012)).toBe('123,456,789,012');
+  });
+
+  it('returns the value with commas when the value has 13 digits', () => {
+    expect(formatNumber(1_234_567_890_123)).toBe('1,234,567,890,123');
+  });
+
+  it('returns the value when the value has 14 digits', () => {
+    expect(formatNumber(12_345_678_901_234)).toBe(12345678901234);
+  });
+
+  it('returns the value when the value has 15 digits', () => {
+    expect(formatNumber(123_456_789_012_345)).toBe(123456789012345);
+  });
+
+  it('returns the value when the value does not have digits', () => {
+    expect(formatNumber(1)).toBe('1');
+  });
+
+  it('returns the value when the value has fewer digits than NUMBER_MAX_FRACTION_DIGITS', () => {
+    expect(formatNumber(1.2345)).toBe('1.2345');
+  });
+
+  it('returns a truncated value when the value has more digits than NUMBER_MAX_FRACTION_DIGITS', () => {
+    expect(formatNumber(1.23456)).toBe('1.2345');
+  });
+});

static/app/utils/number/formatNumber.ts

@@ -0,0 +1,13 @@
+import {NUMBER_MAX_FRACTION_DIGITS} from 'sentry/views/dashboards/widgets/common/settings';
+
+import {formatFloat} from './formatFloat';
+
+export function formatNumber(value: number) {
+  if (value >= 10_000_000_000_000) {
+    return value;
+  }
+
+  return formatFloat(value, NUMBER_MAX_FRACTION_DIGITS).toLocaleString(undefined, {
+    maximumFractionDigits: NUMBER_MAX_FRACTION_DIGITS,
+  });
+}