Upgrade web-vitals to v4

[tunetheweb]

Is your feature request related to a problem? Please describe.

The version of web-vitals used by this library (3.3.2) is quite old (May 2023) and unsupported. The latest version is 4.2.4 and we're even working on a v5.

v4 includes a number of improvements, particular for INP tracking.

Describe the solution you'd like

It might be a good idea to upgrade to v4.2.4 now to get the latest, and minimise issues when upgrading to v5 later.

FID has also been deprecated and replaced by INP (already being tracked). So might be good idea to remove that since it it's deprecated in v4 and removed in v5.

Describe alternatives you've considered

Leave as is, or wait for v5. Or upgraxde to v4, but still collect FID for now.

Additional context

I'm the maintainer of web-vitals so happy to answer any questions you might have!

I'm also happy to add a PR for this as looks fairly simple. However, there are some breaking changes in v4, which may affect users of this so not sure what the best way is of communicating this (of it it needs to wait for a major upgrade of Snowplow?)

[miike]

Hi Barry - thanks for filing this issue! Is there a rough timeline on when v5 might be available (I can see there was an RC last year)? If so we might wait for v5 to become available and then update the plugin, though it looks like upgrading to 4.2.4 also wouldn't be too difficult.

Matus Tomlein (@matus-tomlein) Peter Perlepes (@igneel64) Jethro Nederhof (@jethron) for visibility.

[jethron]

At the moment we only use the types exported from this library; for any actual functional changes, users should already be able to switch to v4 using the webVitalsSource plugin option e.g. to load https://unpkg.com/web-vitals@4/dist/web-vitals.iife.js instead of the v3 default.

v5 will break for us however since we assume all those metrics are available and if onFID is being removed we'll probably try to call undefined and only correctly capture CLS.

So probably need to:

• Bump lib version to ~4 to ensure correct types
• Make each metrics' method optional and check its callback exists for compat with v5 (e.g. onFID?(addWebVitalsMeasurement('fid')))
• Bump to v4 by default

We already capture INP and it's included in the schema so no changes there, and FID is already an optional field. This can probably fit in the next minor release.

Thanks for reporting!

[tunetheweb]

Hi Barry - thanks for filing this issue! Is there a rough timeline on when v5 might be available (I can see there was an RC last year)? If so we might wait for v5 to become available and then update the plugin, though it looks like upgrading to 4.2.4 also wouldn't be too difficult.

Yeah it's taken a little longer than we hoped. I think it's still a little way off and we'll want to do another release candidate and let people try that out. It also has it's own breaking changes (including a move to modern JavaScript that might require extra testing from users of the librarly like yourselves), so my recommendation would be to upgrade to v4 now, and then I can ping you later about v5 when I think it's ready.

So probably need to:

• Bump lib version to ~4 to ensure correct types
• Make each metrics' method optional and check its callback exists for compat with v5 (e.g. onFID?(addWebVitalsMeasurement('fid')))
• Bump to v4 by default

That sounds good to me! Though I'm not sure you can make onFID optional since you import it and it's type separately? You could switch to an import wrapped in a try/catch but honestly I'd probably drop FID. The feedback we're hearing is people don't use it anymore. But that can wait for your next major since technically it's a breaking change and since v4 still supports onFID.

One other thing is that we've deprecated ReportHandler in v4 (and again plan to remove it in v5), but you can remove that now fairly simply with this change after importing MetricType instead (this is also v3 compatible btw):

 export function webVitalsListener(webVitalsObject: Record<string, unknown>) {
-  function addWebVitalsMeasurement(metricSchemaName: string): ReportCallback {
+  function addWebVitalsMeasurement(metricSchemaName: string): (metric: MetricType) => void {