Merge pull request #75 from bartvdbraak/feat/web-vitals

Add Analytics for Web Vitals

package.json

@@ -37,6 +37,7 @@
 		"@threlte/core": "6.0.0-next.11",
 		"@threlte/extras": "5.0.0-next.16",
 		"@types/three": "^0.154.0",
-		"three": "^0.155.0"
+		"three": "^0.155.0",
+		"web-vitals": "^3.4.0"
 	}
 }

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   three:
     specifier: ^0.155.0
     version: 0.155.0
+  web-vitals:
+    specifier: ^3.4.0
+    version: 3.4.0
 
 devDependencies:
   '@skeletonlabs/skeleton':
@@ -2340,6 +2343,10 @@ packages:
       vite: 4.4.4
     dev: true
 
+  /web-vitals@3.4.0:
+    resolution: {integrity: sha512-n9fZ5/bG1oeDkyxLWyep0eahrNcPDF6bFqoyispt7xkW0xhDzpUBTgyDKqWDi1twT0MgH4HvvqzpUyh0ZxZV4A==}
+    dev: false
+
   /webgl-sdf-generator@1.1.1:
     resolution: {integrity: sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==}
     dev: false

src/lib/components/gltf/Github3d.svelte

@@ -1,29 +1,29 @@
+<!-- src/lib/components/gltf/Github3d.svelte -->
+
 <!--
 Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
 Command: npx @threlte/gltf@1.0.0-next.13 ./src/lib/assets/vectors/github.glb --transform
 -->
 
 <script>
-	import { Group } from 'three';
-	import { T, forwardEventHandlers } from '@threlte/core';
-	import { useGltf } from '@threlte/extras';
-	export const ref = new Group();
+  import { Group } from 'three'
+  import { T, forwardEventHandlers } from '@threlte/core'
+  import { useGltf } from '@threlte/extras'
+  export const ref = new Group()
 
-	const gltf = useGltf('./github-transformed.glb', { useDraco: true });
+  const gltf = useGltf('./github-transformed.glb', { useDraco: true })
 
-	const component = forwardEventHandlers();
+  const component = forwardEventHandlers()
 </script>
 
 <T is={ref} dispose={false} {...$$restProps} bind:this={$component}>
-	{#await gltf}
-		<slot name="fallback" />
-	{:then gltf}
-		<T.Mesh geometry={gltf.nodes.Github_Mesh.geometry}
-			><T.MeshPhysicalMaterial color={[0,0,0]} /></T.Mesh
-		>
-	{:catch error}
-		<slot name="error" {error} />
-	{/await}
+  {#await gltf}
+    <slot name="fallback" />
+  {:then gltf}
+    <T.Mesh geometry={gltf.nodes.Github_Mesh.geometry} material={gltf.materials['SVGMat.001']} />
+  {:catch error}
+    <slot name="error" {error} />
+  {/await}
 
-	<slot {ref} />
+  <slot {ref} />
 </T>

src/lib/vitals.ts

@@ -0,0 +1,81 @@
+import type { Metric } from 'web-vitals';
+import { getCLS, getFCP, getFID, getLCP, getTTFB } from 'web-vitals';
+
+const vitalsUrl = 'https://vitals.vercel-analytics.com/v1/vitals';
+
+// Improve type safety by defining the navigator.connection type
+interface NavigatorWithConnection extends Navigator {
+  connection: {
+    effectiveType: string;
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Params = Record<string, any>; // Define a type for 'params'
+
+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).reduce(
+    (acc, [key, value]) => 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));
+  }
+
+  // Serialize body to a URLSearchParams object
+  const searchParams = new URLSearchParams(body);
+
+  // The type 'Record<string, string>' is compatible with 'URLSearchParams'
+  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; // Use the defined 'Params' type here
+  path: string;
+  analyticsId: string;
+  debug: boolean;
+}) {
+  try {
+    getFID((metric) => sendToAnalytics(metric, options));
+    getTTFB((metric) => sendToAnalytics(metric, options));
+    getLCP((metric) => sendToAnalytics(metric, options));
+    getCLS((metric) => sendToAnalytics(metric, options));
+    getFCP((metric) => sendToAnalytics(metric, options));
+  } catch (err) {
+    console.error('[Web Vitals]', err);
+  }
+}

src/routes/+layout.svelte

@@ -2,11 +2,26 @@
 	import '../theme.postcss';
 	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.postcss';
-	import { AppShell, Drawer, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
+	import { AppShell, Drawer } from '@skeletonlabs/skeleton';
 	import Footer from '../lib/components/Footer.svelte';
 	import Navigation from '../lib/components/Navigation.svelte';
 	import Header from '$lib/components/Header.svelte';
 
+	import { webVitals } from '$lib/vitals';
+	import { browser } from '$app/environment';
+	import { page } from '$app/stores';
+
+	let analyticsId = import.meta.env.VERCEL_ANALYTICS_ID;
+
+	$: if (browser && analyticsId) {
+		webVitals({
+			path: $page.url.pathname,
+			params: $page.params,
+			analyticsId,
+			debug: false
+		});
+	}
+
 	let routes = [
 		{ url: '/', label: 'Home' },
 		{ url: '/projects', label: 'Projects' },
@@ -16,20 +31,17 @@
 
 	let progress = 0;
 
-  function handleScroll(event: Event) {
-    const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
-    progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
-  }
+	function handleScroll(event: Event) {
+		const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
+		progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
+	}
 </script>
 
 <Drawer width="w-[280px] md:w-[480px]">
 	<Navigation {routes} />
 </Drawer>
 
-<AppShell
-	slotSidebarLeft="w-0 md:w-40"
-	on:scroll={handleScroll}
->
+<AppShell slotSidebarLeft="w-0 md:w-40" on:scroll={handleScroll}>
 	<svelte:fragment slot="header">
 		<Header {progress} />
 	</svelte:fragment>

src/routes/tools/+page.svelte

@@ -1,7 +1,7 @@
+<!-- src/routes/tools/+page.svelte -->
 <script lang="ts">
 	import { Canvas } from '@threlte/core';
 	import Scene from './Scene.svelte';
-	import Github3d from '$lib/components/gltf/Github3d.svelte';
 </script>
 
 <svelte:head>

src/routes/tools/Scene.svelte

@@ -1,3 +1,4 @@
+<!-- src/routes/tools/Scene.svelte -->
 <script>
 	import Github3d from '$lib/components/gltf/Github3d.svelte';
 	import { T, useFrame } from '@threlte/core';

vite.config.ts

@@ -5,5 +5,8 @@ export default defineConfig({
 	plugins: [sveltekit()],
   ssr: {
     noExternal: ['three']
+  },
+  define: {
+    'import.meta.env.VERCEL_ANALYTICS_ID': JSON.stringify(process.env.VERCEL_ANALYTICS_ID)
   }
 });