getsentry · mydea · 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>
+      const massiveObject = createLargeObject(10);
+
+      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;
+      }
+
+      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,123 @@
+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.filter(breadcrumb => breadcrumb.category === 'console').length > 0;
+    },
+    5_000,
+  );
+
+  await page.click('[data-log]');
+
+  await forceFlushReplay();
+
+  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+  expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual([
+    {
+      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.filter(breadcrumb => breadcrumb.category === 'console').length > 0;
+    },
+    5_000,
+  );
+
+  await page.click('[data-log-large]');
+
+  await forceFlushReplay();
+
+  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+
+  expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual([
+    {
+      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',
+      },
+      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 {