feat(replay): Send component names in replay breadcrumbs (#9947)

One of the PRs scoped from #9855 Sends component names on Replay UI breadcrumbs so they can be ingested and indexed. This will allow for searching for Replays by component name in the future. --------- Co-authored-by: Yagiz Nizipli <[email protected]>
getsentry · Dec 21, 2023 · 9a2570b · 9a2570b
1 parent f433a55
commit 9a2570b
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 0 deletions.
diff --git a/packages/browser-integration-tests/suites/replay/captureComponentName/init.js b/packages/browser-integration-tests/suites/replay/captureComponentName/init.js
@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 200,
+  flushMaxDelay: 200,
+  minReplayDuration: 0,
+});
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  integrations: [window.Replay],
+});
diff --git a/packages/browser-integration-tests/suites/replay/captureComponentName/template.html b/packages/browser-integration-tests/suites/replay/captureComponentName/template.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button data-sentry-component="MyCoolButton" id="button">😎</button>
+    <input data-sentry-component="MyCoolInput" id="input" />
+  </body>
+</html>
diff --git a/packages/browser-integration-tests/suites/replay/captureComponentName/test.ts b/packages/browser-integration-tests/suites/replay/captureComponentName/test.ts
@@ -0,0 +1,83 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../utils/fixtures';
+import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
+
+sentryTest('captures component name attribute when available', async ({ forceFlushReplay, getLocalTestPath, page }) => {
+  if (shouldSkipReplayTest()) {
+    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;
+  await forceFlushReplay();
+
+  const reqPromise1 = waitForReplayRequest(page, (event, res) => {
+    return getCustomRecordingEvents(res).breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click');
+  });
+  const reqPromise2 = waitForReplayRequest(page, (event, res) => {
+    return getCustomRecordingEvents(res).breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.input');
+  });
+
+  await page.locator('#button').click();
+
+  await page.locator('#input').focus();
+  await page.keyboard.press('Control+A');
+  await page.keyboard.type('Hello', { delay: 10 });
+
+  await forceFlushReplay();
+  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+  const { breadcrumbs: breadcrumbs2 } = getCustomRecordingEvents(await reqPromise2);
+
+  // Combine the two together
+  breadcrumbs2.forEach(breadcrumb => {
+    if (!breadcrumbs.some(b => b.category === breadcrumb.category && b.timestamp === breadcrumb.timestamp)) {
+      breadcrumbs.push(breadcrumb);
+    }
+  });
+
+  expect(breadcrumbs).toEqual([
+    {
+      timestamp: expect.any(Number),
+      type: 'default',
+      category: 'ui.click',
+      message: 'body > MyCoolButton',
+      data: {
+        nodeId: expect.any(Number),
+        node: {
+          attributes: { id: 'button', 'data-sentry-component': 'MyCoolButton' },
+          id: expect.any(Number),
+          tagName: 'button',
+          textContent: '**',
+        },
+      },
+    },
+    {
+      timestamp: expect.any(Number),
+      type: 'default',
+      category: 'ui.input',
+      message: 'body > MyCoolInput',
+      data: {
+        nodeId: expect.any(Number),
+        node: {
+          attributes: { id: 'input', 'data-sentry-component': 'MyCoolInput' },
+          id: expect.any(Number),
+          tagName: 'input',
+          textContent: '',
+        },
+      },
+    },
+  ]);
+});
diff --git a/packages/replay/src/coreHandlers/util/getAttributesToRecord.ts b/packages/replay/src/coreHandlers/util/getAttributesToRecord.ts
@@ -12,6 +12,7 @@ const ATTRIBUTES_TO_RECORD = new Set([
   'data-testid',
   'disabled',
   'aria-disabled',
+  'data-sentry-component',
 ]);
 
 /**