Cleanup for v2 endpoint

vercel · Sep 8, 2023 · e00e890 · e00e890
1 parent a2ea60a
commit e00e890
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 60 deletions.
diff --git a/packages/web/src/generic/index.ts b/packages/web/src/generic/index.ts
@@ -7,46 +7,34 @@ import {
   onTTFB,
 } from 'web-vitals/attribution';
 import type { Metric } from 'web-vitals';
-import type { CollectedMetric, SpeedInsightsV1Payload } from '../types';
-import { cutDecimal, getConnectionSpeed, sendBeacon } from '../utils';
+import type { CollectedMetric, SpeedInsightsPayload } from '../types';
+import {
+  formatMetricValue,
+  getConnectionSpeed,
+  getDomTarget,
+  sendBeacon,
+} from '../utils';
 
 export function sendVitals(metrics: CollectedMetric[], dsn: string): void {
   const speed = getConnectionSpeed();
 
-  for (const metric of metrics) {
-    const value = cutDecimal(metric.value, metric.name === 'CLS' ? 4 : 0);
+  if (metrics.length === 0) return;
 
-    const vital = {
-      dsn,
-      speed,
+  const payload: SpeedInsightsPayload = {
+    dsn,
+    speed,
+    metrics: metrics.map((metric) => ({
       id: metric.id,
-      event_name: metric.name,
-      value,
+      type: metric.name,
+      value: formatMetricValue(metric),
+      dynamicPath: metric.dynamicPath,
       href: window.location.href.replace('http://', 'https://'), // TODO: remove this
-      ...(metric.dynamicPath && { page: metric.dynamicPath }),
-    } as SpeedInsightsV1Payload;
-
-    sendBeacon(vital as never);
-  }
-
-  // // V2 handling
-  // if (!metrics[0]) return;
-  // const payload: SpeedInsightsV2Payload = {
-  //   dsn,
-  //   speed,
-  //   metrics: metrics.map((metric) => ({
-  //     id: metric.id,
-  //     type: metric.event_name,
-  //     value: metric.value,
-  //     dynamicPath: metric.dynamicPath,
-  //     href: metric.href,
-  //     attribution: {
-  //       target: getDomTarget(metric),
-  //     },
-  //   })),
-  // };
-  // const data = JSON.stringify(payload);
-  // sendBeacon(data);
+      attribution: {
+        target: getDomTarget(metric),
+      },
+    })),
+  };
+  sendBeacon(payload as never);
 }
 
 export function watchMetrics(callback: (metric: Metric) => void): void {

diff --git a/packages/web/src/nextjs/index.tsx b/packages/web/src/nextjs/index.tsx
@@ -39,8 +39,6 @@ export function SpeedInsights({ token, sampleRate }: SpeedInsightsProps): null {
 
   const reportVital = useCallback(
     (metric: MetricWithAttribution): void => {
-      // eslint-disable-next-line no-console -- ok for now
-      console.log(metric);
       vitals.current.push({ ...metric, dynamicPath });
     },
     [dynamicPath],

diff --git a/packages/web/src/types.ts b/packages/web/src/types.ts
@@ -5,27 +5,14 @@ export type CollectedMetric = MetricWithAttribution & {
   dynamicPath: string | null;
 };
 
-// V1
-export interface SpeedInsightsV1Metric {
-  id: string;
-  event_name: string;
-  page: string | null;
-  value: string | number;
-  href: string;
-  dsn: string;
-  speed: string;
-}
-
-export type SpeedInsightsV1Payload = SpeedInsightsV1Metric;
-
 // V2
-export interface SpeedInsightsV2Payload {
+export interface SpeedInsightsPayload {
   dsn: string;
   speed: string;
-  metrics: SpeedInsightsV2Metric[];
+  metrics: SpeedInsightsMetric[];
 }
 
-export interface SpeedInsightsV2Metric {
+export interface SpeedInsightsMetric {
   id: string;
   type: string;
   value: string | number;

diff --git a/packages/web/src/utils.ts b/packages/web/src/utils.ts
@@ -1,4 +1,5 @@
 import type { MetricWithAttribution } from 'web-vitals';
+import type { CollectedMetric } from './types';
 
 export function isBrowser(): boolean {
   return typeof window !== 'undefined';
@@ -19,19 +20,12 @@ export function getConnectionSpeed(): string {
   return speed;
 }
 
-const ENDPOINT = 'https://vitals.vercel-insights.com/v1/vitals';
-// const ENDPOINT_V2 = 'https://vitals.vercel-insights.com/v2/vitals';
+const ENDPOINT = 'https://vitals.vercel-insights.com/v2/vitals';
 
 export function sendBeacon(
   data: Record<string, string | number> | URLSearchParams | undefined,
 ): void {
-  // Convert the array to a URL-encoded string
-  const encodedData = new URLSearchParams(data as never).toString();
-
-  // Create a Blob object with the encoded data
-  const blob = new Blob([encodedData], {
-    type: 'application/x-www-form-urlencoded',
-  });
+  const blob = new Blob([JSON.stringify(data)]);
   try {
     if ('keepalive' in Request.prototype) {
       void fetch(ENDPOINT, {
@@ -72,3 +66,13 @@ export function cutDecimal(number: number, decimals: number): number {
   const multiplier = Math.pow(10, decimals);
   return Math.floor(number * multiplier) / multiplier;
 }
+
+export function formatMetricValue(metric: CollectedMetric): number {
+  if (metric.name === 'CLS') {
+    return cutDecimal(metric.value, 4);
+  }
+  if (metric.name === 'FID') {
+    return cutDecimal(metric.value, 2);
+  }
+  return Math.round(metric.value);
+}