修復 too many connection 問題

app/debug-ip/page.tsx

@@ -0,0 +1,325 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Loader2, Database, Eye, RefreshCw } from 'lucide-react';
+
+interface IPInfo {
+  smartDetection?: {
+    detectedIP: string;
+    confidence: 'high' | 'medium' | 'low';
+    source: string;
+    allCandidates: string[];
+    isPublicIP: boolean;
+  };
+  headers: Record<string, string | null>;
+  nextRequestIP: string | undefined;
+  env: Record<string, string | undefined>;
+  allHeaders: Record<string, string>;
+}
+
+export default function DebugIPPage() {
+  const [ipInfo, setIpInfo] = useState<IPInfo | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<string>('');
+  const [error, setError] = useState<string>('');
+  const [recommendedIP, setRecommendedIP] = useState<string>('');
+
+  // 獲取 IP 調試信息
+  const fetchIPInfo = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/debug-ip');
+      const data = await response.json();
+      
+      if (data.success) {
+        setIpInfo(data.data);
+        
+        // 提取智能偵測結果
+        if (data.data.smartDetection) {
+          const smartDetection = data.data.smartDetection;
+          setRecommendedIP(smartDetection.detectedIP);
+          setMessage(`智能偵測結果: ${smartDetection.detectedIP} (可信度: ${smartDetection.confidence}, 來源: ${smartDetection.source})`);
+        } else {
+          setMessage('IP 調試信息更新成功');
+        }
+        setError('');
+      } else {
+        setError(data.error || '獲取 IP 調試信息失敗');
+      }
+    } catch (err) {
+      setError('網路錯誤: ' + (err instanceof Error ? err.message : '未知錯誤'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 組件載入時獲取 IP 信息
+  useEffect(() => {
+    fetchIPInfo();
+  }, []);
+
+  // 獲取推薦的 IP
+  const getRecommendedIP = () => {
+    if (!ipInfo) return 'unknown';
+    
+    // 優先使用智能偵測結果
+    if (ipInfo.smartDetection) {
+      return ipInfo.smartDetection.detectedIP;
+    }
+    
+    // 回退到舊的邏輯
+    const { headers, nextRequestIP } = ipInfo;
+    
+    // 優先順序檢查
+    if (headers['cf-connecting-ip']) return headers['cf-connecting-ip'];
+    if (headers['x-real-ip']) return headers['x-real-ip'];
+    if (headers['x-client-ip']) return headers['x-client-ip'];
+    if (headers['x-cluster-client-ip']) return headers['x-cluster-client-ip'];
+    if (headers['x-forwarded']) return headers['x-forwarded'];
+    if (headers['x-forwarded-for']) {
+      const ips = headers['x-forwarded-for']!.split(',').map(ip => ip.trim());
+      const publicIPs = ips.filter(ip => 
+        ip && 
+        ip !== '127.0.0.1' && 
+        ip !== '::1' && 
+        !ip.startsWith('192.168.') &&
+        !ip.startsWith('10.') &&
+        !ip.startsWith('172.')
+      );
+      if (publicIPs.length > 0) return publicIPs[0];
+      return ips[0];
+    }
+    if (nextRequestIP && nextRequestIP !== '::1' && nextRequestIP !== '127.0.0.1') {
+      return nextRequestIP;
+    }
+    
+    return 'unknown';
+  };
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">IP 調試工具</h1>
+          <p className="text-muted-foreground">
+            調試和檢查客戶端 IP 地址獲取
+          </p>
+        </div>
+        <Button 
+          onClick={fetchIPInfo} 
+          disabled={loading}
+          variant="outline"
+        >
+          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          重新整理
+        </Button>
+      </div>
+
+      {/* 智能偵測結果 */}
+      {ipInfo?.smartDetection && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Eye className="h-5 w-5" />
+              智能 IP 偵測結果
+            </CardTitle>
+            <CardDescription>
+              使用智能算法偵測的客戶端 IP 地址
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center gap-4">
+              <Badge 
+                variant={ipInfo.smartDetection.isPublicIP ? "default" : "secondary"} 
+                className="text-lg px-3 py-1"
+              >
+                {ipInfo.smartDetection.detectedIP}
+              </Badge>
+              <Badge 
+                variant={
+                  ipInfo.smartDetection.confidence === 'high' ? "default" :
+                  ipInfo.smartDetection.confidence === 'medium' ? "secondary" : "destructive"
+                }
+                className="text-lg px-3 py-1"
+              >
+                可信度: {ipInfo.smartDetection.confidence}
+              </Badge>
+              <Badge variant="outline" className="text-lg px-3 py-1">
+                來源: {ipInfo.smartDetection.source}
+              </Badge>
+            </div>
+            
+            {ipInfo.smartDetection.allCandidates.length > 1 && (
+              <div>
+                <p className="text-sm font-medium mb-2">所有候選 IP:</p>
+                <div className="flex flex-wrap gap-2">
+                  {ipInfo.smartDetection.allCandidates.map((ip, index) => (
+                    <Badge 
+                      key={index} 
+                      variant={ip === ipInfo.smartDetection.detectedIP ? "default" : "outline"}
+                      className="text-sm"
+                    >
+                      {ip}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 推薦的 IP (回退顯示) */}
+      {ipInfo && !ipInfo.smartDetection && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Eye className="h-5 w-5" />
+              推薦的 IP 地址
+            </CardTitle>
+            <CardDescription>
+              系統推薦使用的客戶端 IP 地址
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-4">
+              <Badge variant="default" className="text-lg px-3 py-1">
+                {getRecommendedIP()}
+              </Badge>
+              <Badge 
+                variant={getRecommendedIP() === 'unknown' ? "destructive" : "default"}
+                className="text-lg px-3 py-1"
+              >
+                狀態: {getRecommendedIP() === 'unknown' ? "無法識別" : "已識別"}
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 請求標頭 */}
+      {ipInfo && (
+        <Card>
+          <CardHeader>
+            <CardTitle>請求標頭</CardTitle>
+            <CardDescription>
+              從 HTTP 請求標頭中獲取的 IP 相關信息
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {Object.entries(ipInfo.headers).map(([key, value]) => (
+                <div key={key} className="flex items-center justify-between p-2 border rounded">
+                  <span className="font-medium text-sm">{key}:</span>
+                  <span className="text-sm text-muted-foreground">
+                    {value || 'null'}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* NextRequest IP */}
+      {ipInfo && (
+        <Card>
+          <CardHeader>
+            <CardTitle>NextRequest IP</CardTitle>
+            <CardDescription>
+              Next.js 框架提供的 IP 地址
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-4">
+              <Badge variant="outline" className="text-lg px-3 py-1">
+                {ipInfo.nextRequestIP || 'undefined'}
+              </Badge>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 環境信息 */}
+      {ipInfo && (
+        <Card>
+          <CardHeader>
+            <CardTitle>環境信息</CardTitle>
+            <CardDescription>
+              部署環境相關信息
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {Object.entries(ipInfo.env).map(([key, value]) => (
+                <div key={key} className="flex items-center justify-between p-2 border rounded">
+                  <span className="font-medium text-sm">{key}:</span>
+                  <span className="text-sm text-muted-foreground">
+                    {value || 'undefined'}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 所有標頭（用於調試） */}
+      {ipInfo && (
+        <Card>
+          <CardHeader>
+            <CardTitle>所有請求標頭</CardTitle>
+            <CardDescription>
+              完整的 HTTP 請求標頭信息
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 max-h-96 overflow-y-auto">
+              {Object.entries(ipInfo.allHeaders).map(([key, value]) => (
+                <div key={key} className="flex items-center justify-between p-2 border rounded text-xs">
+                  <span className="font-medium">{key}:</span>
+                  <span className="text-muted-foreground break-all">
+                    {value}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* 訊息顯示 */}
+      {message && (
+        <Alert>
+          <Database className="h-4 w-4" />
+          <AlertDescription>{message}</AlertDescription>
+        </Alert>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <Eye className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* 使用說明 */}
+      <Card>
+        <CardHeader>
+          <CardTitle>使用說明</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
+          <p>• <strong>推薦的 IP:</strong> 系統根據優先順序推薦使用的 IP 地址</p>
+          <p>• <strong>請求標頭:</strong> 檢查各種代理和負載均衡器設置的 IP 標頭</p>
+          <p>• <strong>NextRequest IP:</strong> Next.js 框架直接提供的 IP 地址</p>
+          <p>• <strong>環境信息:</strong> 部署環境相關的配置信息</p>
+          <p>• 如果推薦的 IP 是 "unknown"，請檢查代理設置或網路配置</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}