🏎️ Performance - Fix Core Web Vitals Path Tracking (#2351)

added request path as a property to metric tracking
SSWConsulting · Mar 22, 2024 · 2f8503b · 2f8503b
1 parent 5eda4e9
commit 2f8503b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 20 deletions.
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
@@ -5,9 +5,11 @@ import { useLiveStreamProps } from "../../hooks/useLiveStreamProps";
 import { Footer, PreFooter } from "./footer";
 import { Theme } from "./theme";
 
+import { useAppInsightsContext } from "@microsoft/applicationinsights-react-js";
 import dayjs from "dayjs";
 import dynamic from "next/dynamic";
 import { Open_Sans } from "next/font/google";
+import { useReportWebVitals } from "next/web-vitals";
 import { WebSite, WithContext } from "schema-dts";
 import { MegaMenuLayout, NavMenuGroup } from "ssw.megamenu";
 import layoutData from "../../content/global/index.json";
@@ -86,6 +88,24 @@ export const Layout = ({
       "[)"
     );
 
+  const appInsights = useAppInsightsContext();
+
+  useReportWebVitals((metric) => {
+    switch (metric.name) {
+      case "TTFB":
+      case "FCP":
+      case "LCP":
+      case "FID":
+      case "CLS":
+      case "INP":
+        appInsights.trackMetric(
+          { name: metric.name, average: metric.value },
+          { page: router.asPath }
+        );
+        break;
+    }
+  });
+
   return (
     <>
       <Head>

diff --git a/pages/[...filename].tsx b/pages/[...filename].tsx
@@ -1,8 +1,6 @@
 import { Blocks } from "@/components/blocks-renderer";
 import { componentRenderer } from "@/components/blocks/mdxComponentRenderer";
-import { useAppInsightsContext } from "@microsoft/applicationinsights-react-js";
 import { InferGetStaticPropsType } from "next";
-import { useReportWebVitals } from "next/web-vitals";
 import { tinaField, useTina } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { client } from "../.tina/__generated__/client";
@@ -23,24 +21,6 @@ export default function HomePage(
     variables: props.variables,
   });
 
-  const appInsights = useAppInsightsContext();
-
-  useReportWebVitals((metric) => {
-    switch (metric.name) {
-      case "TTFB":
-      case "FCP":
-      case "LCP":
-      case "FID":
-      case "CLS":
-      case "INP":
-        appInsights.trackMetric(
-          { name: metric.name, average: metric.value },
-          {}
-        );
-        break;
-    }
-  });
-
   // Here due to components attempting to access pageBlock items before
   // they are initialised
   if (!pageBlocks) {