feat: react scan

apps/nextjs/package.json

@@ -106,6 +106,7 @@
     "react-hot-toast": "^2.4.1",
     "react-intersection-observer": "^9.6.0",
     "react-markdown": "^9.0.0",
+    "react-scan": "^0.0.43",
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.5.3",
     "remark-gfm": "^4.0.0",

apps/nextjs/src/app/aila/page-contents.tsx

@@ -2,12 +2,17 @@
 
 import React from "react";
 
+import { useReactScan } from "hooks/useReactScan";
+
 import { Chat } from "@/components/AppComponents/Chat/Chat/chat";
+import LessonPlanDisplay from "@/components/AppComponents/Chat/chat-lessonPlanDisplay";
 import Layout from "@/components/AppComponents/Layout";
 import { ChatProvider } from "@/components/ContextProviders/ChatProvider";
 import LessonPlanTrackingProvider from "@/lib/analytics/lessonPlanTrackingContext";
 
 const ChatPageContents = ({ id }: { readonly id: string }) => {
+  useReactScan({ component: LessonPlanDisplay, interval: 10000 });
+
   return (
     <Layout>
       <LessonPlanTrackingProvider chatId={id}>

apps/nextjs/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Toaster } from "react-hot-toast";
+import { Monitoring } from "react-scan/dist/core/monitor/params/next";
 
 import { ClerkProvider } from "@clerk/nextjs";
 import "@fontsource/lexend";
@@ -38,6 +39,11 @@ const provided_vercel_url =
 
 const vercel_url = `https://${provided_vercel_url}`;
 
+const reactScanApiKey = process.env.NEXT_PUBLIC_REACT_SCAN_KEY;
+const addReactScanMonitor =
+  process.env.NEXT_PUBLIC_RENDER_MONITOR === "true" &&
+  reactScanApiKey !== undefined;
+
 const lexend = Lexend({
   subsets: ["latin"],
   display: "swap",
@@ -74,6 +80,7 @@ export default async function RootLayout({
   children,
 }: Readonly<RootLayoutProps>) {
   const nonce = headers().get("x-nonce");
+
   if (!nonce) {
     // Our middleware path matching excludes static paths like /_next/static/...
     // If a static path becomes a 404, CSP headers aren't set
@@ -93,6 +100,12 @@ export default async function RootLayout({
               GeistMono.variable,
             )}
           >
+            {addReactScanMonitor && (
+              <Monitoring
+                apiKey={reactScanApiKey}
+                url={process.env.NEXT_PUBLIC_REACT_SCAN_URL}
+              />
+            )}
             <Theme
               accentColor="blue"
               grayColor="olive"

apps/nextjs/src/hooks/useReactScan.ts

@@ -0,0 +1,149 @@
+import { useEffect } from "react";
+import { getReport, scan } from "react-scan";
+
+import { aiLogger } from "@oakai/logger";
+
+const log = aiLogger("aila:chat-performance");
+
+declare global {
+  interface Window {
+    NEXT_PUBLIC_ENABLE_RENDER_SCAN?: string;
+  }
+}
+
+function getWindowPropertyName<T>(component: React.ComponentType<T>): string {
+  return `reactScan${component.displayName ?? component.name ?? "UnknownComponent"}`;
+}
+
+function setWindowObjectForPlaywright<T>(
+  component: React.ComponentType<T> | undefined,
+  report: sortedReport,
+) {
+  if (component) {
+    const windowPropertyName = getWindowPropertyName(component);
+    window[windowPropertyName] = report;
+  }
+}
+
+function transformReport([componentName, report]: [
+  string | undefined,
+  RenderData,
+]) {
+  return {
+    name: componentName,
+    renderCount: report.renders.length,
+    totalRenderTime: report.time,
+  };
+}
+
+interface RenderData {
+  count: number;
+  time: number;
+  renders: Array<unknown>;
+  displayName: string | null;
+  type: React.ComponentType<unknown> | null;
+}
+
+type sortedReport = {
+  name: string | undefined;
+  renderCount: number;
+  totalRenderTime: number;
+};
+
+// Enable React Scan for performance monitoring - use with dev:react-scan
+// Pass in component to get report for specific component
+// Pass in interval to get reports at regular intervals
+// - useReactScan({ component: LessonPlanDisplay, interval: 10000 });
+// When a component is passed it will be added to window object for Playwright testing
+
+export const useReactScan = <T extends object>({
+  component,
+  interval,
+}: {
+  component?: React.ComponentType<T>;
+  interval?: number;
+}) => {
+  useEffect(() => {
+    const isRenderScanEnabled =
+      (typeof process !== "undefined" &&
+        process.env.NEXT_PUBLIC_ENABLE_RENDER_SCAN === "true") ||
+      (typeof window !== "undefined" &&
+        window.NEXT_PUBLIC_ENABLE_RENDER_SCAN === "true");
+
+    if (isRenderScanEnabled) {
+      try {
+        log.info("Initializing React Scan...");
+        if (typeof window !== "undefined") {
+          scan({
+            enabled: true,
+            log: true,
+            report: true,
+            renderCountThreshold: 0,
+            showToolbar: true,
+          });
+        }
+        log.info("React Scan initialized successfully");
+      } catch (error) {
+        log.error("React Scan initialization error:", error);
+      }
+
+      const analyzeRenders = () => {
+        try {
+          log.info("Attempting to get render reports...");
+
+          const allReports = component ? getReport(component) : getReport();
+
+          if (
+            allReports instanceof Map &&
+            Symbol.iterator in Object(allReports) &&
+            component === undefined
+          ) {
+            const reportsArray = Array.from(allReports.entries())
+              .filter(([componentName]) => {
+                // Exclude styled components and other library-generated components
+                const isCustomComponent =
+                  // Check if name exists and doesn't start with known library prefixes
+                  componentName &&
+                  !componentName.startsWith("Styled") &&
+                  !componentName.includes("styled") &&
+                  !componentName.startsWith("_") &&
+                  !componentName.includes("$") &&
+                  componentName !== "div" &&
+                  componentName !== "span";
+
+                return isCustomComponent;
+              })
+              .map(transformReport);
+
+            const sortedReports = reportsArray.toSorted(
+              (a, b) => b.renderCount - a.renderCount,
+            );
+
+            log.table(sortedReports);
+          } else if (
+            allReports !== null &&
+            allReports instanceof Map === false
+          ) {
+            const transformedReport = transformReport([
+              component?.name,
+              allReports,
+            ]);
+            log.info("Single Report:,", transformedReport);
+
+            setWindowObjectForPlaywright(component, transformedReport);
+          }
+        } catch (error) {
+          log.error("Performance Monitoring Error:", error);
+        }
+      };
+
+      if (interval) {
+        const performanceInterval = setInterval(analyzeRenders, interval);
+
+        return () => clearInterval(performanceInterval);
+      } else {
+        analyzeRenders();
+      }
+    }
+  }, [component, interval]);
+};

package.json

@@ -17,9 +17,9 @@
     "db-push": "turbo db-push",
     "db-push-force": "turbo db-push-force",
     "db-seed": "turbo db-seed",
-    "deps": "NODE_OPTIONS=\"--max-old-space-size=8192\" dependency-cruiser --progress --max-depth 10 --output-type err --config .dependency-cruiser.cjs apps packages",
-    "deps:graph": "NODE_OPTIONS=\"--max-old-space-size=8192\" dependency-cruiser --progress --max-depth 10 --config .dependency-cruiser.cjs --output-type dot apps packages | dot -T svg > dependency-graph.svg",
     "dev": "FORCE_COLOR=1 turbo dev --parallel --ui=stream --log-prefix=none --filter=!@oakai/db",
+    "dev:react-scan": "NEXT_PUBLIC_ENABLE_RENDER_SCAN=true turbo dev --parallel --ui=stream --log-prefix=none --filter=!@oakai/db",
+    "dev:react-scan-monitor": "NEXT_PUBLIC_RENDER_MONITOR=true turbo dev --parallel --ui=stream --log-prefix=none --filter=!@oakai/db",
     "doppler:pull:dev": "doppler secrets download --config dev --no-file --format env > .env",
     "doppler:pull:stg": "doppler secrets download --config stg --no-file --format env > .env",
     "doppler:run:stg": "doppler run -c stg --silent",
@@ -57,7 +57,6 @@
     "@semantic-release/git": "^10.0.1",
     "@types/jest": "^29.5.14",
     "autoprefixer": "^10.4.16",
-    "dependency-cruiser": "^16.7.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "next": "14.2.18",

packages/logger/index.ts

@@ -31,7 +31,7 @@ type ChildKey =
   | "aila:stream"
   | "aila:rag"
   | "aila:testing"
-  | "aila:chat"
+  | "aila:chat-performance"
   | "aila:experimental-patches"
   | "analytics"
   | "app"
@@ -88,10 +88,17 @@ const errorLogger =
  */
 export function aiLogger(childKey: ChildKey) {
   const debugLogger = debugBase.extend(childKey);
+
+  const tableLogger = (tabularData: unknown[], columns?: string[]) => {
+    if (typeof console !== "undefined" && console.table) {
+      console.table(tabularData, columns);
+    }
+  };
   return {
     info: debugLogger,
     warn: debugLogger,
     error: errorLogger.bind(structuredLogger),
+    table: tableLogger,
   };
 }