search

GoogleChrome / web-vitals

Essential metrics for a healthy site.
https://web.dev/vitals
Apache License 2.0
7.59k stars 415 forks source link

Attribution FID eventTarget is empty for SVG elements #344

Closed chrisopperwall-qz closed 1 year ago

chrisopperwall-qz commented 1 year ago

Hi there 👋

We noticed a bug in getSelector when the FID eventTarget is an SVG. When the eventTarget is an SVG, the value of className is an SVGAnimatedString, which doesn't have a trim() method, so an exception is thrown and caught by the catch and an empty selector string is returned (or whatever the selector was up until the SVG element was encountered). https://github.com/GoogleChrome/web-vitals/blob/main/src/lib/getSelector.ts#L33

I believe using el.getAttribute('class') would work correctly in this case, with the caveat that getAttribute can return null as well as a string. We also noticed that el.classList.value worked in this case, but I'm not sure what the compatibility requirements for this project are.

I'll can put up a quick PR with the classList solution (or fallback to using getAttribute if that's preferred)

tunetheweb commented 1 year ago

Good spot. The classList.value option seems good to me and seems supported long enough to cover all browsers supported by this project.

chrisopperwall-qz commented 1 year ago

Awesome, thanks for the fix!!