INP metric: CSS selector generation is too shallow and produces highly ambiguous selectors #104128
Description
Problem Statement
The current CSS selector generator used for INP spans is too limited (function htmlTreeAsString):
- it only walks ~5 parent levels up the DOM,
- it stops once the selector exceeds ~80 characters.
In React Native Web, CSS class names are long, so the 80-character limit is often hit immediately. As a result, the generated selectors are extremely generic and can match 100–150 elements on the page, each performing different actions.
This makes it very difficult to understand which UI interaction actually contributed to the INP measurement.
Solution Brainstorm
Here is one potential solution that would allow for the addition of more meaningful information:
- Increase the parent traversal depth (e.g., 15–30 levels).
- During traversal, look for a
data-sentry-labelattribute on ancestors. - If found, prepend that label to the final selector, for example:
[data-sentry-label="ProductCard"] div.css-146c3p1.r-1udh08x.r-1udbk01.r-1iln25a > svgThis would allow developers to annotate interactive elements with stable identifiers and significantly improve the precision and usefulness of INP spans.
Product Area
Unknown