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

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

+ 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% 🔺)

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

 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

 <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

 "@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

+ 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

Comment threadpackages/replay/src/coreHandlers/handleDom.ts Outdated

mydea reviewed Mar 10, 2023
View reviewed changes

Comment threadpackages/replay/src/coreHandlers/handleDom.ts Outdated

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.nodegetsentry/sentry#45898
Closed

billyvg merged commit 3715ae7 into developMar 16, 2023

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

Navigation Menu

Uh oh!

Uh oh!

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

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

billyvg commented Mar 9, 2023

Uh oh!

Uh oh!

cmanallenMar 9, 2023

Uh oh!

billyvgMar 14, 2023

Uh oh!

github-actionsBot commented Mar 9, 2023•
edited
Loading

Uh oh!

Uh oh!

Uh oh!

billyvgMar 13, 2023

Uh oh!

billyvgMar 13, 2023

Uh oh!

billyvgMar 13, 2023

Uh oh!

github-actionsBot 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!

billyvgMar 14, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Uh oh!

Conversation

billyvg commented Mar 9, 2023

Uh oh!

Uh oh!

cmanallenMar 9, 2023

Choose a reason for hiding this comment

Uh oh!

billyvgMar 14, 2023

Choose a reason for hiding this comment

Uh oh!

github-actionsBot 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!

billyvgMar 13, 2023

Choose a reason for hiding this comment

Uh oh!

billyvgMar 13, 2023

Choose a reason for hiding this comment

Uh oh!

billyvgMar 13, 2023

Choose a reason for hiding this comment

Uh oh!

github-actionsBot 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!

billyvgMar 14, 2023

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actionsBot commented Mar 9, 2023•
edited
Loading

github-actionsBot commented Mar 13, 2023•
edited
Loading

Baseline results on branch: `develop`

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