[Issue #575] Remove web-vitals package and set debug to true for test…

…ing in the preview environment.

Signed-off-by: Louis Fettet <[email protected]>

.env.example

@@ -18,7 +18,6 @@ CONTENTFUL_IMAGE_API_ENDPOINT="https://images.ctfassets.net"
 CONTENTFUL_MANAGEMENT_API_ENDPOINT="https://api.contentful.com"
 KV_URL="redis://localhost"
 VERCEL=""
-VERCEL_ANALYTICS_ID=""
 VERCEL_ENV=""
 VERCEL_GIT_REPO_OWNER=""
 VERCEL_GIT_REPO_SLUG=""

package.json

@@ -112,7 +112,6 @@
     "jpeg-js": "^0.4.4",
     "lodash": "^4.17.21",
     "redis": "^4.6.10",
-    "topojson-client": "^3.1.0",
-    "web-vitals": "^3.4.0"
+    "topojson-client": "^3.1.0"
   }
 }

src/routes/+layout.server.ts

@@ -18,6 +18,8 @@ export const load = async ({
   //   * whether we should connect to Vercel Speed Insights
   //   * if we should set up GA in debug mode or prod mode
   const isProd = VERCEL_ENV === "production";
+  const isPreview = VERCEL_ENV === "preview";
+  const speedInsightsEnabled = isProd || isPreview;
 
   const clientCurrentUser: User | undefined = currentUser
     ? { name: currentUser.name, email: currentUser.email, avatarURL: currentUser.avatarURL }
@@ -95,6 +97,7 @@ export const load = async ({
   return {
     isProd,
     previewAuthenticationError,
+    speedInsightsEnabled,
     pageMetadataMap: pageMetadataMap,
     pathsToIDs: pathsToIDs,
     siteTitle: loadSiteTitle(),

src/routes/+layout.svelte

@@ -25,6 +25,7 @@
   export let data;
   $: ({
     isProd,
+    speedInsightsEnabled,
     headerPrimaryNavItems,
     headerSecondaryNavItems,
     footerNavItems,
@@ -34,14 +35,17 @@
   } = data);
 
   // Vercel Speed Insights
-  $: if (browser) {
-    //&& isProd) {
-    injectSpeedInsights();
-    // webVitals({
-    //   path: $page.url.pathname,
-    //   params: $page.params,
-    //   analyticsID,
-    // });
+  $: if (browser && speedInsightsEnabled) {
+    injectSpeedInsights({
+      // The percentage of events to send (between 0 and 1); default is 1.
+      // TODO: Decrease this to 0.75 for cost savings, if needed.
+      sampleRate: 1,
+      debug: true,
+      beforeSend: (data) => {
+        console.log("beforeSend", data);
+        return data;
+      },
+    });
   }
 
   setCurrentUserStore(data.currentUser);