Skip to content

feat(replay): Improve click target detection #8026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 8, 2023

Conversation

mydea
Copy link
Member

@mydea mydea commented May 3, 2023

This does two things:

  1. When capturing clicks, we specifically look for button & a elements as parents, using them as target if applicable.
  2. Increase max. text length of selectors, to have better visibility. Note we always cap this at 5 levels deep, still.

This is rather defensive for now, by only checking for button & a. This will not check for general interactivity - there are other cases to look for as well, e.g. [tabindex] etc. However, IMHO this has also potential to break, if people have weird HTML. So I think this should be a good enough start with very low potential for false positives.

Fixes #7659

@mydea mydea added the Package: replay Issues related to the Sentry Replay SDK label May 3, 2023
@mydea mydea requested a review from billyvg May 3, 2023 09:47
@mydea mydea self-assigned this May 3, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 21.01 KB (0%)
@sentry/browser - ES5 CDN Bundle (minified) 65.62 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 19.55 KB (0%)
@sentry/browser - ES6 CDN Bundle (minified) 58.08 KB (0%)
@sentry/browser - Webpack (gzipped + minified) 21.16 KB (0%)
@sentry/browser - Webpack (minified) 69.03 KB (0%)
@sentry/react - Webpack (gzipped + minified) 21.18 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified) 49.09 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 28.64 KB (+0.01% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified) 26.86 KB (0%)
@sentry/replay ES6 CDN Bundle (gzipped + minified) 46.94 KB (+0.17% 🔺)
@sentry/replay - Webpack (gzipped + minified) 40.73 KB (+0.16% 🔺)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 65.81 KB (+0.11% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 58.7 KB (+0.11% 🔺)

@mydea mydea force-pushed the fn/replay-click-interactive branch 3 times, most recently from 1484170 to 8c5a624 Compare May 3, 2023 14:26
@mydea mydea force-pushed the fn/replay-click-interactive branch from 8c5a624 to ddf7aa0 Compare May 4, 2023 06:52
Copy link
Member

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good to me but I'd like to test it out a bit first and see how the data looks.

Copy link
Member

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested it on sentry.io and it seems pretty reasonable.

@mydea mydea merged commit be129db into develop May 8, 2023
@mydea mydea deleted the fn/replay-click-interactive branch May 8, 2023 08:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: replay Issues related to the Sentry Replay SDK
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: Clicks on blocked(?)/svg elements do not contain node information
2 participants