diff --git a/app/components/web-vitals.tsx b/app/components/web-vitals.tsx new file mode 100644 index 000000000..e729a7cdd --- /dev/null +++ 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 index 00e9f14a4..eb49f3e9f 100644 --- 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({ >
{liveStreamData ? ( - - - - - + + + ) : ( )}
-
{children}
- +
+ + + {children} + +