feat: downgrade tech stack to stable versions and integrate GA4 error monitoring

- Downgrade Next.js 16→14.2, React 19→18.3, Tailwind 4→3.4 - Add comprehensive GA4 error monitoring system - Create Jenkins CI/CD pipeline with quality gates - Fix build issues: ESLint, SWC conflict, config format - Add documentation for deployment and error tracking
2026-05-12 12:45:18 +08:00
parent f08874f5c4
commit 8840c4398a
24 changed files with 8567 additions and 3632 deletions
@@ -1,11 +1,6 @@
-@import "tailwindcss";
-
-@theme inline {
-  --font-sans: var(--font-noto-sans-sc), var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: var(--font-geist-mono);
-  --font-chinese: var(--font-noto-sans-sc), sans-serif;
-  --font-calligraphy: var(--font-ma-shan-zheng), 'ZCOOL XiaoWei', 'STKaiti', 'KaiTi', serif;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

 :root {
  --color-primary: #1C1C1C;
@@ -5,6 +5,7 @@ import "./globals.css";
 import { Suspense } from "react";
 import { ThemeProvider } from "@/contexts/theme-context";
 import { GoogleAnalyticsWrapper } from "@/components/analytics/GoogleAnalyticsWrapper";
+import { GlobalErrorTracker } from "@/components/analytics/GlobalErrorTracker";
 import { CookieConsent } from "@/components/analytics/CookieConsent";
 import { PerformanceTracker } from "@/components/analytics/PerformanceTracker";
 import { OutboundLinkTracker } from "@/components/analytics/OutboundLinkTracker";
@@ -151,6 +152,7 @@ export default function RootLayout({
        </a>
        <ScrollProgress />
        <GoogleAnalyticsWrapper />
+        <GlobalErrorTracker />
        <PerformanceTracker />
        <OutboundLinkTracker />
        <ScrollDepthTracker />
@@ -0,0 +1,162 @@
+'use client';
+
+import { useState } from 'react';
+import { trackError } from '@/lib/analytics';
+
+export default function TestErrorTrackingPage() {
+  const [testResults, setTestResults] = useState<string[]>([]);
+
+  const addResult = (message: string) => {
+    setTestResults((prev) => [...prev, `[${new Date().toLocaleTimeString()}] ${message}`]);
+  };
+
+  const testJavaScriptError = () => {
+    try {
+      addResult('🧪 测试 1: 触发 JavaScript 运行时错误...');
+      throw new Error('测试错误：这是一个故意的 JavaScript 错误');
+    } catch (error) {
+      trackError('javascript_error', error.message, false, {
+        test_id: 'test_js_error',
+        filename: 'test-error-page.tsx',
+        lineno: 20,
+      });
+      addResult('✅ JavaScript 错误已发送到 GA4');
+    }
+  };
+
+  const testPromiseRejection = () => {
+    addResult('🧪 测试 2: 触发 Promise 未捕获异常...');
+    Promise.reject(new Error('测试错误：Promise 故意拒绝'));
+    addResult('✅ Promise 异常已触发（由 GlobalErrorTracker 自动捕获）');
+  };
+
+  const testReactError = () => {
+    addResult('🧪 测试 3: 触发 React 渲染错误...');
+    trackError('react_error', '组件渲染失败：测试故意错误', true, {
+      component: 'TestComponent',
+      stack_trace: 'Error: 测试错误\n    at TestComponent...',
+    });
+    addResult('✅ React 错误已发送到 GA4（标记为 fatal）');
+  };
+
+  const testNetworkError = () => {
+    addResult('🧪 测试 4: 模拟网络请求错误...');
+    trackError('network_error', 'Failed to fetch: https://api.example.com/data', false, {
+      url: 'https://api.example.com/data',
+      status_code: 0,
+      request_method: 'GET',
+    });
+    addResult('✅ 网络错误已发送到 GA4');
+  };
+
+  const clearResults = () => {
+    setTestResults([]);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-gray-900 mb-8">
+          🧪 GA4 错误监控测试面板
+        </h1>
+
+        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+          <h2 className="text-xl font-semibold text-gray-800 mb-4">
+            测试用例
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <button
+              onClick={testJavaScriptError}
+              className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+            >
+              📛 测试 JavaScript 错误
+            </button>
+            <button
+              onClick={testPromiseRejection}
+              className="px-6 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors"
+            >
+              ⚠️ 测试 Promise 异常
+            </button>
+            <button
+              onClick={testReactError}
+              className="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
+            >
+              💥 测试 React 致命错误
+            </button>
+            <button
+              onClick={testNetworkError}
+              className="px-6 py-3 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition-colors"
+            >
+              🌐 测试网络错误
+            </button>
+          </div>
+
+          <button
+            onClick={clearResults}
+            className="mt-4 px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+          >
+            🗑️ 清除日志
+          </button>
+        </div>
+
+        {testResults.length > 0 && (
+          <div className="bg-gray-900 rounded-lg shadow-md p-6">
+            <h2 className="text-xl font-semibold text-green-400 mb-4">
+              📋 测试日志
+            </h2>
+            <div className="space-y-2 font-mono text-sm">
+              {testResults.map((result, index) => (
+                <div key={index} className="text-green-300">
+                  {result}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-yellow-800 mb-2">
+            💡 如何验证错误是否成功发送到 GA4？
+          </h3>
+          <ol className="list-decimal list-inside space-y-2 text-yellow-700">
+            <li>点击上面的测试按钮</li>
+            <li>
+              打开{' '}
+              <a
+                href="https://analytics.google.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="underline font-semibold"
+              >
+                Google Analytics 后台
+              </a>
+            </li>
+            <li>导航到：报告 → 实时</li>
+            <li>在事件搜索框输入 <code className="bg-yellow-100 px-1">exception</code></li>
+            <li>你应该能在 30 秒内看到错误事件出现！</li>
+          </ol>
+        </div>
+
+        <div className="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-blue-800 mb-2">
+            🔧 开发者工具调试
+          </h3>
+          <p className="text-blue-700 mb-2">
+            在开发模式下，打开浏览器控制台（F12），你会看到类似这样的日志：
+          </p>
+          <pre className="bg-blue-900 text-green-300 p-4 rounded-lg overflow-x-auto text-sm">
+{`[GA4] Error tracked: {
+  description: "[javascript_error] 测试错误：这是一个故意的 JavaScript 错误",
+  fatal: "false",
+  url: "http://localhost:3000/test-error-tracking",
+  timestamp: "2025-01-15T10:30:00.000Z",
+  test_id: "test_js_error",
+  filename: "test-error-page.tsx",
+  lineno: 20
+}`}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}