test(replay): Add replay E2E test (#7486)

---------

Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>

packages/e2e-tests/test-applications/standard-frontend-react/src/globals.d.ts

@@ -1,4 +1,5 @@
 interface Window {
   recordedTransactions?: string[];
   capturedExceptionId?: string;
+  sentryReplayId?: string;
 }

packages/e2e-tests/test-applications/standard-frontend-react/src/index.tsx

@@ -14,6 +14,8 @@ import {
 import Index from './pages/Index';
 import User from './pages/User';
 
+const replay = new Sentry.Replay();
+
 Sentry.init({
   dsn: process.env.REACT_APP_E2E_TEST_DSN,
   integrations: [
@@ -26,11 +28,22 @@ Sentry.init({
         matchRoutes,
       ),
     }),
+    replay,
   ],
   // We recommend adjusting this value in production, or using tracesSampler
   // for finer control
   tracesSampleRate: 1.0,
   release: 'e2e-test',
+
+  // Always capture replays, so we can test this properly
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+});
+
+Object.defineProperty(window, 'sentryReplayId', {
+  get() {
+    return replay['_replay'].session.id;
+  },
 });
 
 Sentry.addGlobalEventProcessor(event => {

packages/e2e-tests/test-applications/standard-frontend-react/tests/behaviour-test.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/test';
 import axios, { AxiosError } from 'axios';
+import { ReplayRecordingData } from './fixtures/ReplayRecordingData';
 
 const EVENT_POLLING_TIMEOUT = 30_000;
 
@@ -169,3 +170,85 @@ test('Sends a navigation transaction to Sentry', async ({ page }) => {
 
   expect(hadPageNavigationTransaction).toBe(true);
 });
+
+test('Sends a Replay recording to Sentry', async ({ browser }) => {
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  await page.goto('/');
+
+  const replayId = await page.waitForFunction(() => {
+    return window.sentryReplayId;
+  });
+
+  // Wait for replay to be sent
+
+  if (replayId === undefined) {
+    throw new Error("Application didn't set a replayId");
+  }
+
+  console.log(`Polling for replay with ID: ${replayId}`);
+
+  await expect
+    .poll(
+      async () => {
+        try {
+          const response = await axios.get(
+            `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/replays/${replayId}/`,
+            { headers: { Authorization: `Bearer ${authToken}` } },
+          );
+
+          return response.status;
+        } catch (e) {
+          if (e instanceof AxiosError && e.response) {
+            if (e.response.status !== 404) {
+              throw e;
+            } else {
+              return e.response.status;
+            }
+          } else {
+            throw e;
+          }
+        }
+      },
+      {
+        timeout: EVENT_POLLING_TIMEOUT,
+      },
+    )
+    .toBe(200);
+
+  // now fetch the first recording segment
+  await expect
+    .poll(
+      async () => {
+        try {
+          const response = await axios.get(
+            `https://sentry.io/api/0/projects/${sentryTestOrgSlug}/${sentryTestProject}/replays/${replayId}/recording-segments/?cursor=100%3A0%3A1`,
+            { headers: { Authorization: `Bearer ${authToken}` } },
+          );
+
+          return {
+            status: response.status,
+            data: response.data,
+          };
+        } catch (e) {
+          if (e instanceof AxiosError && e.response) {
+            if (e.response.status !== 404) {
+              throw e;
+            } else {
+              return e.response.status;
+            }
+          } else {
+            throw e;
+          }
+        }
+      },
+      {
+        timeout: EVENT_POLLING_TIMEOUT,
+      },
+    )
+    .toEqual({
+      status: 200,
+      data: ReplayRecordingData,
+    });
+});

packages/e2e-tests/test-applications/standard-frontend-react/tests/fixtures/ReplayRecordingData.ts

@@ -0,0 +1,225 @@
+import { expect } from '@playwright/test';
+
+export const ReplayRecordingData = [
+  [
+    { type: 4, data: { href: 'http://localhost:3000/', width: 1280, height: 720 }, timestamp: expect.any(Number) },
+    {
+      type: 2,
+      data: {
+        node: {
+          type: 0,
+          childNodes: [
+            { type: 1, name: 'html', publicId: '', systemId: '', id: 2 },
+            {
+              type: 2,
+              tagName: 'html',
+              attributes: { lang: 'en' },
+              childNodes: [
+                {
+                  type: 2,
+                  tagName: 'head',
+                  attributes: {},
+                  childNodes: [
+                    { type: 2, tagName: 'meta', attributes: { charset: 'utf-8' }, childNodes: [], id: 5 },
+                    {
+                      type: 2,
+                      tagName: 'meta',
+                      attributes: { name: 'viewport', content: 'width=device-width,initial-scale=1' },
+                      childNodes: [],
+                      id: 6,
+                    },
+                    {
+                      type: 2,
+                      tagName: 'meta',
+                      attributes: { name: 'theme-color', content: '#000000' },
+                      childNodes: [],
+                      id: 7,
+                    },
+                    {
+                      type: 2,
+                      tagName: 'title',
+                      attributes: {},
+                      childNodes: [{ type: 3, textContent: '***** ***', id: 9 }],
+                      id: 8,
+                    },
+                  ],
+                  id: 4,
+                },
+                {
+                  type: 2,
+                  tagName: 'body',
+                  attributes: {},
+                  childNodes: [
+                    {
+                      type: 2,
+                      tagName: 'noscript',
+                      attributes: {},
+                      childNodes: [{ type: 3, textContent: '*** **** ** ****** ********** ** *** **** ****', id: 12 }],
+                      id: 11,
+                    },
+                    { type: 2, tagName: 'div', attributes: { id: 'root' }, childNodes: [], id: 13 },
+                  ],
+                  id: 10,
+                },
+              ],
+              id: 3,
+            },
+          ],
+          id: 1,
+        },
+        initialOffset: { left: 0, top: 0 },
+      },
+      timestamp: expect.any(Number),
+    },
+    {
+      type: 5,
+      timestamp: expect.any(Number),
+      data: {
+        tag: 'performanceSpan',
+        payload: {
+          op: 'memory',
+          description: 'memory',
+          startTimestamp: expect.any(Number),
+          endTimestamp: expect.any(Number),
+          data: {
+            memory: {
+              jsHeapSizeLimit: expect.any(Number),
+              totalJSHeapSize: expect.any(Number),
+              usedJSHeapSize: expect.any(Number),
+            },
+          },
+        },
+      },
+    },
+    {
+      type: 3,
+      data: {
+        source: 0,
+        texts: [],
+        attributes: [],
+        removes: [],
+        adds: [
+          {
+            parentId: 13,
+            nextId: null,
+            node: {
+              type: 2,
+              tagName: 'a',
+              attributes: { id: 'navigation', href: 'http://localhost:3000/user/5' },
+              childNodes: [],
+              id: 14,
+            },
+          },
+          { parentId: 14, nextId: null, node: { type: 3, textContent: '********', id: 15 } },
+          {
+            parentId: 13,
+            nextId: 14,
+            node: {
+              type: 2,
+              tagName: 'input',
+              attributes: { type: 'button', id: 'exception-button', value: '******* *********' },
+              childNodes: [],
+              id: 16,
+            },
+          },
+        ],
+      },
+      timestamp: expect.any(Number),
+    },
+    {
+      type: 3,
+      data: { source: 5, text: 'Capture Exception', isChecked: false, id: 16 },
+      timestamp: expect.any(Number),
+    },
+  ],
+  [
+    {
+      type: 5,
+      timestamp: expect.any(Number),
+      data: {
+        tag: 'performanceSpan',
+        payload: {
+          op: 'navigation.navigate',
+          description: 'http://localhost:3000/',
+          startTimestamp: expect.any(Number),
+          endTimestamp: expect.any(Number),
+          data: { size: expect.any(Number), duration: expect.any(Number) },
+        },
+      },
+    },
+    {
+      type: 5,
+      timestamp: expect.any(Number),
+      data: {
+        tag: 'performanceSpan',
+        payload: {
+          op: 'resource.script',
+          description: expect.stringMatching(/http:\/\/localhost:3000\/static\/js\/main.(\w+).js/),
+          startTimestamp: expect.any(Number),
+          endTimestamp: expect.any(Number),
+          data: { size: expect.any(Number), encodedBodySize: expect.any(Number) },
+        },
+      },
+    },
+    {
+      type: 5,
+      timestamp: expect.any(Number),
+      data: {
+        tag: 'performanceSpan',
+        payload: {
+          op: 'largest-contentful-paint',
+          description: 'largest-contentful-paint',
+          startTimestamp: expect.any(Number),
+          endTimestamp: expect.any(Number),
+          data: { value: expect.any(Number), size: expect.any(Number), nodeId: 16 },
+        },
+      },
+    },
+    {
+      type: 5,
+      timestamp: expect.any(Number),
+      data: {
+        tag: 'performanceSpan',
+        payload: {
+          op: 'paint',
+          description: 'first-paint',
+          startTimestamp: expect.any(Number),
+          endTimestamp: expect.any(Number),
+        },
+      },
+    },
+    {
+      type: 5,
+      timestamp: expect.any(Number),
+      data: {
+        tag: 'performanceSpan',
+        payload: {
+          op: 'paint',
+          description: 'first-contentful-paint',
+          startTimestamp: expect.any(Number),
+          endTimestamp: expect.any(Number),
+        },
+      },
+    },
+    {
+      type: 5,
+      timestamp: expect.any(Number),
+      data: {
+        tag: 'performanceSpan',
+        payload: {
+          op: 'memory',
+          description: 'memory',
+          startTimestamp: expect.any(Number),
+          endTimestamp: expect.any(Number),
+          data: {
+            memory: {
+              jsHeapSizeLimit: expect.any(Number),
+              totalJSHeapSize: expect.any(Number),
+              usedJSHeapSize: expect.any(Number),
+            },
+          },
+        },
+      },
+    },
+  ],
+];