feat(web-vitals): Capture information about the LCP element culprit #3427
Conversation
size-limit report
|
| } | ||
|
|
||
| if (this._lcpEntry.url) { | ||
| transaction.setTag('lcp.url', this._lcpEntry.url); |
There was a problem hiding this comment.
I thought one curious case to consider is what if the image is not coming from a remote URL but instead inlined with a data URL, like
<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="embedded folder icon">
Would we still want to include that as a tag? Definitely a corner case, but the image could be large enough that would cause the event/transaction to be dropped in Relay.
(I don't know if the browser performance API would ever report such URLs)
There was a problem hiding this comment.
I think we should include it. Ultimately the browser would determine what element contributes the LCP. IMO, if a data URL was marked as an LCP, then that might be a good signal that the page is performant. I think @k-fish (Kevan) can comment further.
There was a problem hiding this comment.
I don't know that it would provide a ton of value, except in cases where the url is necessary to discern between img tags, but the element tree should be sufficient in most cases to determine the exact lcp element. That being said, all we have to do to avoid having the transaction rejected is truncate to the relay tag value limit of 200 chars anyway.
There was a problem hiding this comment.
I tried this out. Inline images using a data: URI report the full URL in the Performance Entry. We don't want to send that, in particular not if it is too big.
We could special-case data: and trim-off the contents (just indicate this was a data URI), since truncating won't be useful (cannot render an image from a truncated URI and the base64 blob makes no sense by itself other than string matching to something in the user's code base, but for that we'd have better tools like element path and/or id).
There was a problem hiding this comment.
@rhcarvalho Oh I see. I had forgotten that data URIs can be quite big. I can trim it to first 200 characters as suggested by @k-fish .
There was a problem hiding this comment.
@rhcarvalho should be addressed in c513a29
| id: string; | ||
| url: string; | ||
| element?: Element; | ||
| toJSON(): Record<string, unknown>; |
There was a problem hiding this comment.
Why do we use unknown here?
There was a problem hiding this comment.
I missed that. toJSON cannot shouldnt do anything else than Record<string, string>
There was a problem hiding this comment.
I updated this in 5f42677
dashed
force-pushed
the
tag-lcp-elements
branch
from
72aa247 to
5f42677
Compare
|
|
||
| if (this._lcpEntry.url) { | ||
| // Trim URL to the first 200 characters. | ||
| transaction.setTag('lcp.url', this._lcpEntry.url.trim().slice(0, 200)); |
There was a problem hiding this comment.
@dashed do you think it will be important to disambiguate in Sentry when the attribute was truncated or not?
There was a problem hiding this comment.
@k-fish any thoughts on this?
There was a problem hiding this comment.
The only way to clearly disambiguate it would be to set another tag when it was truncated, I feel like this is overkill considering we're not sure this is even necessary. I'd wait on adding any additional data until we see a clear case for it in the product.
There was a problem hiding this comment.
@rhcarvalho @k-fish I'll merge this in as is. Once we surface this on the product on the segment explorer, it'll be obvious if there's a need to disambiguate it. And if there is, we can follow up with another PR.
Split from #3012
For LCP (largest contentful paint), we'd like to know the element (or image) that contributed the largest contentful paint:
The properties we capture for the LCP culprit are:
We capture these properties as tags.
We aim to use these properties for the tag/segment explorer on the Performance product.