faro-web-sdk
faro-web-sdk copied to clipboard
Wrong measurements being reported on a lazy loaded iframe
Description
When we employ lazy loading for an iframe that shares the same origin as the parent page, all the performance metrics are logged based on the initial page load timestamp. This means that for all the lazily loaded iframes, their metrics are a combination of two factors:
The time it takes for the iframe to be lazy loaded. This duration depends on when the user decides to scroll or interact with the iframe.
The actual performance metrics of the iframe's content once it's fully loaded and displayed.
In essence, the recorded metrics include both the delay introduced by lazy loading and the subsequent performance of the iframe's content.
Steps to reproduce
- Add faro on your domain to collect measurements, let say http://example.com/home
- Add an Iframe with url as (http://example.com/reviews) on one of your page http://example.com/home
- Lazy load this Iframe.
- Collect APIs triggered by Iframes loading, will have additional time
Expected behavior
- Iframes should have its own measurements against the timestamp when iframe is loaded.
Actual behavior
- Iframes measurements are being calculated against the parent window timestamp.
Environment
- SDK version: "@grafana/faro-web-sdk": "^1.0.5"
- SDK instrumentations:
- Device type: Desktop
- Device name: Macbook
- OS: Mac
- Browser: Chrome
Demo
Context
Hi @sunilranaLivspace and thanks for reporting.
From the docs
The primary limitation of these APIs is they have no visibility into
For same-origin iframes, it's possible to use the web-vitals library to measure metrics, but it's tricky because it requires the developer to add the library to every frame and postMessage() the results to the parent frame for aggregation.
I think we can turn this into a feature request so we can see what we can do to enhance the situation.
Cheers, Marco