📈 App Router - added app insights telemetry for app components (#3151)

* 📈 Added app insights telemetry for app components * 🚨 Cleaned up linting errors * removed fallback text from suspense boundary * 🐛 Fixed screen rendering blank while query params resolve * ♻️ Removed unnecessary suspense boundary * ⚡ Removed unnecessary suspense boundary from app router layout component * ⚡ Added telemetry provider to template.tsx * 🚨 Fixed useReportWebVitals being called conditionally * 🚨 Removed unused imports from layout.tsx * Added template to layout properly * 🐛 Fixed TelemetryProvider not receiving appInsights from context provider * 🚨 Removed unused import * Adding web vitals as client component * cleaning up redundant components * handling undefined for appInsight * Fixing rewards URL * removing console log * Adding ISR * Adding placeholder for the countdown * Removing unused MenuData variable * removing unused import * Wrapping web vitals with AppInsight --------- Co-authored-by: Calinator444 <[email protected]> Co-authored-by: Aman Kumar [SSW] <[email protected]>
SSWConsulting · Sep 25, 2024 · a03d292 · a03d292
1 parent f014828
commit a03d292
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 21 deletions.
diff --git a/app/components/web-vitals.tsx b/app/components/web-vitals.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useAppInsightsContext } from "@microsoft/applicationinsights-react-js";
+import { usePathname } from "next/navigation";
+import { useReportWebVitals } from "next/web-vitals";
+
+export const WebVitals = () => {
+  const appInsights = useAppInsightsContext();
+  const pathname = usePathname();
+
+  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: `${pathname}` }
+        );
+        break;
+    }
+  });
+  return <></>;
+};
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,27 +1,24 @@
 import "styles.css";
-
 // import { CustomLink } from "@/components/customLink";
 // import { Footer } from "@/components/layout/footer";
-import classNames from "classnames";
-import { Open_Sans } from "next/font/google";
-// import Head from "next/head";
-// import { Theme } from "../components/layout/theme";
 import { Footer } from "@/components/layout/footer/footer";
 import { MegaMenuWrapper } from "@/components/server/MegaMenuWrapper";
 import ChatBaseBot from "@/components/zendeskButton/chatBaseBot";
-import { Metadata, Viewport } from "next";
-
+import { AppInsightsProvider } from "@/context/app-insight-client";
 import { EventInfoStatic } from "@/services/server/events";
 import { GoogleTagManager } from "@next/third-parties/google";
+import classNames from "classnames";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import isBetween from "dayjs/plugin/isBetween";
 import relativeTime from "dayjs/plugin/relativeTime";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import { Suspense } from "react";
+import { Metadata, Viewport } from "next";
+import { Open_Sans } from "next/font/google";
 import client from "../tina/__generated__/client";
 import { MenuWrapper } from "./components/MenuWrapper";
+import { WebVitals } from "./components/web-vitals";
 import { LiveStream } from "./live-steam-banner/live-stream";
 import { DEFAULT } from "./meta-data/default";
 import { getMegamenu } from "./utils/get-mega-menu";
@@ -47,6 +44,8 @@ export const viewport: Viewport = {
   initialScale: 1,
 };
 
+export const revalidate = 3600;
+
 export default async function RootLayout({
   children,
 }: {
@@ -75,19 +74,21 @@ export default async function RootLayout({
         >
           <header className="no-print">
             {liveStreamData ? (
-              <Suspense>
-                <LiveStream event={liveStreamData}>
-                  <MegaMenuWrapper menu={menuData.data.megamenu.menuGroups} />
-                </LiveStream>
-              </Suspense>
+              <LiveStream event={liveStreamData}>
+                <MegaMenuWrapper menu={menuData.data.megamenu.menuGroups} />
+              </LiveStream>
             ) : (
               <MenuWrapper>
                 <MegaMenuWrapper menu={menuData.data.megamenu.menuGroups} />
               </MenuWrapper>
             )}
           </header>
-          <main className="grow bg-white">{children}</main>
-
+          <main className="grow bg-white">
+            <AppInsightsProvider>
+              <WebVitals />
+              {children}
+            </AppInsightsProvider>
+          </main>
           <Footer />
         </div>
         {/* </Theme> */}

diff --git a/app/live-steam-banner/live-stream.tsx b/app/live-steam-banner/live-stream.tsx
@@ -14,7 +14,7 @@ import {
   EventInfoStatic,
   formatDates,
 } from "@/services/server/events";
-import { useSearchParams } from "next/navigation";
+import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation";
 import { PropsWithChildren, useEffect, useState } from "react";
 dayjs.extend(relativeTime);
 dayjs.extend(timezone);
@@ -47,7 +47,7 @@ interface LiveStreamProps extends PropsWithChildren {
 }
 
 export function LiveStream({ event, children }: LiveStreamProps) {
-  const params = useSearchParams();
+  const params: ReadonlyURLSearchParams = useSearchParams();
   const [countdownMins, setCountdownMins] = useState<number>();
   const [liveStreamDelayMinutes, setLiveStreamDelayMinutes] = useState(0);
 
@@ -104,15 +104,15 @@ export function LiveStream({ event, children }: LiveStreamProps) {
 
   return (
     <>
-      {(showBanner || params.get("liveBanner")) && (
+      {(showBanner || params?.get("liveBanner")) && (
         <LiveStreamBanner
           countdownMins={countdownMins}
           liveStreamData={eventDynamic}
           isLive={!!isLive}
         />
       )}
       <MenuWrapper>
-        {(isLive || params.get("liveStream")) && (
+        {(isLive || params?.get("liveStream")) && (
           <LiveStreamWidget
             {...{ eventDynamic, liveStreamDelayMinutes }}
             event={eventDynamic}

diff --git a/components/liveStream/liveStreamBanner.tsx b/components/liveStream/liveStreamBanner.tsx
@@ -52,7 +52,7 @@ const LiveStreamBanner = ({
           <h1 className="m-0 py-0 text-xl font-light text-gray-300">{title}</h1>
           <p className="py-0 text-xs text-white">
             <span className="block text-sswRed">
-              {isLive ? liveText : countdownText}
+              {(isLive ? liveText : countdownText) || "Calculating..."}
             </span>
             {!isLive && scheduledTimeText(dayjs(startDateTime))}
           </p>

diff --git a/content/products/index/index.json b/content/products/index/index.json
@@ -57,7 +57,7 @@
     },
     {
       "name": "SSW Rewards",
-      "url": "https://www.ssw.com.au/products/rewards",
+      "url": "/products/rewards",
       "description": "Scan SSW QR codes, earn SSW Points, claim rewards, and win prizes!",
       "logo": "/images/products/ssw-rewards.jpeg"
     },