Merge pull request #7 from CROW-B3/CROW-104-web-vitals-integration-for-rogue-store

Author: prdai

.lighthouse/lighthouse-performance.json

@@ -15,7 +15,7 @@ ENV NEXT_TELEMETRY_DISABLED=1
 ENV DOCKER_BUILD=true
 RUN bun run build
 
-FROM node:20-alpine AS runner
+FROM oven/bun:1-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
@@ -35,4 +35,4 @@ EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME=0.0.0.0
 
-CMD ["node", "server.js"]
+CMD ["bun", "server.js"]

Dockerfile

@@ -0,0 +1,8 @@
+"use client";
+import { useReportWebVitals } from "next/web-vitals";
+import { logWebVitals } from "@/lib/utils";
+
+export const WebVitals = () => {
+  useReportWebVitals(logWebVitals);
+  return <div></div>;
+};

_components/web-vitals.js

@@ -5,6 +5,7 @@ import { Header } from "@/components/layout/header";
 import { Footer } from "@/components/layout/footer";
 import { CartDrawer } from "@/components/cart/cart-drawer";
 import { ToastProvider } from "@/components/ui/toast-provider";
+import { WebVitals } from "@/_components/web-vitals";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -35,6 +36,7 @@ export default function RootLayout({
         </div>
         <CartDrawer />
         <ToastProvider />
+        {process.env.NODE_ENV === "production" ? null : <WebVitals />}
       </body>
     </html>
   );

app/layout.tsx

@@ -55,3 +55,8 @@ export function debounce<T extends (...args: never[]) => unknown>(
     timeout = setTimeout(() => func(...args), wait);
   };
 }
+
+// eslint-disable-next-line
+export const logWebVitals = (metric: any) => {
+  console.log(metric);
+};

bun.lock

@@ -4,6 +4,7 @@ const config: Config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./_components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
 };