From 913c15b5ed566968fb23f8e826ee65bc392074a4 Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Wed, 20 Dec 2023 17:11:07 -0500 Subject: [PATCH 1/3] feat(replay): Send component names in replay breadcrumbs --- .../replay/captureComponentName/init.js | 17 ++++ .../replay/captureComponentName/template.html | 10 +++ .../replay/captureComponentName/test.ts | 83 +++++++++++++++++++ 3 files changed, 110 insertions(+) create mode 100644 packages/browser-integration-tests/suites/replay/captureComponentName/init.js create mode 100644 packages/browser-integration-tests/suites/replay/captureComponentName/template.html create mode 100644 packages/browser-integration-tests/suites/replay/captureComponentName/test.ts diff --git a/packages/browser-integration-tests/suites/replay/captureComponentName/init.js b/packages/browser-integration-tests/suites/replay/captureComponentName/init.js new file mode 100644 index 000000000000..dac512988b9a --- /dev/null +++ b/packages/browser-integration-tests/suites/replay/captureComponentName/init.js @@ -0,0 +1,17 @@ +import * as Sentry from '@sentry/browser'; + +window.Sentry = Sentry; +window.Replay = new Sentry.Replay({ + flushMinDelay: 200, + flushMaxDelay: 200, + minReplayDuration: 0, +}); + +Sentry.init({ + dsn: 'https://public@dsn.ingest.sentry.io/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 new file mode 100644 index 000000000000..1cb45daa349a --- /dev/null +++ b/packages/browser-integration-tests/suites/replay/captureComponentName/template.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/browser-integration-tests/suites/replay/captureComponentName/test.ts b/packages/browser-integration-tests/suites/replay/captureComponentName/test.ts new file mode 100644 index 000000000000..99b7a71273e3 --- /dev/null +++ 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: '', + }, + }, + }, + ]); +}); From 676afcc6498183cd8fd54ebefef60a677fb4cd87 Mon Sep 17 00:00:00 2001 From: Ash Anand Date: Wed, 20 Dec 2023 17:12:58 -0500 Subject: [PATCH 2/3] Add to attributes to record --- packages/replay/src/coreHandlers/util/getAttributesToRecord.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/replay/src/coreHandlers/util/getAttributesToRecord.ts b/packages/replay/src/coreHandlers/util/getAttributesToRecord.ts index 13c756901028..f50c2b9f9088 100644 --- 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', ]); /** From bf391eb358fbe7207ad2fab8bf6514ea133f7531 Mon Sep 17 00:00:00 2001 From: Ash <0Calories@users.noreply.github.com> Date: Thu, 21 Dec 2023 11:23:27 -0500 Subject: [PATCH 3/3] Update packages/browser-integration-tests/suites/replay/captureComponentName/init.js Co-authored-by: Yagiz Nizipli --- .../suites/replay/captureComponentName/init.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/browser-integration-tests/suites/replay/captureComponentName/init.js b/packages/browser-integration-tests/suites/replay/captureComponentName/init.js index dac512988b9a..040fb88ab2bd 100644 --- a/packages/browser-integration-tests/suites/replay/captureComponentName/init.js +++ b/packages/browser-integration-tests/suites/replay/captureComponentName/init.js @@ -12,6 +12,5 @@ Sentry.init({ sampleRate: 0, replaysSessionSampleRate: 1.0, replaysOnErrorSampleRate: 0.0, - integrations: [window.Replay], });