fix(replay): Ensure console breadcrumb args are truncated

Author: mydea

packages/replay/src/coreHandlers/handleScope.ts

@@ -1,11 +1,15 @@
 import type { Breadcrumb, Scope } from '@sentry/types';
+import { normalize } from '@sentry/utils';
 
 import type { ReplayContainer } from '../types';
 import { createBreadcrumb } from '../util/createBreadcrumb';
+import { fixJson } from '../util/truncateJson/fixJson';
 import { addBreadcrumbEvent } from './util/addBreadcrumbEvent';
 
 let _LAST_BREADCRUMB: null | Breadcrumb = null;
 
+export const CONSOLE_ARG_MAX_SIZE = 5_000;
+
 export const handleScopeListener: (replay: ReplayContainer) => (scope: Scope) => void =
   (replay: ReplayContainer) =>
   (scope: Scope): void => {
@@ -48,5 +52,60 @@ export function handleScope(scope: Scope): Breadcrumb | null {
     return null;
   }
 
+  if (newBreadcrumb.category === 'console') {
+    return normalizeConsoleBreadcrumb(newBreadcrumb);
+  }
+
   return createBreadcrumb(newBreadcrumb);
 }
+
+/** exported for tests only */
+export function normalizeConsoleBreadcrumb(breadcrumb: Breadcrumb): Breadcrumb {
+  const args = breadcrumb.data && breadcrumb.data.arguments;
+
+  if (!Array.isArray(args) || args.length === 0) {
+    return createBreadcrumb(breadcrumb);
+  }
+
+  let isTruncated = false;
+
+  // Avoid giant args captures
+  const normalizedArgs = args.map(arg => {
+    if (!arg) {
+      return arg;
+    }
+    if (typeof arg === 'string') {
+      if (arg.length > CONSOLE_ARG_MAX_SIZE) {
+        isTruncated = true;
+        return `${arg.slice(0, CONSOLE_ARG_MAX_SIZE)}…`;
+      }
+
+      return arg;
+    }
+    if (typeof arg === 'object') {
+      try {
+        const normalizedArg = normalize(arg, 7);
+        const stringified = JSON.stringify(normalizedArg);
+        if (stringified.length > CONSOLE_ARG_MAX_SIZE) {
+          isTruncated = true;
+          const fixedJson = fixJson(stringified.slice(0, CONSOLE_ARG_MAX_SIZE));
+          return JSON.parse(fixedJson);
+        }
+        return normalizedArg;
+      } catch {
+        // fall back to default
+      }
+    }
+
+    return arg;
+  });
+
+  return createBreadcrumb({
+    ...breadcrumb,
+    data: {
+      ...breadcrumb.data,
+      arguments: normalizedArgs,
+      _meta: isTruncated ? { warnings: ['CONSOLE_ARG_TRUNCATED'] } : undefined,
+    },
+  });
+}

packages/replay/test/unit/coreHandlers/handleScope.test.ts

@@ -59,4 +59,91 @@ describe('Unit | coreHandlers | handleScope', () => {
     expect(mockHandleScope).toHaveBeenCalledTimes(1);
     expect(mockHandleScope).toHaveReturnedWith(null);
   });
+
+  describe('normalizeConsoleBreadcrumb', () => {
+    it('handles console messages with no arguments', () => {
+      const breadcrumb: Breadcrumb = { category: 'console', message: 'test' };
+      const actual = HandleScope.normalizeConsoleBreadcrumb(breadcrumb);
+
+      expect(actual).toMatchObject({ category: 'console', message: 'test' });
+    });
+
+    it('handles console messages with empty arguments', () => {
+      const breadcrumb: Breadcrumb = { category: 'console', message: 'test', data: { arguments: [] } };
+      const actual = HandleScope.normalizeConsoleBreadcrumb(breadcrumb);
+
+      expect(actual).toMatchObject({ category: 'console', message: 'test', data: { arguments: [] } });
+    });
+
+    it('handles console messages with simple arguments', () => {
+      const breadcrumb: Breadcrumb = {
+        category: 'console',
+        message: 'test',
+        data: { arguments: [1, 'a', true, null, undefined] },
+      };
+      const actual = HandleScope.normalizeConsoleBreadcrumb(breadcrumb);
+
+      expect(actual).toMatchObject({
+        category: 'console',
+        message: 'test',
+        data: {
+          arguments: [1, 'a', true, null, undefined],
+        },
+      });
+    });
+
+    it('truncates large strings', () => {
+      const breadcrumb: Breadcrumb = {
+        category: 'console',
+        message: 'test',
+        data: {
+          arguments: [
+            'a'.repeat(HandleScope.CONSOLE_ARG_MAX_SIZE + 10),
+            'b'.repeat(HandleScope.CONSOLE_ARG_MAX_SIZE + 10),
+          ],
+        },
+      };
+      const actual = HandleScope.normalizeConsoleBreadcrumb(breadcrumb);
+
+      expect(actual).toMatchObject({
+        category: 'console',
+        message: 'test',
+        data: {
+          arguments: [
+            `${'a'.repeat(HandleScope.CONSOLE_ARG_MAX_SIZE)}…`,
+            `${'b'.repeat(HandleScope.CONSOLE_ARG_MAX_SIZE)}…`,
+          ],
+          _meta: { warnings: ['CONSOLE_ARG_TRUNCATED'] },
+        },
+      });
+    });
+
+    it('truncates large JSON objects', () => {
+      const breadcrumb: Breadcrumb = {
+        category: 'console',
+        message: 'test',
+        data: {
+          arguments: [
+            { aa: 'yes' },
+            { bb: 'b'.repeat(HandleScope.CONSOLE_ARG_MAX_SIZE + 10) },
+            { c: 'c'.repeat(HandleScope.CONSOLE_ARG_MAX_SIZE + 10) },
+          ],
+        },
+      };
+      const actual = HandleScope.normalizeConsoleBreadcrumb(breadcrumb);
+
+      expect(actual).toMatchObject({
+        category: 'console',
+        message: 'test',
+        data: {
+          arguments: [
+            { aa: 'yes' },
+            { bb: `${'b'.repeat(HandleScope.CONSOLE_ARG_MAX_SIZE - 7)}~~` },
+            { c: `${'c'.repeat(HandleScope.CONSOLE_ARG_MAX_SIZE - 6)}~~` },
+          ],
+          _meta: { warnings: ['CONSOLE_ARG_TRUNCATED'] },
+        },
+      });
+    });
+  });
 });