[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));
});

[cmanallen]

Related: #50345

[bruno-garcia]

A lot of dead clicks found so far are false positives or interesting UX issue but not something we'd be alerting on. We'll further dig into Rage Click as an additional insight into these clicks. And reduce some of the false positives:

• Intercept window.open to ignore slow clicks sentry-javascript#8301
• Add "Rage Clicks" sentry-javascript#8300

[cmanallen]

Update 06/08/23:

• We've stopped creating dead click issues internally. We're going to scale back our ambitions for now while we log dead click events and refine the dead click detection algorithm.
  • Proposed alternatives have been: indexing dead/rage clicks so they're searchable on the replays index page with a "misery index" score for sorting the output.
• Customers who have already upgraded to the dead click detecting SDK will detect too many false positives. We will be ignoring these SDKs during dead click ingestion.
  • An SDK upgrade will be required to re-enable dead click detection.

[bruno-garcia]

We continue to detect Dead Clicks in the forms of Breadcrumbs. But we're not at this point creating issues and alerting folks on it. The reason is that even though many of these Dead Clicks are valuable insight, for the most part they can be UX issues , many are false positives hard/impossible to filter out (browser download) so we don't believe are strong enough signal to noise ratio to deserve alerting and managing issue workflows through.

The team will pursue more opportunities to benefit from the Dead Clicks such as allowing search by Replays with Dead Clicks, List of Replays with Dead Clicks for triaging, etc.

We're also further looking into Rage Clicks and the relationship between Rage Clicks and Dead Clicks in search for great signal/noise ratio in order to create issues in Sentry.