Bundle analysis and monitoring

app/api/web-vitals/route.js

@@ -0,0 +1,114 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+const WEB_VITALS_DIR = path.join(process.cwd(), ".next", "web-vitals");
+
+// Ensure web-vitals directory exists
+if (!fs.existsSync(WEB_VITALS_DIR)) {
+  fs.mkdirSync(WEB_VITALS_DIR, { recursive: true });
+}
+
+export async function POST(request) {
+  try {
+    const { metric, data, url, userAgent, timestamp } = await request.json();
+
+    // Store the metric data
+    const vitalsData = {
+      metric,
+      data,
+      url,
+      userAgent,
+      timestamp: new Date(timestamp).toISOString(),
+      receivedAt: new Date().toISOString(),
+    };
+
+    // Save to file (in production, you would save to a database)
+    const filePath = path.join(WEB_VITALS_DIR, `${metric}.json`);
+    let existingData = [];
+
+    if (fs.existsSync(filePath)) {
+      try {
+        existingData = JSON.parse(fs.readFileSync(filePath, "utf8"));
+      } catch (error) {
+        console.warn("Could not parse existing vitals data:", error.message);
+      }
+    }
+
+    existingData.push(vitalsData);
+
+    // Keep only last 100 entries per metric
+    if (existingData.length > 100) {
+      existingData = existingData.slice(-100);
+    }
+
+    fs.writeFileSync(filePath, JSON.stringify(existingData, null, 2));
+
+    // Log for monitoring
+    console.log(
+      `Web Vital received: ${metric} = ${data.value}ms (${data.rating})`
+    );
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Error processing web vital:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET() {
+  try {
+    const metrics = {};
+
+    if (fs.existsSync(WEB_VITALS_DIR)) {
+      const files = fs.readdirSync(WEB_VITALS_DIR);
+
+      files.forEach((file) => {
+        if (file.endsWith(".json")) {
+          const metric = file.replace(".json", "");
+          const data = JSON.parse(
+            fs.readFileSync(path.join(WEB_VITALS_DIR, file), "utf8")
+          );
+
+          if (data.length > 0) {
+            const values = data
+              .map((d) => d.data.value)
+              .filter((v) => v !== undefined);
+            const ratings = data
+              .map((d) => d.data.rating)
+              .filter((r) => r !== undefined);
+
+            metrics[metric] = {
+              count: data.length,
+              average:
+                values.length > 0
+                  ? Math.round(
+                      values.reduce((a, b) => a + b, 0) / values.length
+                    )
+                  : 0,
+              min: values.length > 0 ? Math.min(...values) : 0,
+              max: values.length > 0 ? Math.max(...values) : 0,
+              goodCount: ratings.filter((r) => r === "good").length,
+              needsImprovementCount: ratings.filter(
+                (r) => r === "needs-improvement"
+              ).length,
+              poorCount: ratings.filter((r) => r === "poor").length,
+              lastUpdated: data[data.length - 1]?.receivedAt,
+            };
+          }
+        }
+      });
+    }
+
+    return NextResponse.json({ metrics });
+  } catch (error) {
+    console.error("Error fetching web vitals:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}

app/components/WebVitalsDashboard.js

@@ -0,0 +1,245 @@
+"use client";
+
+import React, { useState, useEffect, memo } from "react";
+
+const WebVitalsDashboard = memo(() => {
+  const [vitals, setVitals] = useState({
+    lcp: { value: 0, rating: "unknown" },
+    fid: { value: 0, rating: "unknown" },
+    cls: { value: 0, rating: "unknown" },
+    fcp: { value: 0, rating: "unknown" },
+    ttfb: { value: 0, rating: "unknown" },
+  });
+
+  const [metrics, setMetrics] = useState({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Fetch Web Vitals data from API
+    const fetchVitals = async () => {
+      try {
+        const response = await fetch("/api/web-vitals");
+        const data = await response.json();
+        setMetrics(data.metrics || {});
+      } catch (error) {
+        console.error("Error fetching web vitals:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVitals();
+
+    // Set up Web Vitals tracking
+    if (typeof window !== "undefined") {
+      import("web-vitals").then(
+        ({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+          // Track Largest Contentful Paint
+          getLCP((metric) => {
+            setVitals((prev) => ({
+              ...prev,
+              lcp: {
+                value: Math.round(metric.value),
+                rating: metric.rating,
+              },
+            }));
+          });
+
+          // Track First Input Delay
+          getFID((metric) => {
+            setVitals((prev) => ({
+              ...prev,
+              fid: {
+                value: Math.round(metric.value),
+                rating: metric.rating,
+              },
+            }));
+          });
+
+          // Track Cumulative Layout Shift
+          getCLS((metric) => {
+            setVitals((prev) => ({
+              ...prev,
+              cls: {
+                value: Math.round(metric.value * 1000) / 1000,
+                rating: metric.rating,
+              },
+            }));
+          });
+
+          // Track First Contentful Paint
+          getFCP((metric) => {
+            setVitals((prev) => ({
+              ...prev,
+              fcp: {
+                value: Math.round(metric.value),
+                rating: metric.rating,
+              },
+            }));
+          });
+
+          // Track Time to First Byte
+          getTTFB((metric) => {
+            setVitals((prev) => ({
+              ...prev,
+              ttfb: {
+                value: Math.round(metric.value),
+                rating: metric.rating,
+              },
+            }));
+          });
+        }
+      );
+    }
+  }, []);
+
+  const getRatingColor = (rating) => {
+    switch (rating) {
+      case "good":
+        return "text-green-600 bg-green-50";
+      case "needs-improvement":
+        return "text-yellow-600 bg-yellow-50";
+      case "poor":
+        return "text-red-600 bg-red-50";
+      default:
+        return "text-gray-600 bg-gray-50";
+    }
+  };
+
+  const getRatingIcon = (rating) => {
+    switch (rating) {
+      case "good":
+        return "✅";
+      case "needs-improvement":
+        return "⚠️";
+      case "poor":
+        return "❌";
+      default:
+        return "❓";
+    }
+  };
+
+  const formatValue = (metric, value) => {
+    if (metric === "cls") {
+      return value.toFixed(3);
+    }
+    return `${value}ms`;
+  };
+
+  if (loading) {
+    return (
+      <div className="p-6 bg-white rounded-lg shadow-lg">
+        <div className="animate-pulse">
+          <div className="h-6 bg-gray-200 rounded w-1/3 mb-4"></div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[1, 2, 3, 4, 5].map((i) => (
+              <div key={i} className="p-4 border rounded-lg">
+                <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
+                <div className="h-3 bg-gray-200 rounded w-3/4"></div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 bg-white rounded-lg shadow-lg">
+      <h2 className="text-2xl font-bold mb-6 text-[var(--color-content-default-primary)]">
+        Web Vitals Dashboard
+      </h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
+        {Object.entries(vitals).map(([metric, data]) => (
+          <div
+            key={metric}
+            className={`p-4 border rounded-lg ${getRatingColor(data.rating)}`}
+          >
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="font-semibold text-lg">{metric.toUpperCase()}</h3>
+              <span className="text-2xl">{getRatingIcon(data.rating)}</span>
+            </div>
+            <div className="text-sm">
+              <div className="font-medium">
+                Value: {formatValue(metric, data.value)}
+              </div>
+              <div className="capitalize">
+                Rating: {data.rating.replace("-", " ")}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Historical Metrics */}
+      {Object.keys(metrics).length > 0 && (
+        <div className="mb-6">
+          <h3 className="text-lg font-semibold mb-4 text-[var(--color-content-default-primary)]">
+            Historical Metrics
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {Object.entries(metrics).map(([metric, data]) => (
+              <div
+                key={metric}
+                className="p-4 border rounded-lg bg-[var(--color-surface-default-secondary)]"
+              >
+                <h4 className="font-semibold mb-2">{metric.toUpperCase()}</h4>
+                <div className="text-sm space-y-1">
+                  <div>Count: {data.count}</div>
+                  <div>Average: {formatValue(metric, data.average)}</div>
+                  <div>
+                    Range: {formatValue(metric, data.min)} -{" "}
+                    {formatValue(metric, data.max)}
+                  </div>
+                  <div className="flex gap-2 text-xs">
+                    <span className="text-green-600">
+                      Good: {data.goodCount}
+                    </span>
+                    <span className="text-yellow-600">
+                      Needs Improvement: {data.needsImprovementCount}
+                    </span>
+                    <span className="text-red-600">Poor: {data.poorCount}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Performance Guidelines */}
+      <div className="p-4 bg-[var(--color-surface-default-secondary)] rounded-lg">
+        <h3 className="font-semibold mb-2 text-[var(--color-content-default-primary)]">
+          Performance Guidelines
+        </h3>
+        <ul className="text-sm space-y-1 text-[var(--color-content-default-secondary)]">
+          <li>
+            • <strong>LCP:</strong> Good &lt; 2.5s, Needs Improvement 2.5-4s,
+            Poor &gt; 4s
+          </li>
+          <li>
+            • <strong>FID:</strong> Good &lt; 100ms, Needs Improvement
+            100-300ms, Poor &gt; 300ms
+          </li>
+          <li>
+            • <strong>CLS:</strong> Good &lt; 0.1, Needs Improvement 0.1-0.25,
+            Poor &gt; 0.25
+          </li>
+          <li>
+            • <strong>FCP:</strong> Good &lt; 1.8s, Needs Improvement 1.8-3s,
+            Poor &gt; 3s
+          </li>
+          <li>
+            • <strong>TTFB:</strong> Good &lt; 800ms, Needs Improvement
+            800-1800ms, Poor &gt; 1800ms
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+});
+
+WebVitalsDashboard.displayName = "WebVitalsDashboard";
+
+export default WebVitalsDashboard;

app/monitor/page.js

@@ -0,0 +1,160 @@
+import React from "react";
+import WebVitalsDashboard from "../components/WebVitalsDashboard";
+import Header from "../components/Header";
+import Footer from "../components/Footer";
+
+export default function MonitorPage() {
+  return (
+    <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
+      <Header />
+
+      <main className="container mx-auto px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)]">
+        <div className="max-w-6xl mx-auto">
+          <div className="mb-[var(--spacing-scale-032)]">
+            <h1 className="text-4xl font-bold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-016)]">
+              Performance Monitoring
+            </h1>
+            <p className="text-[var(--font-size-body-large)] text-[var(--color-content-default-secondary)]">
+              Real-time monitoring of Core Web Vitals and performance metrics
+              for Community Rule 3.0
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-[var(--spacing-scale-032)] mb-[var(--spacing-scale-032)]">
+            <div className="p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]">
+              <h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]">
+                Performance Targets
+              </h2>
+              <div className="space-y-[var(--spacing-scale-012)]">
+                <div className="flex justify-between items-center">
+                  <span className="text-[var(--font-size-body-medium)]">
+                    Load Time
+                  </span>
+                  <span className="font-semibold text-green-600">
+                    &lt; 2 seconds
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-[var(--font-size-body-medium)]">
+                    LCP
+                  </span>
+                  <span className="font-semibold text-green-600">
+                    &lt; 2.5s
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-[var(--font-size-body-medium)]">
+                    FID
+                  </span>
+                  <span className="font-semibold text-green-600">
+                    &lt; 100ms
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-[var(--font-size-body-medium)]">
+                    CLS
+                  </span>
+                  <span className="font-semibold text-green-600">&lt; 0.1</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-[var(--font-size-body-medium)]">
+                    Lighthouse Score
+                  </span>
+                  <span className="font-semibold text-green-600">&gt; 90</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]">
+              <h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]">
+                Optimization Status
+              </h2>
+              <div className="space-y-[var(--spacing-scale-012)]">
+                <div className="flex items-center gap-[var(--spacing-scale-008)]">
+                  <span className="text-green-600">✅</span>
+                  <span className="text-[var(--font-size-body-medium)]">
+                    Code Splitting & Dynamic Imports
+                  </span>
+                </div>
+                <div className="flex items-center gap-[var(--spacing-scale-008)]">
+                  <span className="text-green-600">✅</span>
+                  <span className="text-[var(--font-size-body-medium)]">
+                    React.memo Optimizations
+                  </span>
+                </div>
+                <div className="flex items-center gap-[var(--spacing-scale-008)]">
+                  <span className="text-green-600">✅</span>
+                  <span className="text-[var(--font-size-body-medium)]">
+                    Image Optimization
+                  </span>
+                </div>
+                <div className="flex items-center gap-[var(--spacing-scale-008)]">
+                  <span className="text-green-600">✅</span>
+                  <span className="text-[var(--font-size-body-medium)]">
+                    Font Preloading
+                  </span>
+                </div>
+                <div className="flex items-center gap-[var(--spacing-scale-008)]">
+                  <span className="text-green-600">✅</span>
+                  <span className="text-[var(--font-size-body-medium)]">
+                    Bundle Analysis
+                  </span>
+                </div>
+                <div className="flex items-center gap-[var(--spacing-scale-008)]">
+                  <span className="text-green-600">✅</span>
+                  <span className="text-[var(--font-size-body-medium)]">
+                    Error Boundaries
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <WebVitalsDashboard />
+
+          <div className="mt-[var(--spacing-scale-032)] p-[var(--spacing-scale-024)] bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-medium)]">
+            <h2 className="text-2xl font-semibold mb-[var(--spacing-scale-016)] text-[var(--color-content-default-primary)]">
+              Monitoring Commands
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-[var(--spacing-scale-016)]">
+              <div>
+                <h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]">
+                  Bundle Analysis
+                </h3>
+                <code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm">
+                  npm run bundle:analyze
+                </code>
+              </div>
+              <div>
+                <h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]">
+                  Performance Monitor
+                </h3>
+                <code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm">
+                  npm run performance:monitor
+                </code>
+              </div>
+              <div>
+                <h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]">
+                  Web Vitals Tracking
+                </h3>
+                <code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm">
+                  npm run web-vitals:track
+                </code>
+              </div>
+              <div>
+                <h3 className="font-semibold mb-[var(--spacing-scale-008)] text-[var(--color-content-default-primary)]">
+                  All Monitoring
+                </h3>
+                <code className="block p-[var(--spacing-scale-008)] bg-[var(--color-surface-inverse-brand-primary)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] text-sm">
+                  npm run monitor:all
+                </code>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}