Skip to content

Bump web-vitals version #1412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jethro Nederhof (jethron) merged 1 commit into from
Mar 10, 2025
Merged

Bump web-vitals version #1412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions ...on/changes/@snowplow/browser-plugin-web-vitals/feat-web-vitals-bump_2025-03-06-01-39.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@snowplow/browser-plugin-web-vitals",
"comment": "Update default external library version to v4. Add compatibility for future v5, which deprecates the FID metric.",
"type": "none"
}
],
"packageName": "@snowplow/browser-plugin-web-vitals"
}
10 changes: 5 additions & 5 deletions common/config/rush/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion common/config/rush/repo-state.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
{
"pnpmShrinkwrapHash": "6f4a24fea0d73ed30b10703fd10b02f67710f7ba",
"pnpmShrinkwrapHash": "483ab7c144cc1201cfba40405c05ebf190586e79",
"preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f"
}
2 changes: 1 addition & 1 deletion plugins/browser-plugin-web-vitals/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"@snowplow/browser-tracker-core": "workspace:*",
"@snowplow/tracker-core": "workspace:*",
"tslib": "^2.3.1",
"web-vitals": "~3.3.2"
"web-vitals": "~4.2.4"
},
"devDependencies": {
"@ampproject/rollup-plugin-closure-compiler": "~0.27.0",
Expand Down
2 changes: 1 addition & 1 deletion plugins/browser-plugin-web-vitals/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { WEB_VITALS_SCHEMA } from './schemata';
import { attachWebVitalsPageListeners, createWebVitalsScript, webVitalsListener } from './utils';

const _trackers: Record<string, BrowserTracker> = {};
const WEB_VITALS_SOURCE = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
const WEB_VITALS_SOURCE = 'https://unpkg.com/web-vitals@4/dist/web-vitals.iife.js';
let listenersAttached = false;

interface WebVitalsPluginOptions {
Expand Down
24 changes: 15 additions & 9 deletions plugins/browser-plugin-web-vitals/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import type { ReportCallback, Metric, WebVitalsGlobal, onCLS, onLCP, onFID, onFCP, onINP, onTTFB } from 'web-vitals';
import type { MetricType, Metric, onCLS, onLCP, onFID, onFCP, onINP, onTTFB } from 'web-vitals';

export interface WebVitals extends WebVitalsGlobal {
onCLS: typeof onCLS;
onFID: typeof onFID;
onLCP: typeof onLCP;
onFCP: typeof onFCP;
onINP: typeof onINP;
onTTFB: typeof onTTFB;
export interface WebVitals {
onCLS?: typeof onCLS;
onFID?: typeof onFID;
onLCP?: typeof onLCP;
onFCP?: typeof onFCP;
onINP?: typeof onINP;
onTTFB?: typeof onTTFB;
}

export { Metric, ReportCallback };
declare global {
interface Window {
webVitals?: WebVitals;
}
}

export { Metric, MetricType };
21 changes: 11 additions & 10 deletions plugins/browser-plugin-web-vitals/src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { LOG } from '@snowplow/tracker-core';
import { ReportCallback, WebVitals } from './types';
import { MetricType } from './types';

/**
* Attach page listeners to collect the Web Vitals values
Expand Down Expand Up @@ -51,22 +51,23 @@ export function createWebVitalsScript(webVitalsSource: string) {
* @return {void}
*/
export function webVitalsListener(webVitalsObject: Record<string, unknown>) {
function addWebVitalsMeasurement(metricSchemaName: string): ReportCallback {
function addWebVitalsMeasurement(metricSchemaName: string): (arg: MetricType) => void {
return (arg) => {
webVitalsObject[metricSchemaName] = arg.value;
webVitalsObject.navigationType = arg.navigationType;
};
}
if (!window.webVitals) {

const webVitals = window.webVitals;
if (!webVitals) {
LOG.warn('The window.webVitals API is currently unavailable. web_vitals events will not be collected.');
return;
}

const webVitals = window.webVitals as WebVitals;
webVitals.onCLS(addWebVitalsMeasurement('cls'));
webVitals.onFID(addWebVitalsMeasurement('fid'));
webVitals.onLCP(addWebVitalsMeasurement('lcp'));
webVitals.onFCP(addWebVitalsMeasurement('fcp'));
webVitals.onINP(addWebVitalsMeasurement('inp'));
webVitals.onTTFB(addWebVitalsMeasurement('ttfb'));
webVitals.onCLS?.(addWebVitalsMeasurement('cls'));
webVitals.onFID?.(addWebVitalsMeasurement('fid'));
webVitals.onLCP?.(addWebVitalsMeasurement('lcp'));
webVitals.onFCP?.(addWebVitalsMeasurement('fcp'));
webVitals.onINP?.(addWebVitalsMeasurement('inp'));
webVitals.onTTFB?.(addWebVitalsMeasurement('ttfb'));
}
1 change: 0 additions & 1 deletion plugins/browser-plugin-web-vitals/test/web-vitals.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { BrowserTracker } from '@snowplow/browser-tracker-core';

declare var jsdom: JSDOM;

// @ts-expect-error
jsdom.window.webVitals = {};

describe('Web Vitals plugin', () => {
Expand Down