novalon-website/src/app/test-error-tracking/page-client.tsx

'use client';

import { useState } from 'react';
import { trackError } from '@/lib/analytics';

export default function TestErrorTrackingClient() {
  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) {
      const errorMessage = error instanceof Error ? error.message : String(error);
      trackError('javascript_error', errorMessage, 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>
  );
}