[Epic] Capture events for Dead Clicks

[bruno-garcia]

The goal is to capture an event if a user Click results in no UI change. Giving the impression that the site is broken.

Some considerations:

• If the button becomes greyed out, there's a DOM mutation change and no detection happens
• If an HTTP request happens as a result of the click, its latency could be a driver to the issue detection if the UI doesn't have a spinner

This was one of the identified potential Replay Issues:

• [Epic] Replay: Detect and create issues using Replay data #45664

[cmanallen]

Update 05/11/23:

1. Primary SDK work is coming to a close.
   • A schema has been defined (@billyvg may tweak it slightly).
   • Configuration has been added for tuning slowClick capture.
2. There is some ancillary work being done around breadcrumb throttling and route parameterization that is relevant to this task.
3. Back end has a logging pull request open so we can analyze the types of slow clicks we receive in production environments.
4. One area of concern is fingerprinting. What's the best method?
   • URLs aren't reliable since javascript SPAs often don't update their URL to match the page they're on.
   • HTML attributes like #id aren't perfect either since they require developer discipline.
   • The current thinking is to use the nested path div > span > a along with select attributes on the deepest element.
   • This may include text-content. TBD from analysis of the data.

cc: @bruno-garcia @jas-kas

[billyvg]

URLs are also hard because of "dynamic" routes, e.g. IDs, slugs

[cmanallen]

Update 05/22/23:

• We are logging dead click events with plans to refine the behavior.
• Currently waiting on Ops to provision infrastructure for analytical analysis.
• Decision reached on Replay Issue RFC. We will be creating issues on the back-end.

[bruno-garcia]

RFC update: https://github.com/getsentry/rfcs/pull/99/files

[bruno-garcia]

An update from @billyvg

I took a look through a few "dead clicks" they seem to fall into the following categories:

• false negatives due to opening a new tab via window.open (could we wrap it to cancel deadclick in sdk?) -- examples: JSON in issue details opens a new tab, add integration button that opens a new window
• Download [attachment] downloads a file
  *Legit dead clicks due to UX/design (pagination seems to be very common). Clicking disabled button, clicking a collapse button that won't do anything
  https://sentry.sentry.io/replays/javascript:1800db1cafe542bca7e6419728d57891/?project=11276&query=click.selector%3A%5Baria-label%3D%22Download%22%5D&referrer=%2Freplays%2F&statsPeriod=14d&t_main=dom&yAxis=count%28%29
  • ❌Download button, no DOM mutation, file gets saved
    https://sentry.sentry.io/issues/4209901847/?project=11276&query=is%3Aunresolved&referrer=issue-stream&stream_index=0
  • ❌button that opens in a new tab but done via JS (e.g. no target attribute)
    could instrument window.open?
    https://sentry.sentry.io/replays/?project=11276&query=click.selector%3A%22button.app-sxkr9v.e16hd6vm2%5Baria-label%3D%5C%22Next%5C%22%5D%5Btype%3D%5C%22button%5C%22%5D%22
    ✅people clicking on disabled next button in pagination
    https://sentry.sentry.io/replays/?project=11276&query=click.selector%3A%22button.app-m4xrf2.e16hd6vm2%5Baria-label%3D%5C%22Expand%5C%22%5D%5Btype%3D%5C%22button%5C%22%5D%22
    ✅This button doesn’t do anything when row is already expanded (e.g. it doesn’t collapse)

[ryan953]

We should also look at cases where an invisible div or something is covering your button.

In this case the "Discussion" and "Shipped" buttons are covered:

elementsFromPoint() might be a way to identify when a div is clicked, was there a button or <a> the real target?

document.getElementsByTagName('body')[0].addEventListener('click', e => {
  const {pageX, pageY} = e;
  console.log(document.elementsFromPoint(pageX, pageY));
});