webvitals

icco · Sep 14, 2024 · b8faa59 · b8faa59
1 parent d98df99
commit b8faa59
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { Roboto, Roboto_Mono, Roboto_Slab } from "next/font/google";
 
 import { Header, Size } from "@/components/Header";
 import { ThemeProvider } from "@/components/ThemeProvider";
+import { WebVitals } from "@/components/WebVitals";
 
 const roboto = Roboto({
   weight: "400",
@@ -53,6 +54,7 @@ export default function RootLayout({
       <body>
         <ThemeProvider defaultTheme="system" enableSystem>
           <Header size={Size.Small} />
+          <WebVitals />
           <main>{children}</main>
         </ThemeProvider>
       </body>

diff --git a/src/components/WebVitals.tsx b/src/components/WebVitals.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { useReportWebVitals } from "next/web-vitals";
+
+export function WebVitals() {
+  useReportWebVitals((metric) => {
+    const body = JSON.stringify(metric);
+    const url = "https://reportd.natwelch.com/analytics/natwelch";
+
+    // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
+    if (navigator.sendBeacon) {
+      navigator.sendBeacon(url, body);
+    } else {
+      fetch(url, { body, method: "POST", keepalive: true });
+    }
+  });
+}