Closed jinja12 closed 3 months ago
You would need to raise this in the Long Animation Frames repo rather than here. At present the web-vitals library just reports the LoAF entry (in future we may do some processing to highlight the most important information).
You would need to raise this in the Long Animation Frames repo rather than here. At present the web-vitals library just reports the LoAF entry (in future we may do some processing to highlight the most important information).
Got it, thanks! Raised an issue there. I had one more question: Following is the screenshot of the web-vitals-attribution console log:
There is an attribute named: interactionTargetElement
inside the object, which provides quite a few details like the children node: "Add Item (4s)" here and the onClickHandler name as well (here: handleAddItem4s
). The documentation : https://codelabs.developers.google.com/measuring-inp#4 here says not much about the details within the interaction target element object. Could an idea be provided about how can we access these details like onClick() handler name, children properties within the __reactProps${key}
attribute? It is not clear what is the suffix after the $ in both react props and fiber node. Moreover, wouldn't this information be helpful in debugging what and where is the root issue lying for the main thread blocking ?
Thanks!
@tunetheweb
Link to raised issue for anyone with similar queries: https://github.com/w3c/long-animation-frames/issues/13
There is an attribute named: interactionTargetElement inside the object, which provides quite a few details like the children node: "Add Item (4s)" here and the onClickHandler name as well (here: handleAddItem4s). The documentation : https://codelabs.developers.google.com/measuring-inp#4 here says not much about the details within the interaction target element object.
It is literally the Element
as exposed by the PerformanceEventTiming entry.
Could an idea be provided about how can we access these details like onClick() handler name, children properties within the __reactProps${key} attribute? It is not clear what is the suffix after the $ in both react props and fiber node. Moreover, wouldn't this information be helpful in debugging what and where is the root issue lying for the main thread blocking ?
That's exactly why we make the element available. This is a new thing in v4. Prior to that we took an opinionated stance and only gave the selector in the interactionTarget
property. In #456 it was requested to make the target element itself available for those that wished to choose an alternative identifier depending on how exactly their app was built.
I have a very simple page where I provide an option to add an item via 2 buttons: button-1 and button-2, the onClick handlers for both buttons have a small difference, one has an empty while loop running for 3s while the other runs for 4s.
The code for the page is below for reference. Now when I click any of the buttons and see the console, where I am interested in the Long Animation Frames entry inside the logged object, the source function and the source url is different from the expected output. The page can be found here (deployed on vercel, the image below shows output on localhost): Deployed Page Link
Code:
Output Image:
Highlighted above is the
sourceFunctionName
and thesourceURL
. In my application there is no such thing. I only clicked on the two buttons which you can see for which the function names which handle them are:handleAddItem
andhandleAddItem4s
.I went through the documentation for the same here: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceScriptTiming/sourceFunctionName as well, but it does not provide a great idea into the attribute (expected behaviour and the result), if the output can't be changed, is there a way to get the exact function which is taking a lot of time/blocking the main single thread ? Similarly for the sourceURL attribute as well. Since this is a relatively new addition, I could not find much resources apart from the original docs to look into it.
It would be great if this could be please looked into once and some details be provided about how to go about getting the correct source functions and in a broader sense action items to understand the metric in depth.
Thanks!