Rage Click not reported on Session Replay

[bruno-garcia]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

9.40.0

Framework Version

No response

Link to Sentry event

No response

Reproduction Example/SDK Setup

I smashed the button but unfortunately I don't see any rage clicks detected.

Steps to Reproduce

See this replay: https://sentry.sentry.io/explore/replays/502952cd4e2241b8aa957b752747ba2e/?project=11276&query=user.email%3Abruno%40sentry.io&referrer=%2Fexplore%2Freplays%2F%3AreplaySlug%2F&statsPeriod=1h&yAxis=count%28%29&t=939

Expected Result

Rage Click detected

Actual Result

No rage clicks

[linear]

JS-771 Rage Click not reported on Session Replay

[chargome]

Looks like in the replay the cursor is way off the button:

But this is the exact moment where the breadcrumbs for the clicks are (you can even the button animation when clicking)

[billyvg]

so we have two types of click breadcrumbs, "slowClick" and multiClick", the difference is that slowClick takes into account scrolling and mutations.

e.g. if you click on a button (or another valid element that we consider for dead clicks: <a> and <input>) one time, and there are no mutations/scrolls that happen, it is a "slowClick" -- within that "slowClick" we track the number of clicks on that element. if the number of clicks > = 5, then it becomes a rage click.

BUT if a mutation/scroll happens, then it is a "multiClick" and that case is not handled on the backend as a dead/rage click.  this is [probably] intentional since we wanted to cut down on noise. e.g. 5 clicks on a button with mutations happening means the button is likely causing the mutation, so it's not a dead click (i suppose the user can still be ragey).

HOWEVER, what I'm seeing on Sentry and pokemart is that clicks are generating these "empty" mutations that disqualify it from being a "slowClick" and so we can never get a rag click:

{
    "source": 0,
    "texts": [],
    "attributes": [
        {
            "id": 3,
            "attributes": {
                "style": ""
            }
        }
    ],
    "removes": [
        {
            "parentId": 4,
            "id": 4605
        }
    ],
    "adds": [
        {
            "parentId": 4,
            "nextId": null,
            "node": {
                "type": 2,
                "tagName": "style",
                "attributes": {
                    "data-n-href": "/_next/static/css/bd0f655eba5e8374.css"
                },
                "childNodes": [],
                "id": 4605
            }
        },
        {
            "parentId": 4605,
            "nextId": null,
            "node": {
                "type": 3,
                "textContent": ".Media_layout__lkQuJ { display: grid; grid-template: \"img\" max-content \"title\" max-content \"desc\" max-content / 1fr; }@media (min-width: 768px) {\n  .Media_layout__lkQuJ { grid-template: \"img title\" max-content \"img desc\" 1fr / max-content 1fr; }\n}.Media_img__eSTxj { grid-area: img; }.Media_title__XoQZu { grid-area: title; }.Media_desc__bfFYg { grid-area: desc; }.PokemonCardView_title__fcX_o { display: flex; gap: 8px; }.PokemonCardView_id__Xy8_x { font-size: 1.4rem; font-weight: 700; }.PokemonCardView_name__2KJYI { font-size: 1.4rem; text-transform: capitalize; }.PokemonCardView_types__OOwpF { font-size: 1.2rem; }",
                "isStyle": true,
                "id": 4606
            }
        }
    ]
}

And here's another example on Sentry's site where I click the "Settings" link repeatedly:

{
    "type": 3,
    "data": {
        "source": 0,
        "texts": [],
        "attributes": [
            {
                "id": 5462,
                "attributes": {
                    "name": null
                }
            },
            {
                "id": 5509,
                "attributes": {
                    "name": "slug"
                }
            },
            {
                "id": 5521,
                "attributes": {
                    "name": "name"
                }
            },
            {
                "id": 5532,
                "attributes": {
                    "name": "organizationId"
                }
            },
            {
                "id": 5547,
                "attributes": {
                    "name": "isEarlyAdopter"
                }
            },
            {
                "id": 5563,
                "attributes": {
                    "name": "hideAiFeatures"
                }
            },
            {
                "id": 5585,
                "attributes": {
                    "name": "codecovAccess"
                }
            },
            {
                "id": 5602,
                "attributes": {
                    "name": "enablePrReviewTestGeneration"
                }
            },
            {
                "id": 5636,
                "attributes": {
                    "name": null
                }
            },
            {
                "id": 5650,
                "attributes": {
                    "name": "openMembership"
                }
            },
            {
                "id": 5663,
                "attributes": {
                    "name": "allowMemberInvite"
                }
            },
            {
                "id": 5676,
                "attributes": {
                    "name": "allowMemberProjectCreation"
                }
            },
            {
                "id": 5689,
                "attributes": {
                    "name": "eventsMemberAdmin"
                }
            },
            {
                "id": 5702,
                "attributes": {
                    "name": "alertsMemberWrite"
                }
            },
            {
                "id": 5724,
                "attributes": {
                    "name": null
                }
            },
            {
                "id": 5747,
                "attributes": {
                    "name": null
                }
            },
            {
                "id": 5756,
                "attributes": {
                    "name": null
                }
            },
            {
                "id": 5768,
                "attributes": {
                    "name": null
                }
            },
            {
                "id": 5771,
                "attributes": {
                    "name": null
                }
            }
        ],
        "removes": [
            {
                "parentId": 6,
                "id": 5844
            },
            {
                "parentId": 5625,
                "id": 5845
            },
            {
                "parentId": 5713,
                "id": 5848
            },
            {
                "parentId": 5736,
                "id": 5851
            }
        ],
        "adds": [
            {
                "parentId": 6,
                "nextId": null,
                "node": {
                    "type": 3,
                    "textContent": "******* ******** * ******************** * ******",
                    "id": 5854
                }
            },
            {
                "parentId": 5625,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "div",
                    "attributes": {
                        "class": "app-1p7409b"
                    },
                    "childNodes": [],
                    "id": 5855
                }
            },
            {
                "parentId": 5855,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "div",
                    "attributes": {
                        "class": "app-bzqs7w-indicatorContainer",
                        "aria-hidden": "true"
                    },
                    "childNodes": [],
                    "id": 5856
                }
            },
            {
                "parentId": 5856,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "svg",
                    "attributes": {
                        "class": "app-137mjg7",
                        "rr_width": "12px",
                        "rr_height": "12px"
                    },
                    "childNodes": [],
                    "isSVG": true,
                    "id": 5857
                }
            },
            {
                "parentId": 5713,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "div",
                    "attributes": {
                        "class": "app-1p7409b"
                    },
                    "childNodes": [],
                    "id": 5858
                }
            },
            {
                "parentId": 5858,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "div",
                    "attributes": {
                        "class": "app-bzqs7w-indicatorContainer",
                        "aria-hidden": "true"
                    },
                    "childNodes": [],
                    "id": 5859
                }
            },
            {
                "parentId": 5859,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "svg",
                    "attributes": {
                        "class": "app-137mjg7",
                        "rr_width": "12px",
                        "rr_height": "12px"
                    },
                    "childNodes": [],
                    "isSVG": true,
                    "id": 5860
                }
            },
            {
                "parentId": 5736,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "div",
                    "attributes": {
                        "class": "app-1p7409b"
                    },
                    "childNodes": [],
                    "id": 5861
                }
            },
            {
                "parentId": 5861,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "div",
                    "attributes": {
                        "class": "app-bzqs7w-indicatorContainer",
                        "aria-hidden": "true"
                    },
                    "childNodes": [],
                    "id": 5862
                }
            },
            {
                "parentId": 5862,
                "nextId": null,
                "node": {
                    "type": 2,
                    "tagName": "svg",
                    "attributes": {
                        "class": "app-137mjg7",
                        "rr_width": "12px",
                        "rr_height": "12px"
                    },
                    "childNodes": [],
                    "isSVG": true,
                    "id": 5863
                }
            }
        ]
    },
    "timestamp": 1755026910345
}