…#16589) This PR adds support for instrumenting and sending spans from [`ElementTiming` API ](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/elementtiming)entries. Just like with web vitals and long tasks/animation frames, we register a `PerformanceObserver` and extract spans from newly emitted ET entries. Important: - We'll by default emit ET spans. Users can opt out by setting `enableElementTiming: false` in `browserTracingIntegration` - We for now only emit an ET span, if there is an active parent span. Happy to adjust this but considering the limitations from below I'm not sure if we actually want all spans after the pageload span. For now, we'll also emit spans on other transactions that pageload (most prominently `navigation` spans as well). We could also go the route of only sending until the first navigation as with standalone CLS/LCP spans. Happy to accept any direction we wanna take this. Some noteworthy findings while working on this: - ET is only emitted for text and image nodes. - For image nodes, we get the `loadTime` which is the relative timestamp to the browser's `timeOrigin`, when the image _finished_ loading. For text nodes, `loadTime` is always `0`, since nothing needs to be loaded. - For all nodes, we get `renderTime` which is the relative timestamp to the browser's `timeOrigin`, when the node finished rendering (i.e. was painted by the browser). - In any case, we do not get start times for rendering or loading. Consequently, the span duration is - `renderTime - loadTime` for image nodes - `0` for text nodes - The span start time is: - `timeOrigin + loadTime` for image nodes - `timeOrigin + renderTime` for text nodes In addition to the raw span and conventional attributes, we also collect a bunch of ET-specific attributes: - `element.type` - tag name of the element (e.g. `img` or `p`) - `element.size` - width x height of the element - `element.render-time` - `entry.renderTime` - `element.load-time` - `entry.loadTime` - `element.url` - url of the loaded image (`undefined` for text nodes) - `element.identifier` - the identifier passed to the `elementtiming=identifier` HTML attribute - `element.paint-type` - the node paint type (`image-paint` or `text-paint`) also some additional sentry-sepcific attributes: - `route` - the route name, either from the active root span (if available) or from the scope's `transactionName` - `sentry.span-start-time-source` - the data point we used as the span start time More than happy to adjust any of this logic or attribute names, based on review feedback :) closes getsentry#13675 also ref getsentry#7292 --------- Co-authored-by: Abhijeet Prasad <aprasad@sentry.io> Co-authored-by: s1gr1d <sigrid.huemer@posteo.at>

Uh oh!

Uh oh!

Support Element Timing API in Browser SDK #13675

Description

Description

Activity

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions