Skip to content
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

feat(replay): Rework slow click & multi click detection #8322

Merged
merged 5 commits into from Jun 16, 2023

Conversation

mydea
Copy link
Member

@mydea mydea commented Jun 13, 2023

This PR reworks the slow click detection to accommodate rage click detection as well.
This required substantial changes, as we need to keep track of stuff much more.

Now, we keep a list of clicks that come in in a new class. We register a single set of listeners (mutation observer, click listener, scroll listener), and then try to route things to the correct clicks as much as possible.

Any clicks within 1 second count as "multi click", so are not considered for slow clicks at all, but counted on the first click. After a second, a click (even on the same element) will be treated as a "new" click.

ref #8300

@mydea mydea requested a review from billyvg June 13, 2023 15:14
@mydea mydea self-assigned this Jun 13, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jun 13, 2023

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 21.12 KB (-0.01% 🔽)
@sentry/browser - ES5 CDN Bundle (minified) 65.86 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 19.65 KB (+0.01% 🔺)
@sentry/browser - ES6 CDN Bundle (minified) 58.34 KB (0%)
@sentry/browser - Webpack (gzipped + minified) 21.28 KB (0%)
@sentry/browser - Webpack (minified) 69.26 KB (0%)
@sentry/react - Webpack (gzipped + minified) 21.31 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified) 49.23 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 28.74 KB (0%)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified) 26.98 KB (-0.01% 🔽)
@sentry/replay ES6 CDN Bundle (gzipped + minified) 49.13 KB (+1.1% 🔺)
@sentry/replay - Webpack (gzipped + minified) 42.9 KB (+1.51% 🔺)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 68.15 KB (+0.77% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 61.04 KB (+0.82% 🔺)

}

// Rage click
if (clickCount > 3) {
Copy link
Member

Choose a reason for hiding this comment

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

I feel we could consider 3 an option. Not from the get go, lets see how this goes.

Copy link
Member Author

Choose a reason for hiding this comment

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

yes, makes sense! Maybe we need to/want to guard this behind an experiment(al option) anyhow for now 🤔

Copy link
Member Author

Choose a reason for hiding this comment

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

so instead of this arbitrary limit, we now simply capture a new breadcrumb type ui.multiClick with a clickCount, whenever this is > 1.

Comment on lines 155 to 156
// ignore VERY close timestamps - otherwise we record the initial timestamp twice!
if (click && Math.abs(click.timestamp - nowInSeconds()) > 0.01) {
Copy link
Member

Choose a reason for hiding this comment

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

I'm not sure I follow here -- what causes the very close timestamps?

Copy link
Member Author

Choose a reason for hiding this comment

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

The problem is that we have two click listeners now. The one from the core breadcrumbs integration triggers the dom breadcrumb ui.click which is recorderd here via handleClick(). Then we have a separate click listener, which triggers right after this. So any click would trigger twice. Made more difficult by the timestamps being slightly off, as the logic we use in the core breadcrumbs integration is a bit more complex, so we can't really do an equal check in there 😬

Copy link
Member

Choose a reason for hiding this comment

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

Can we separate the code paths so that the click from core breadcrumbs is handled outside and is only responsible for creating the ui.click breadcrumb?

Copy link
Member Author

Choose a reason for hiding this comment

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

I've actually changed it up a bit. Completely separating it doesn't work easily as we then don't have access to the rrweb node stuff etc.

BUT I simply start out the clickCount as 0, then I can always increment it - that should work fine actually, I think, as the multi click handler should always run after the other handler.

Copy link
Member

Choose a reason for hiding this comment

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

ok I'll take another look -- re: rrweb node, we should be able to get that information in the new handler. It'd be duplicating some work, but could be worth it if it simplifies logic.

packages/replay/src/coreHandlers/handleClick.ts Outdated Show resolved Hide resolved
packages/replay/src/coreHandlers/handleClick.ts Outdated Show resolved Hide resolved
packages/replay/src/coreHandlers/handleClick.ts Outdated Show resolved Hide resolved
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.

This is a pretty big change and a bit hard to review but tested it a bit locally and seems to work well.

@mydea mydea changed the title feat(replay): Rework slow click & rage click detection feat(replay): Rework slow click & multi click detection Jun 15, 2023
@mydea
Copy link
Member Author

mydea commented Jun 15, 2023

Note: If users disable slow click timeout, we will also not capture multi clicks. So we have this as an escape hatch if somebody runs into a problem.

@billyvg
Copy link
Member

billyvg commented Jun 15, 2023

@mydea are we still going to have this behind an experiments flag?

@mydea mydea merged commit dba9a3d into develop Jun 16, 2023
58 checks passed
@mydea mydea deleted the fn/slow-click-rage-click branch June 16, 2023 06:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants