feat(replay): Add additional properties for UI clicks by billyvg · Pull Request #7395 · getsentry/sentry-javascript

billyvg · 2023-03-09T20:02:33Z

For replay click breadcrumbs, add the following properties:

tag name
text content
element attributes

For replay click breadcrumbs, add the following properties: * tag name * text content * element attributes

packages/replay/src/coreHandlers/handleDom.ts

cmanallen · 2023-03-09T20:11:02Z

packages/replay/src/coreHandlers/handleDom.ts

+        node: {
+          id: serializedNode.id,
+          tagName: serializedNode.tagName,
+          textContent: targetNode ? Array.from(targetNode.childNodes).filter((node: Node | INode) => '__sn' in node && node.__sn.type === NodeType.Text).map(node => node.textContent) : '',


I plan on capping the size of this value to 256 characters. No action item but I thought I would mention it.

@cmanallen should backend add additional metadata when it changes the payload? This means frontend could more easily tell user what payloads were modified and why.

github-actions · 2023-03-09T20:14:13Z

size-limit report 📦

Path	Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified)	20.41 KB (0%)
@sentry/browser - ES5 CDN Bundle (minified)	63.3 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)	18.99 KB (+0.01% 🔺)
@sentry/browser - ES6 CDN Bundle (minified)	56.21 KB (0%)
@sentry/browser - Webpack (gzipped + minified)	20.65 KB (0%)
@sentry/browser - Webpack (minified)	67.44 KB (0%)
@sentry/react - Webpack (gzipped + minified)	20.68 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified)	52.12 KB (+0.07% 🔺)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)	33.66 KB (+0.02% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)	26.01 KB (+0.05% 🔺)
@sentry/replay ES6 CDN Bundle (gzipped + minified)	43.45 KB (+0.64% 🔺)
@sentry/replay - Webpack (gzipped + minified)	37.48 KB (+0.78% 🔺)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified)	61.59 KB (+0.47% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified)	54.66 KB (+0.51% 🔺)

packages/replay/src/coreHandlers/handleDom.ts

billyvg · 2023-03-13T20:34:51Z

packages/integration-tests/suites/replay/errors/errorMode/test.ts

      expect.arrayContaining([
        {
          ...expectedClickBreadcrumb,
-          message: 'body > button#error',


Removing this as it can leak attributes (e.g. aria label) that are masked with maskAllText

billyvg · 2023-03-13T20:35:50Z

packages/integration-tests/suites/replay/errors/template.html

  <body>
    <button id="go-background">Go to background</button>
-    <button id="error">Throw Error</button>
+    <div role="button" id="error" class="btn btn-error" aria-label="Throw Error">Throw Error</div>


Since the errorMode and errorsInSession tests were already capturing this breadcrumb, decided to add attributes here and make sure they were captured.

billyvg · 2023-03-13T20:36:11Z

packages/replay/package.json

    "@babel/core": "^7.17.5",
    "@sentry-internal/replay-worker": "7.42.0",
    "@sentry-internal/rrweb": "1.105.0",
+    "@sentry-internal/rrweb-snapshot": "1.105.0",


imported a type and enum

github-actions · 2023-03-13T21:07:33Z

Replay SDK metrics 🚀

		Plain	+Sentry			+Replay
	Revision	Value	Value	Diff	Ratio	Value	Diff	Ratio
LCP	This PR `ceb4f4e`	64.92 ms	66.09 ms	+1.17 ms	+1.80 %	67.17 ms	+2.25 ms	+3.47 %
LCP	Baseline `ef6b3c7`	76.12 ms	69.95 ms	-6.17 ms	-8.11 %	68.42 ms	-7.70 ms	-10.12 %
CLS	This PR `ceb4f4e`	0.00 ms	0.00 ms	0.00 ms	0.00 %	0.26 ms	+0.26 ms	+5619.51 %
CLS	Baseline `ef6b3c7`	0.00 ms	0.00 ms	0.00 ms	0.00 %	0.26 ms	+0.25 ms	+5493.27 %
CPU	This PR `ceb4f4e`	18.29 %	20.59 %	+2.30 pp	+12.58 %	37.42 %	+19.13 pp	+104.64 %
CPU	Baseline `ef6b3c7`	20.27 %	20.59 %	+0.32 pp	+1.57 %	36.55 %	+16.28 pp	+80.35 %
JS heap avg	This PR `ceb4f4e`	3.53 MB	6.89 MB	+3.36 MB	+95.00 %	10.95 MB	+7.41 MB	+209.80 %
JS heap avg	Baseline `ef6b3c7`	3.51 MB	6.86 MB	+3.35 MB	+95.67 %	11.14 MB	+7.64 MB	+217.81 %
JS heap max	This PR `ceb4f4e`	3.87 MB	8.33 MB	+4.46 MB	+115.20 %	14.07 MB	+10.2 MB	+263.55 %
JS heap max	Baseline `ef6b3c7`	3.91 MB	8.35 MB	+4.44 MB	+113.78 %	13.93 MB	+10.02 MB	+256.56 %
netTx	This PR `ceb4f4e`	0 B	360.48 kB	+360.48 kB	n/a	107.18 kB	+107.18 kB	n/a
netTx	Baseline `ef6b3c7`	0 B	360.47 kB	+360.47 kB	n/a	107.46 kB	+107.46 kB	n/a
netRx	This PR `ceb4f4e`	20.16 kB	18.08 kB	-2.08 kB	-10.30 %	19.15 kB	-1.01 kB	-5.02 %
netRx	Baseline `ef6b3c7`	17.78 kB	18.19 kB	+414 B	+2.33 %	17.84 kB	+57 B	+0.32 %
netCount	This PR `ceb4f4e`	1	2	+1	+100.00 %	5	+4	+400.00 %
netCount	Baseline `ef6b3c7`	1	2	+1	+100.00 %	5	+4	+400.00 %
netTime	This PR `ceb4f4e`	546.64 ms	666.42 ms	+119.77 ms	+21.91 %	672.43 ms	+125.79 ms	+23.01 %
netTime	Baseline `ef6b3c7`	446.67 ms	523.56 ms	+76.89 ms	+17.21 %	669.50 ms	+222.84 ms	+49.89 %

Baseline results on branch: `develop`

Revision	LCP	CLS	CPU	JS heap avg	JS heap max	netTx	netRx	netCount	netTime
`ef6b3c7`	-10.10 ms	+0.23 ms	+15.85 pp	+7.66 MB	+10.56 MB	+107.49 kB	+836 B	+4	+209.40 ms
`b1ef00d`	+5.17 ms	+0.26 ms	+15.95 pp	+7.59 MB	+10.18 MB	+107.02 kB	-220 B	+4	+306.46 ms
`42e542e`	+12.94 ms	+0.25 ms	+18.24 pp	+7.8 MB	+10.31 MB	+107.39 kB	-2.17 kB	+4	+289.66 ms
`2f3c93c`	+6.35 ms	+0.26 ms	+16.82 pp	+7.44 MB	+9.99 MB	+106.58 kB	+1.53 kB	+4	+303.23 ms
`4bff5a9`	+0.60 ms	+0.26 ms	+15.70 pp	+7.44 MB	+10.2 MB	+106.93 kB	-2.04 kB	+4	+163.67 ms
`ba99e7c`	-0.34 ms	+0.23 ms	+16.45 pp	+7.17 MB	+10.05 MB	+106.7 kB	+2.46 kB	+4	+119.03 ms
`a70376e`	-7.64 ms	+0.25 ms	+17.86 pp	+6.5 MB	+10.21 MB	+106.82 kB	-35 B	+4	+321.76 ms
`e358e16`	+7.09 ms	+0.26 ms	+18.60 pp	+7.46 MB	+10.03 MB	+106.61 kB	-943 B	+4	+99.84 ms
`5e27e8f`	-2.27 ms	+0.24 ms	+16.19 pp	+7.72 MB	+10.33 MB	+107.49 kB	+566 B	+4	+192.11 ms

Previous results on branch: `feat-replay-add-more-dom-attributes-on-click`

Revision	LCP	CLS	CPU	JS heap avg	JS heap max	netTx	netRx	netCount	netTime
`ef6b3c7`	-7.70 ms	+0.25 ms	+16.28 pp	+7.64 MB	+10.02 MB	+107.46 kB	+57 B	+4	+222.84 ms
`ef6b3c7`	-10.10 ms	+0.23 ms	+15.85 pp	+7.66 MB	+10.56 MB	+107.49 kB	+836 B	+4	+209.40 ms
`b1ef00d`	+5.17 ms	+0.26 ms	+15.95 pp	+7.59 MB	+10.18 MB	+107.02 kB	-220 B	+4	+306.46 ms
`42e542e`	+12.94 ms	+0.25 ms	+18.24 pp	+7.8 MB	+10.31 MB	+107.39 kB	-2.17 kB	+4	+289.66 ms
`2f3c93c`	+6.35 ms	+0.26 ms	+16.82 pp	+7.44 MB	+9.99 MB	+106.58 kB	+1.53 kB	+4	+303.23 ms
`4bff5a9`	+0.60 ms	+0.26 ms	+15.70 pp	+7.44 MB	+10.2 MB	+106.93 kB	-2.04 kB	+4	+163.67 ms
`ba99e7c`	-0.34 ms	+0.23 ms	+16.45 pp	+7.17 MB	+10.05 MB	+106.7 kB	+2.46 kB	+4	+119.03 ms
`a70376e`	-7.64 ms	+0.25 ms	+17.86 pp	+6.5 MB	+10.21 MB	+106.82 kB	-35 B	+4	+321.76 ms
`e358e16`	+7.09 ms	+0.26 ms	+18.60 pp	+7.46 MB	+10.03 MB	+106.61 kB	-943 B	+4	+99.84 ms
`5e27e8f`	-2.27 ms	+0.24 ms	+16.19 pp	+7.72 MB	+10.33 MB	+107.49 kB	+566 B	+4	+192.11 ms

*) pp - percentage points - an absolute difference between two percentages.
Last updated: Wed, 15 Mar 2023 22:55:00 GMT

billyvg · 2023-03-14T21:20:13Z

packages/replay/src/coreHandlers/util/getAttributesToRecord.ts

+      if (key === 'data-testid' || key === 'data-test-id') {
+        normalizedKey = 'testId';
+      }


@ryan953 let's capture both and normal to testId?

…tests on firefox

billyvg added 2 commits March 9, 2023 15:01

feat(replay): Add additional properties for UI clicks

8b97141

For replay click breadcrumbs, add the following properties: * tag name * text content * element attributes

add comments

8a726a0

cmanallen approved these changes Mar 9, 2023

View reviewed changes

fix tests

8f7d5be

mydea reviewed Mar 10, 2023

View reviewed changes

packages/replay/src/coreHandlers/handleDom.ts Outdated Show resolved Hide resolved

mydea reviewed Mar 10, 2023

View reviewed changes

packages/replay/src/coreHandlers/handleDom.ts Outdated Show resolved Hide resolved

mydea approved these changes Mar 10, 2023

View reviewed changes

bruno-garcia added the CI-Overhead-Measurements label Mar 13, 2023

extract get Attributes, fix textContent not masked, fix tests

ba52231

billyvg commented Mar 13, 2023

View reviewed changes

billyvg marked this pull request as ready for review March 13, 2023 20:37

dupe textContent

8aa9ee1

Merge branch 'develop' into feat-replay-add-more-dom-attributes-on-click

793e41f

mydea approved these changes Mar 14, 2023

View reviewed changes

billyvg added 2 commits March 14, 2023 17:18

add more attributes, create separate test

7525513

run 100x for flake

5ed6118

billyvg commented Mar 14, 2023

View reviewed changes

billyvg added 8 commits March 15, 2023 09:31

Merge branch 'develop' into feat-replay-add-more-dom-attributes-on-click

3436641

moved...

8bfeb83

fix tests

2f7e73e

skip firefox/webkit test

e616727

restore message in breadcrumb for now

f836c0b

remove bench

eb89070

Merge branch 'develop' into feat-replay-add-more-dom-attributes-on-click

8e38516

remove clickBreadcrumbs, use existing customEvents, skip some flakey …

1269102

…tests on firefox

billyvg mentioned this pull request Mar 15, 2023

Change click breadcrumbs to not use message and instead generate a message based on data.node getsentry/sentry#45898

Closed

billyvg merged commit 3715ae7 into develop Mar 16, 2023

billyvg deleted the feat-replay-add-more-dom-attributes-on-click branch March 16, 2023 11:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(replay): Add additional properties for UI clicks#7395

feat(replay): Add additional properties for UI clicks#7395
billyvg merged 16 commits intodevelopfrom
feat-replay-add-more-dom-attributes-on-click

billyvg commented Mar 9, 2023

Uh oh!

Uh oh!

cmanallen Mar 9, 2023

Uh oh!

billyvg Mar 14, 2023

Uh oh!

github-actions bot commented Mar 9, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

billyvg Mar 13, 2023

Uh oh!

billyvg Mar 13, 2023

Uh oh!

billyvg Mar 13, 2023

Uh oh!

github-actions bot commented Mar 13, 2023 •

edited

Loading

Baseline results on branch: `develop`

Previous results on branch: `feat-replay-add-more-dom-attributes-on-click`

Uh oh!

billyvg Mar 14, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

billyvg commented Mar 9, 2023

Uh oh!

Uh oh!

cmanallen Mar 9, 2023

Choose a reason for hiding this comment

Uh oh!

billyvg Mar 14, 2023

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 9, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

Uh oh!

billyvg Mar 13, 2023

Choose a reason for hiding this comment

Uh oh!

billyvg Mar 13, 2023

Choose a reason for hiding this comment

Uh oh!

billyvg Mar 13, 2023

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Replay SDK metrics 🚀

Baseline results on branch: develop

Previous results on branch: feat-replay-add-more-dom-attributes-on-click

Uh oh!

billyvg Mar 14, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Mar 9, 2023 •

edited

Loading

github-actions bot commented Mar 13, 2023 •

edited

Loading

Baseline results on branch: `develop`

Previous results on branch: `feat-replay-add-more-dom-attributes-on-click`