faro-web-sdk icon indicating copy to clipboard operation
faro-web-sdk copied to clipboard

Wrong measurements being reported on a lazy loaded iframe

Open sunilranaLivspace opened this issue 2 years ago • 1 comments
trafficstars

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

Screenshot 2023-09-13 at 4 48 47 PM Screenshot 2023-09-13 at 4 48 31 PM

Context

sunilranaLivspace avatar Sep 13 '23 11:09 sunilranaLivspace

Hi @sunilranaLivspace and thanks for reporting.

Faro uses Googles web-vitals library to collect web-vitals and one of it's limitations is visibility into iFrames.

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

codecapitano avatar Sep 13 '23 12:09 codecapitano