FCP and TTFB are triggered multiple times

[fmacherey]

I noticed, that FCP and TTFB are sometimes triggered multiple times, which should not be the case, as they are single events. Also, maybe reportAllChanges should be not supported by the types and internally set to false.

[tunetheweb]

Could you give some more details as to when this happens as this should not be the case for those two metrics. You can see from the code that TTFB is emitted once, and FCP is connects the performance observer as soon as it has emitted it's entry.

Some cases where this could happen include:

• bfcache restore as we consider those new navigations.
• the experimental soft navigations branch is being used and soft navigations are being used.

[fmacherey]

We are not using the soft-navigation branch, we are using "web-vitals": "3.5.2" with attribution support. Our application is an SPA with nextjs, so maybe this leads to problem?

[fmacherey]

We also not using the bfcache on this navigations. The events are triggered mulitple times on page load, with same durations but different metric.id values.

If you agree, I can prepare a pullrequest, to "disallow" reportAllChanges for these two on-Functions.

[tunetheweb]

Are you loading the web-vitals library multiple times? That's another case were I could see this happening. It should be loaded once per page load but if each of your routes reload it, then I could definitely see that causing duplications.

From the README:

Warning: do not call any of the Web Vitals functions (e.g. onCLS(), onFID(), onLCP()) more than once per page load. Each of these functions creates a PerformanceObserver instance and registers event listeners for the lifetime of the page. While the overhead of calling these functions once is negligible, calling them repeatedly on the same page may eventually result in a memory leak.

If you agree, I can prepare a pullrequest, to "disallow" reportAllChanges for these two on-Functions.

No I'd prefer not to have this PR until we understand why this might happen. For all of the scenarios I've given so far, this would not help.

[fmacherey]

I can check, if there are mulitple instances :)

[fmacherey]

So I reworked the import now to an inline import.then behind a window check. I also checked with our tracking team and it looks like the duplicate requests are not appearing anymore. The looks like the problem occurs, when you import the on* functions in the _app.tsx, which triggers then server and client side.

[tunetheweb]

OK so basically it was loaded twice. In that case it will do that regardless of the reportAllChanges metric (which isn't even used by those metrics). So closing this.