Upgrade web-vitals to v4 (#11094)

.changeset/many-icons-kiss.md

@@ -0,0 +1,5 @@
+---
+"@astrojs/web-vitals": minor
+---
+
+Upgrades the `web-vitals` dependency to v4 and stops collecting data for the deprecated FID (First Input Delay) metric.

packages/integrations/web-vitals/package.json

@@ -32,7 +32,7 @@
     "test": "astro-scripts test --timeout 50000 \"test/**/*.test.js\""
   },
   "dependencies": {
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^4.0.0"
   },
   "peerDependencies": {
     "@astrojs/db": "^0.11.0"

packages/integrations/web-vitals/src/client-script.ts

@@ -1,4 +1,4 @@
-import { type Metric, onCLS, onFCP, onFID, onINP, onLCP, onTTFB } from 'web-vitals';
+import { type Metric, onCLS, onFCP, onINP, onLCP, onTTFB } from 'web-vitals';
 import { WEB_VITALS_ENDPOINT_PATH } from './constants.js';
 import type { ClientMetric } from './schemas.js';
 
@@ -26,7 +26,7 @@ function flushQueue() {
 	queue.clear();
 }
 
-for (const listener of [onCLS, onLCP, onINP, onFID, onFCP, onTTFB]) {
+for (const listener of [onCLS, onLCP, onINP, onFCP, onTTFB]) {
 	listener(addToQueue);
 }
 

packages/integrations/web-vitals/src/schemas.ts

@@ -7,10 +7,10 @@ const MetricTypeSchema = z.enum(['CLS', 'INP', 'LCP', 'FCP', 'FID', 'TTFB']);
 const MetricIdSchema = z
 	.string()
 	// Match https://github.com/GoogleChrome/web-vitals/blob/main/src/lib/generateUniqueID.ts
-	.regex(/^v3-\d{13}-\d{13}$/)
+	.regex(/^v4-\d{13}-\d{13}$/)
 	// Avoid collecting higher resolution timestamp in ID.
-	// Transforms `'v3-1711484350895-3748043125387'` to `'v3-17114843-3748043125387'`
-	.transform((id) => id.replace(/^(v3-\d{8})\d{5}(-\d{13})$/, '$1$2'));
+	// Transforms `'v4-1711484350895-3748043125387'` to `'v4-17114843-3748043125387'`
+	.transform((id) => id.replace(/^(v4-\d{8})\d{5}(-\d{13})$/, '$1$2'));
 
 /** Shape of the data submitted from clients to the collection API. */
 const ClientMetricSchema = z.object({

packages/integrations/web-vitals/test/basics.test.js

@@ -5,6 +5,12 @@ import { after, before, beforeEach, describe, it } from 'node:test';
 import { parseHTML } from 'linkedom';
 import { loadFixture } from './test-utils.js';
 
+function startOfHourISOString() {
+	const date = new Date();
+	date.setMinutes(0, 0, 0);
+	return date.toISOString();
+}
+
 /**
  * @template {Record<K, (...args: any[]) => void>} T
  * @template {keyof T} K
@@ -94,25 +100,54 @@ describe('Web Vitals integration basics', () => {
 		assert.equal(call.name, 'ZodError');
 	});
 
-	it('inserts data via the injected endpoint', async () => {
-		const res = await fixture.fetch('/_web-vitals', {
-			method: 'POST',
-			body: JSON.stringify([
+	describe('inserting data via the injected endpoint', () => {
+		/** @type {Response} */
+		let res;
+		before(async () => {
+			res = await fixture.fetch('/_web-vitals', {
+				method: 'POST',
+				body: JSON.stringify([
+					{
+						pathname: '/',
+						route: '/',
+						name: 'CLS',
+						id: 'v4-1711484350895-3748043125387',
+						value: 0,
+						rating: 'good',
+					},
+				]),
+			});
+		});
+
+		it('inserting data does not error', () => {
+			assert.equal(res.status, 200);
+			assert.equal(
+				consoleErrorMock.calls.length,
+				0,
+				'Endpoint logged errors:\n' + consoleErrorMock.calls[0]?.join(' ')
+			);
+		})
+
+		it('inserted data can be retrieved from the database', async () => {
+			const dbRows = await fixture.fetch('/rows.json', {}).then((r) => r.json());
+			assert.deepEqual(dbRows, [
 				{
 					pathname: '/',
 					route: '/',
 					name: 'CLS',
-					id: 'v3-1711484350895-3748043125387',
+					id: 'v4-17114843-3748043125387',
 					value: 0,
 					rating: 'good',
+					timestamp: startOfHourISOString(),
 				},
-			]),
+			]);
 		});
-		assert.equal(res.status, 200);
-		assert.equal(
-			consoleErrorMock.calls.length,
-			0,
-			'Endpoint logged errors:\n' + consoleErrorMock.calls[0]?.join(' ')
-		);
+	});
+
+	it('inserted data uses a truncated timestamp in the ID', async () => {
+		// The IDs generated by the `web-vitals` package include a high resolution timestamp as the second portion,
+		// e.g. 'v4-1711484350895-3748043125387'. We reduce this data to an hourly resolution to lessen privacy concerns.
+		const dbRows = await fixture.fetch('/rows.json', {}).then((r) => r.json());
+		assert.deepEqual(dbRows[0].id, 'v4-17114843-3748043125387');
 	});
 });

packages/integrations/web-vitals/test/fixtures/basics/src/pages/rows.json.ts

@@ -0,0 +1,8 @@
+import { db, AstrojsWebVitals_Metric } from "astro:db";
+
+export const prerender = false;
+
+export async function GET() {
+	const rows = await db.select().from(AstrojsWebVitals_Metric).all();
+	return new Response(JSON.stringify(rows));
+}