getsentry · mydea · Apr 24, 2023 · Apr 20, 2023 · Apr 20, 2023 · Apr 20, 2023
diff --git a/packages/browser-integration-tests/suites/replay/captureConsoleLog/template.html b/packages/browser-integration-tests/suites/replay/captureConsoleLog/template.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button data-log>Log button</button>
+    <button data-log-large>Log button</button>
+
+    <script>
+      document.querySelector('[data-log]').addEventListener('click', () => {
+        console.log('Test log', document.body);
+      });
+
+      function createLargeObject(remainingDepth) {
+        const massiveObject = {};
+
+        for (let i = 0; i < 3; i++) {
+          const item = {
+            aa: remainingDepth > 0 ? createLargeObject(remainingDepth - 1) : 'a'.repeat(50),
+            bb: 'b'.repeat(50),
+            cc: 'c'.repeat(50),
+            dd: 'd'.repeat(50),
+          };
+
+          massiveObject[`item-${i}`] = item;
+        }
+
+        return massiveObject;
+      }
+
+      const massiveObject = createLargeObject(10);
+
+      document.querySelector('[data-log-large]').addEventListener('click', () => {
+        console.log(massiveObject);
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts b/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts
@@ -0,0 +1,136 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../utils/fixtures';
+import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
+
+sentryTest('should capture console messages in replay', async ({ getLocalTestPath, page, forceFlushReplay }) => {
+  // console integration is not used in bundles/loader
+  const bundle = process.env.PW_BUNDLE || '';
+  if (shouldSkipReplayTest() || bundle.startsWith('bundle_') || bundle.startsWith('loader_')) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.goto(url);
+  await reqPromise0;
+
+  const reqPromise1 = waitForReplayRequest(
+    page,
+    (_event, res) => {
+      const { breadcrumbs } = getCustomRecordingEvents(res);
+
+      return breadcrumbs.some(breadcrumb => breadcrumb.category === 'console');
+    },
+    5_000,
+  );
+
+  await page.click('[data-log]');
+
+  // Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
+  await page.click('[data-log]');
+
+  await forceFlushReplay();
+
+  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+  expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual(
+    expect.arrayContaining([
+      {
+        timestamp: expect.any(Number),
+        type: 'default',
+        category: 'console',
+        data: { arguments: ['Test log', '[HTMLElement: HTMLBodyElement]'], logger: 'console' },
+        level: 'log',
+        message: 'Test log [object HTMLBodyElement]',
+      },
+    ]),
+  );
+});
+
+sentryTest('should capture very large console logs', async ({ getLocalTestPath, page, forceFlushReplay }) => {
+  // console integration is not used in bundles/loader
+  const bundle = process.env.PW_BUNDLE || '';
+  if (shouldSkipReplayTest() || bundle.startsWith('bundle_') || bundle.startsWith('loader_')) {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await page.goto(url);
+  await reqPromise0;
+
+  const reqPromise1 = waitForReplayRequest(
+    page,
+    (_event, res) => {
+      const { breadcrumbs } = getCustomRecordingEvents(res);
+
+      return breadcrumbs.some(breadcrumb => breadcrumb.category === 'console');
+    },
+    5_000,
+  );
+
+  await page.click('[data-log-large]');
+
+  // Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
+  await page.click('[data-log-large]');
+
+  await forceFlushReplay();
+
+  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+  expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual(
+    expect.arrayContaining([
+      {
+        timestamp: expect.any(Number),
+        type: 'default',
+        category: 'console',
+        data: {
+          arguments: [
+            expect.objectContaining({
+              'item-0': {
+                aa: expect.objectContaining({
+                  'item-0': {
+                    aa: expect.any(Object),
+                    bb: expect.any(String),
+                    cc: expect.any(String),
+                    dd: expect.any(String),
+                  },
+                }),
+                bb: expect.any(String),
+                cc: expect.any(String),
+                dd: expect.any(String),
+              },
+            }),
+          ],
+          logger: 'console',
+          _meta: {
+            warnings: ['CONSOLE_ARG_TRUNCATED'],
+          },
+        },
+        level: 'log',
+        message: '[object Object]',
+      },
+    ]),
+  );
+});
diff --git a/packages/browser-integration-tests/utils/replayHelpers.ts b/packages/browser-integration-tests/utils/replayHelpers.ts
@@ -49,38 +49,42 @@ export type RecordingSnapshot = FullRecordingSnapshot | IncrementalRecordingSnap
 export function waitForReplayRequest(
   page: Page,
   segmentIdOrCallback?: number | ((event: ReplayEvent, res: Response) => boolean),
+  timeout?: number,
 ): Promise<Response> {
   const segmentId = typeof segmentIdOrCallback === 'number' ? segmentIdOrCallback : undefined;
   const callback = typeof segmentIdOrCallback === 'function' ? segmentIdOrCallback : undefined;
 
-  return page.waitForResponse(res => {
-    const req = res.request();
+  return page.waitForResponse(
+    res => {
+      const req = res.request();
 
-    const postData = req.postData();
-    if (!postData) {
-      return false;
-    }
-
-    try {
-      const event = envelopeRequestParser(req);
-
-      if (!isReplayEvent(event)) {
+      const postData = req.postData();
+      if (!postData) {
         return false;
       }
 
-      if (callback) {
-        return callback(event, res);
-      }
+      try {
+        const event = envelopeRequestParser(req);
 
-      if (segmentId !== undefined) {
-        return event.segment_id === segmentId;
-      }
+        if (!isReplayEvent(event)) {
+          return false;
+        }
 
-      return true;
-    } catch {
-      return false;
-    }
-  });
+        if (callback) {
+          return callback(event, res);
+        }
+
+        if (segmentId !== undefined) {
+          return event.segment_id === segmentId;
+        }
+
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    timeout ? { timeout } : undefined,
+  );
 }
 
 export function isReplayEvent(event: Event): event is ReplayEvent {

diff --git a/packages/replay/src/constants.ts b/packages/replay/src/constants.ts
@@ -31,3 +31,6 @@ export const RETRY_MAX_COUNT = 3;
 
 /* The max (uncompressed) size in bytes of a network body. Any body larger than this will be truncated. */
 export const NETWORK_BODY_MAX_SIZE = 150_000;
+
+/* The max size of a single console arg that is captured. Any arg larger than this will be truncated. */
+export const CONSOLE_ARG_MAX_SIZE = 5_000;
diff --git a/packages/replay/src/coreHandlers/handleScope.ts b/packages/replay/src/coreHandlers/handleScope.ts
@@ -1,7 +1,10 @@
 import type { Breadcrumb, Scope } from '@sentry/types';
+import { normalize } from '@sentry/utils';
 
+import { CONSOLE_ARG_MAX_SIZE } from '../constants';
 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;
@@ -48,5 +51,62 @@ 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) {
+          const fixedJson = fixJson(stringified.slice(0, CONSOLE_ARG_MAX_SIZE));
+          const json = JSON.parse(fixedJson);
+          // We only set this after JSON.parse() was successfull, so we know we didn't run into `catch`
+          isTruncated = true;
+          return json;
+        }
+        return normalizedArg;
+      } catch {
+        // fall back to default
+      }
+    }
+
+    return arg;
+  });
+
+  return createBreadcrumb({
+    ...breadcrumb,
+    data: {
+      ...breadcrumb.data,
+      arguments: normalizedArgs,
+      ...(isTruncated ? { _meta: { warnings: ['CONSOLE_ARG_TRUNCATED'] } } : {}),
+    },
+  });
+}