Merge pull request #203 from bartvdbraak/feat/vercel-speed-insights

Refactor: Use @vercel/speed-insights for web vitals

package.json

@@ -38,7 +38,7 @@
 		"vite": "^5.0.11"
 	},
 	"dependencies": {
-		"@vercel/analytics": "^1.1.1",
+		"@vercel/speed-insights": "^1.0.3",
 		"bits-ui": "^0.14.0",
 		"clsx": "^2.1.0",
 		"lucide-svelte": "^0.309.0",
@@ -46,8 +46,7 @@
 		"radix-icons-svelte": "^1.2.1",
 		"svelte-wrap-balancer": "^0.0.4",
 		"tailwind-merge": "^2.2.0",
-		"tailwind-variants": "^0.1.20",
+		"tailwind-variants": "^0.1.20"
-		"web-vitals": "^3.5.1"
 	},
 	"lint-staged": {
 		"*.{js,ts,svelte,css,scss,postcss,md,json}": [

pnpm-lock.yaml

@@ -5,9 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
-  '@vercel/analytics':
+  '@vercel/speed-insights':
-    specifier: ^1.1.1
+    specifier: ^1.0.3
-    version: 1.1.1
+    version: 1.0.3
   bits-ui:
     specifier: ^0.14.0
     version: 0.14.0(svelte@4.2.8)
@@ -32,9 +32,6 @@ dependencies:
   tailwind-variants:
     specifier: ^0.1.20
     version: 0.1.20(tailwindcss@3.4.1)
-  web-vitals:
-    specifier: ^3.5.1
-    version: 3.5.1
 
 devDependencies:
   '@sveltejs/adapter-vercel':
@@ -1082,12 +1079,6 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vercel/analytics@1.1.1:
-    resolution: {integrity: sha512-+NqgNmSabg3IFfxYhrWCfB/H+RCUOCR5ExRudNG2+pcRehq628DJB5e1u1xqwpLtn4pAYii4D98w7kofORAGQA==}
-    dependencies:
-      server-only: 0.0.1
-    dev: false
-
   /@vercel/nft@0.26.2:
     resolution: {integrity: sha512-bxe2iShmKZi7476xYamyKvhhKwQ6JPEtQ2FSq1AjMUH2buMd8LQMkdoHinTqZYc+1sMTh3G0ARdjzNvV1FEisA==}
     engines: {node: '>=16'}
@@ -1110,6 +1101,11 @@ packages:
       - supports-color
     dev: true
 
+  /@vercel/speed-insights@1.0.3:
+    resolution: {integrity: sha512-bKIt0HDdF6hP2bJZyS+za3k6sKeAXNRLSIUbwVwvyvKdsHBWS6ILBvmD1wXHZZyTqjU1TP7dTE/F6lHM6rBdKA==}
+    requiresBuild: true
+    dev: false
+
   /abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
     dev: true
@@ -2869,10 +2865,6 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /server-only@0.0.1:
-    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
-    dev: false
-
   /set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
     dev: true
@@ -3417,10 +3409,6 @@ packages:
       vite: 5.0.11
     dev: true
 
-  /web-vitals@3.5.1:
-    resolution: {integrity: sha512-xQ9lvIpfLxUj0eSmT79ZjRoU5wIRfIr7pNukL7ZE4EcWZSmfZQqOlhuAGfkVa3EFmzPHZhWhXfm2i5ys+THVPg==}
-    dev: false
-
   /webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: true

src/lib/vitals.ts

@@ -1,82 +0,0 @@
-import type { Metric } from 'web-vitals';
-import { onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals';
-
-const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';
-
-interface NavigatorWithConnection extends Navigator {
-	connection: {
-		effectiveType: string;
-	};
-}
-
-type Params = Record<string, string>;
-
-function getConnectionSpeed() {
-	return 'connection' in navigator &&
-		'connection' &&
-		'effectiveType' in (navigator as NavigatorWithConnection).connection
-		? (navigator as NavigatorWithConnection).connection.effectiveType
-		: '';
-}
-
-function sendToAnalytics(
-	metric: Metric,
-	options: {
-		params: Params;
-		path: string;
-		analyticsId: string;
-		debug: boolean;
-	}
-) {
-	const page = (Object.entries(options.params) as [string, string][]).reduce(
-		(acc: string, [key, value]: [string, string]) => acc.replace(value, `[${key}]`),
-		options.path
-	);
-
-	const body = {
-		dsn: options.analyticsId,
-		id: metric.id,
-		page,
-		href: location.href,
-		event_name: metric.name,
-		value: metric.value.toString(),
-		speed: getConnectionSpeed()
-	};
-
-	if (options.debug) {
-		console.log('[Web Vitals]', metric.name, JSON.stringify(body, null, 2));
-	}
-
-	const searchParams = new URLSearchParams(body);
-
-	const blob = new Blob([searchParams.toString()], {
-		type: 'application/x-www-form-urlencoded'
-	});
-	if (navigator.sendBeacon) {
-		navigator.sendBeacon(vitalsUrl, blob);
-	} else {
-		fetch(vitalsUrl, {
-			body: blob,
-			method: 'POST',
-			credentials: 'omit',
-			keepalive: true
-		});
-	}
-}
-
-export function webVitals(options: {
-	params: Params;
-	path: string;
-	analyticsId: string;
-	debug: boolean;
-}) {
-	try {
-		onFID((metric) => sendToAnalytics(metric, options));
-		onTTFB((metric) => sendToAnalytics(metric, options));
-		onLCP((metric) => sendToAnalytics(metric, options));
-		onCLS((metric) => sendToAnalytics(metric, options));
-		onFCP((metric) => sendToAnalytics(metric, options));
-	} catch (err) {
-		console.error('[Web Vitals]', err);
-	}
-}

src/routes/+layout.svelte

@@ -4,24 +4,8 @@
 	import '../styles/globals.css';
 	import { ModeWatcher } from 'mode-watcher';
 	import { fly } from 'svelte/transition';
-	import { inject } from '@vercel/analytics';
+	import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
-	import { webVitals } from '$lib/vitals';
+	injectSpeedInsights();
-	import { browser } from '$app/environment';
-	import { page } from '$app/stores';
-
-	inject({ mode: dev ? 'development' : 'production' });
-
-	let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
-
-	$: if (browser && analyticsId) {
-		webVitals({
-			path: $page.url.pathname,
-			params: $page.params,
-			analyticsId,
-			debug: false
-		});
-	}
-
 	export let data;
 </script>