refactor: add vercel analytics

public/index.html

@@ -9,7 +9,6 @@
       name="description"
       content="A simple emotion picker that displays all the supported GitHub emojis."
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

src/@types/global.d.ts

@@ -1,5 +1,48 @@
+/**
+ * @file Contains global type definitions.
+ */
+
 /**
  * Disable emoji-mart typing warnings.
  */
 // TODO: Remove when https://github.com/missive/emoji-mart/issues/576 is merged.
 declare module "@emoji-mart/react";
+
+/**
+ * Extend Navigator with extra types.
+ *
+ * @description Define NetworkInformation attribute types. Needed since they are not yet supported (see
+ * https://stackoverflow.com/a/69676260/8135687). Taken from
+ * https://github.com/lacolaco/network-information-types/blob/master/index.d.ts
+ */
+declare interface Navigator extends NavigatorNetworkInformation {}
+
+// http://wicg.github.io/netinfo/#navigatornetworkinformation-interface
+declare interface NavigatorNetworkInformation {
+  readonly connection?: NetworkInformation;
+}
+
+// http://wicg.github.io/netinfo/#effectiveconnectiontype-enum
+type EffectiveConnectionType = "2g" | "3g" | "4g" | "slow-2g";
+
+// http://wicg.github.io/netinfo/#dom-megabit
+type Megabit = number;
+// http://wicg.github.io/netinfo/#dom-millisecond
+type Millisecond = number;
+
+// http://wicg.github.io/netinfo/#networkinformation-interface
+interface NetworkInformation extends EventTarget {
+  // readonly type?: ConnectionType; // NOTE: Already included in upstream https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts#L10430.
+  // http://wicg.github.io/netinfo/#effectivetype-attribute
+  readonly effectiveType?: EffectiveConnectionType;
+  // http://wicg.github.io/netinfo/#downlinkmax-attribute
+  readonly downlinkMax?: Megabit;
+  // http://wicg.github.io/netinfo/#downlink-attribute
+  readonly downlink?: Megabit;
+  // http://wicg.github.io/netinfo/#rtt-attribute
+  readonly rtt?: Millisecond;
+  // http://wicg.github.io/netinfo/#savedata-attribute
+  readonly saveData?: boolean;
+  // http://wicg.github.io/netinfo/#handling-changes-to-the-underlying-connection
+  onchange?: EventListener;
+}

src/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
+import { sendToVercelAnalytics } from "./vitals";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -15,4 +16,6 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+if (process.env.NODE_ENV === "production") {
+  reportWebVitals(sendToVercelAnalytics);
+}

src/vitals.tsx

@@ -0,0 +1,55 @@
+import { Metric } from "web-vitals";
+
+const vitalsUrl = "https://vitals.vercel-analytics.com/v1/vitals";
+
+/**
+ * Retrieves user connection speed.
+ *
+ * @returns A Vitals object.
+ */
+function getConnectionSpeed() {
+  return "connection" in navigator &&
+    navigator.connection &&
+    "effectiveType" in navigator.connection
+    ? navigator.connection.effectiveType !== undefined
+      ? navigator.connection.effectiveType
+      : ""
+    : "";
+}
+/**
+ * Send metrics to Vercel analytics.
+ *
+ * @param metric
+ * @returns
+ */
+export function sendToVercelAnalytics(metric: Metric) {
+  const analyticsId = process.env.REACT_APP_VERCEL_ANALYTICS_ID;
+  if (!analyticsId) {
+    getConnectionSpeed();
+    return;
+  }
+
+  const body = {
+    dsn: analyticsId,
+    id: metric.id,
+    page: window.location.pathname,
+    href: window.location.href,
+    event_name: metric.name,
+    value: metric.value.toString(),
+    speed: getConnectionSpeed(),
+  };
+
+  const blob = new Blob([new URLSearchParams(body).toString()], {
+    // This content type is necessary for `sendBeacon`
+    type: "application/x-www-form-urlencoded",
+  });
+  if (navigator.sendBeacon) {
+    navigator.sendBeacon(vitalsUrl, blob);
+  } else
+    fetch(vitalsUrl, {
+      body: blob,
+      method: "POST",
+      credentials: "omit",
+      keepalive: true,
+    });
+}