check for process.env.VERCEL_ANALYTICS_ID

.env.example

@@ -1,7 +1,7 @@
 DEBUG_FLAG_ENABLED=1
 
 GH_DISCUSSION_CATEGORY_ID="DIC_kwDOE7ysSc4CAC0o"
-GH_ACCESS_TOKEN=💖
+GH_ACCESS_TOKEN="💖"
 
 # The Analytics ID is provided when your app builds on Vercel.
 # It is accessed at runtime via svelte.config.js preprocessing.

.github/workflows/check_website.yaml

@@ -42,13 +42,13 @@ jobs:
       - name: Copy .env from .env.example
         run: cp .env.example .env
 
+      - name: Svelte check
+        run: npm run check
+
       # checks for lint errors AND format errors
       - name: Lint
         run: npm run lint && git diff --exit-code
 
-      - name: Check
-        run: npm run check
-
       - name: npx playwright install
         run: npx playwright install
 

src/lib/public/analytics/types.ts

@@ -1,4 +1,4 @@
-export type { Metric } from 'web-vitals';
+export type { Metric, ReportHandler, ReportCallback, ReportOpts } from 'web-vitals';
 
 export interface AnalyticsOptions {
   id?: string;

src/lib/public/analytics/vitals.ts

@@ -1,9 +1,29 @@
-import type { AnalyticsOptions, Metric } from './types';
-export { onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals';
+import { onCLS, onFCP, onFID, onLCP, onTTFB } from 'web-vitals';
+import type { AnalyticsOptions, Metric, ReportCallback, ReportOpts } from './types';
+
+export function send(
+  options: AnalyticsOptions,
+  handlers = [onFID, onTTFB, onLCP, onCLS, onFCP]
+): void {
+  if (!options.id) return;
+
+  try {
+    handlers.forEach((handler) => doVital(handler, options));
+  } catch (err) {
+    console.error('[Analytics]', err);
+  }
+}
+
+function doVital(
+  handler: (onReport: ReportCallback, opts?: ReportOpts | undefined) => void,
+  options: AnalyticsOptions
+): void {
+  handler((metric: Metric) => sendToAnalytics(metric, options));
+}
 
 type VitalsNavigator = Navigator & { connection: { effectiveType: string } };
 
-export function sendToAnalytics(metric: Metric, options: AnalyticsOptions) {
+function sendToAnalytics(metric: Metric, options: AnalyticsOptions) {
   if (!options.url) {
     options.url = 'https://vitals.vercel-analytics.com/v1/vitals';
   }

src/routes/+layout.svelte

@@ -6,12 +6,13 @@
   // https://kit.svelte.dev/docs/advanced-routing#advanced-layouts
 
   import { page } from '$app/stores';
-  import { browser } from '$app/environment';
-  import { send } from '$lib/public/analytics/send';
+  import { browser, dev } from '$app/environment';
+  import { VERCEL_ANALYTICS_ID } from '$env/static/public';
+  import { send } from '$lib/public/analytics/vitals';
 
-  $: if (browser) {
+  $: if (browser && !dev && VERCEL_ANALYTICS_ID) {
     send({
-      id: '$VERCEL_ANALYTICS_ID',
+      id: VERCEL_ANALYTICS_ID,
       path: $page.url.pathname,
       params: $page.params,
       navigator,

svelte.config.js

@@ -5,12 +5,12 @@ import preprocess from 'svelte-preprocess';
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: preprocess({
-    replace: [['$VERCEL_ANALYTICS_ID', process.env.VERCEL_ANALYTICS_ID]],
-  }),
+  preprocess: preprocess(),
 
   kit: {
     adapter: adapter(),
+    // See https://acmcsuf.com/pulls/630.
+    env: { publicPrefix: 'VERCEL_' },
   },
 
   vitePlugin: {