Improve Supabase connection testing

Enhance the Supabase connection test to provide more detailed error information and handle potential CORS issues.
2025-03-15 12:32:40 +00:00
parent a55e780eec
commit 785e69a42c
4 changed files with 189 additions and 36 deletions
--- a/src/components/supabase/SupabaseConnectionTest.tsx
+++ b/src/components/supabase/SupabaseConnectionTest.tsx
@@ -1,15 +1,17 @@

 import React, { useState } from 'react';
 import { Button } from "@/components/ui/button";
-import { RefreshCw, Info } from "lucide-react";
+import { RefreshCw, Info, HelpCircle, AlertCircle } from "lucide-react";
 import { toast } from "@/hooks/useToast.wrapper";
 import { testSupabaseConnection } from '@/lib/supabase';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

 interface TestResult {
  url: string;
  proxyUrl: string;
  usingProxy: boolean;
+  proxyType?: string;
  client: boolean;
  restApi: boolean;
  auth: boolean;
@@ -53,6 +55,13 @@ const SupabaseConnectionTest: React.FC = () => {
    }
  };
  
+  const hasProxyRecommendation = (errors: string[]) => {
+    return errors.some(err => 
+      err.includes('프록시 사용 시 정상 작동합니다') || 
+      err.includes('프록시를 선택해보세요')
+    );
+  };
+  
  return (
    <div>
      <h2 className="text-lg font-semibold mb-4">연결 테스트</h2>
@@ -99,18 +108,49 @@ const SupabaseConnectionTest: React.FC = () => {
          
          {testResults.usingProxy && (
            <div className="bg-blue-50 border border-blue-200 rounded p-2 mt-2">
-              <p className="text-xs">CORS 프록시 사용 중: {testResults.proxyUrl}</p>
+              <p className="text-xs">CORS 프록시 사용 중: {testResults.proxyType || 'corsproxy.io'}</p>
+              <p className="text-xs break-all mt-1">{testResults.proxyUrl}</p>
            </div>
          )}
          
+          {testResults.errors.length > 0 && hasProxyRecommendation(testResults.errors) && (
+            <Alert className="bg-amber-50 border-amber-200 mt-3">
+              <AlertCircle className="h-4 w-4 text-amber-600" />
+              <AlertTitle className="text-amber-800 text-xs font-medium">프록시 변경 권장</AlertTitle>
+              <AlertDescription className="text-amber-700 text-xs">
+                {testResults.errors.find(err => 
+                  err.includes('프록시 사용 시 정상 작동합니다') || 
+                  err.includes('프록시를 선택해보세요')
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+          
          {testResults.errors.length > 0 && (
            <div className="bg-red-50 border border-red-200 rounded p-2 mt-2">
              {testResults.errors.map((error: string, index: number) => (
-                <p key={index} className="text-xs text-red-600">{error}</p>
+                <p key={index} className="text-xs text-red-600 mb-1">{error}</p>
              ))}
            </div>
          )}
          
+          {/* 오류 해결 팁 */}
+          {!testResults.restApi && testResults.auth && (
+            <div className="bg-yellow-50 border border-yellow-200 rounded p-2 mt-2">
+              <div className="flex items-start gap-1">
+                <HelpCircle className="h-4 w-4 text-yellow-600 mt-0.5 flex-shrink-0" />
+                <div>
+                  <p className="text-xs text-yellow-800 font-medium">인증은 성공했지만 API/DB 연결에 실패했습니다</p>
+                  <ul className="list-disc text-xs text-yellow-700 pl-4 mt-1">
+                    <li>다른 CORS 프록시 옵션을 시도해보세요</li>
+                    <li>Supabase 서버의 CORS 설정을 확인하세요</li>
+                    <li>브라우저 개발자 도구에서 네트워크 탭을 확인하세요</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          )}
+          
          {/* 디버그 정보 섹션 추가 */}
          {testResults.debugInfo && (
            <Collapsible
@@ -139,6 +179,18 @@ const SupabaseConnectionTest: React.FC = () => {
                    </div>
                  </div>
                  
+                  {testResults.usingProxy && (
+                    <div>
+                      <span className="font-medium">프록시 URL:</span>
+                      <div className="mt-1 bg-gray-100 p-1 rounded break-all">
+                        {testResults.proxyUrl}
+                      </div>
+                      <div className="mt-1">
+                        프록시 유형: {testResults.proxyType || 'corsproxy.io'}
+                      </div>
+                    </div>
+                  )}
+                  
                  <div>
                    <span className="font-medium">클라이언트 초기화:</span>
                    <div className="mt-1 text-green-600">
@@ -146,6 +198,15 @@ const SupabaseConnectionTest: React.FC = () => {
                    </div>
                  </div>
                  
+                  {testResults.debugInfo.lastErrorDetails && (
+                    <div>
+                      <span className="font-medium">마지막 오류 상세:</span>
+                      <div className="mt-1 bg-red-50 p-1 rounded break-all text-red-600">
+                        {testResults.debugInfo.lastErrorDetails}
+                      </div>
+                    </div>
+                  )}
+                  
                  <div>
                    <span className="font-medium">브라우저 정보:</span>
                    <div className="mt-1 bg-gray-100 p-1 rounded break-all">
--- a/src/components/supabase/SupabaseSettingsForm.tsx
+++ b/src/components/supabase/SupabaseSettingsForm.tsx
@@ -5,8 +5,13 @@ import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
 import { DatabaseIcon, Save, RefreshCw, Shield, AlertTriangle, Check } from "lucide-react";
 import { toast } from "@/hooks/useToast.wrapper";
-import { configureSupabase, isCorsProxyEnabled } from "@/lib/supabase/config";
+import { 
+  configureSupabase, 
+  isCorsProxyEnabled, 
+  getProxyType 
+} from "@/lib/supabase/config";
 import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

 interface SupabaseSettingsFormProps {
  onSaved: () => void;
@@ -16,6 +21,7 @@ const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved })
  const [supabaseUrl, setSupabaseUrl] = useState('');
  const [supabaseKey, setSupabaseKey] = useState('');
  const [useProxy, setUseProxy] = useState(false);
+  const [proxyType, setProxyType] = useState('corsproxy.io');
  const [isSaving, setIsSaving] = useState(false);
  
  // 저장된 설정 불러오기
@@ -23,10 +29,12 @@ const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved })
    const savedUrl = localStorage.getItem('supabase_url');
    const savedKey = localStorage.getItem('supabase_key');
    const proxyEnabled = isCorsProxyEnabled();
+    const savedProxyType = getProxyType();
    
    if (savedUrl) setSupabaseUrl(savedUrl);
    if (savedKey) setSupabaseKey(savedKey);
    setUseProxy(proxyEnabled);
+    setProxyType(savedProxyType);
  }, []);
  
  const validateUrl = (url: string): boolean => {
@@ -57,7 +65,7 @@ const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved })
    
    try {
      // Supabase 설정 적용
-      configureSupabase(supabaseUrl, supabaseKey, useProxy);
+      configureSupabase(supabaseUrl, supabaseKey, useProxy, proxyType);
      
      toast({
        title: "설정 저장 완료",
@@ -153,6 +161,27 @@ const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved })
        />
      </div>
      
+      {/* 프록시 서비스 선택 옵션 추가 */}
+      {useProxy && (
+        <div className="space-y-2">
+          <Label htmlFor="proxy-type" className="text-base">프록시 서비스 선택</Label>
+          <Select value={proxyType} onValueChange={setProxyType}>
+            <SelectTrigger id="proxy-type" className="w-full">
+              <SelectValue placeholder="프록시 서비스 선택" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="corsproxy.io">corsproxy.io (기본)</SelectItem>
+              <SelectItem value="thingproxy">thingproxy.freeboard.io</SelectItem>
+              <SelectItem value="allorigins">allorigins.win</SelectItem>
+              <SelectItem value="cors-anywhere">cors-anywhere.herokuapp.com</SelectItem>
+            </SelectContent>
+          </Select>
+          <p className="text-xs text-gray-500 mt-1">
+            특정 프록시 서비스가 작동하지 않으면 다른 서비스를 시도해보세요.
+          </p>
+        </div>
+      )}
+      
      <Button
        onClick={handleSave}
        disabled={isSaving}
--- a/src/lib/supabase/config.ts
+++ b/src/lib/supabase/config.ts
@@ -6,15 +6,36 @@ export const getSupabaseUrl = () => {
  if (storedUrl) {
    // CORS 프록시 설정 확인
    const useProxy = localStorage.getItem('use_cors_proxy') === 'true';
+    const proxyType = localStorage.getItem('proxy_type') || 'corsproxy.io';
+    
    if (useProxy) {
-      // CORS 프록시 URL로 변환 (URL 구조 개선)
-      const cleanUrl = storedUrl.trim();
      // URL에 이미 프로토콜이 포함되어 있는지 확인
+      const cleanUrl = storedUrl.trim();
      const hasProtocol = cleanUrl.startsWith('http://') || cleanUrl.startsWith('https://');
      const urlForProxy = hasProtocol ? cleanUrl : `http://${cleanUrl}`;
      
-      // 프록시 URL 생성 시 더 정확한 인코딩
-      const proxyUrl = `https://corsproxy.io/?${encodeURIComponent(urlForProxy)}`;
+      // 선택된 프록시 타입에 따라 URL 생성
+      let proxyUrl = '';
+      
+      switch (proxyType) {
+        case 'corsproxy.io':
+          // 주의: 쿼리 파라미터가 포함된 URL에서 발생하는 문제를 해결하기 위해
+          // 전체 URL을 인코딩하고 끝에 슬래시 추가
+          proxyUrl = `https://corsproxy.io/?${encodeURIComponent(urlForProxy)}`;
+          break;
+        case 'thingproxy':
+          proxyUrl = `https://thingproxy.freeboard.io/fetch/${urlForProxy}`;
+          break;
+        case 'allorigins':
+          proxyUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(urlForProxy)}`;
+          break;
+        case 'cors-anywhere':
+          proxyUrl = `https://cors-anywhere.herokuapp.com/${urlForProxy}`;
+          break;
+        default:
+          proxyUrl = `https://corsproxy.io/?${encodeURIComponent(urlForProxy)}`;
+      }
+      
      console.log('CORS 프록시 URL 생성:', proxyUrl);
      return proxyUrl;
    }
@@ -40,13 +61,23 @@ export const useCorsProxy = (enabled: boolean) => {
  localStorage.setItem('use_cors_proxy', enabled.toString());
 };

+// CORS 프록시 유형 설정
+export const setProxyType = (proxyType: string) => {
+  localStorage.setItem('proxy_type', proxyType);
+};
+
+// 현재 사용 중인 프록시 유형 가져오기
+export const getProxyType = () => {
+  return localStorage.getItem('proxy_type') || 'corsproxy.io';
+};
+
 // CORS 프록시 사용 여부 확인
 export const isCorsProxyEnabled = () => {
  return localStorage.getItem('use_cors_proxy') === 'true';
 };

 // 온프레미스 연결을 위한 설정 도우미 함수
-export const configureSupabase = (url: string, key: string, useProxy: boolean = false) => {
+export const configureSupabase = (url: string, key: string, useProxy: boolean = false, proxyType: string = 'corsproxy.io') => {
  // URL 정리 (앞뒤 공백 제거)
  const cleanUrl = url.trim();
  
@@ -59,6 +90,7 @@ export const configureSupabase = (url: string, key: string, useProxy: boolean =
  localStorage.setItem('supabase_url', normalizedUrl);
  localStorage.setItem('supabase_key', key);
  localStorage.setItem('use_cors_proxy', useProxy.toString());
+  localStorage.setItem('proxy_type', proxyType);
  
  // 페이지 새로고침 - 새로운 설정으로 Supabase 클라이언트 초기화
  window.location.reload();
--- a/src/lib/supabase/tests.ts
+++ b/src/lib/supabase/tests.ts
@@ -1,6 +1,6 @@

 import { supabase } from './client';
-import { getSupabaseUrl, getSupabaseKey, getOriginalSupabaseUrl, isCorsProxyEnabled } from './config';
+import { getSupabaseUrl, getSupabaseKey, getOriginalSupabaseUrl, isCorsProxyEnabled, getProxyType } from './config';

 // 테스트용 직접 로그인 함수 (디버깅 전용)
 export const testSupabaseLogin = async (email: string, password: string) => {
@@ -30,12 +30,14 @@ export const testSupabaseConnection = async () => {
  const originalUrl = getOriginalSupabaseUrl();
  const proxyUrl = getSupabaseUrl();
  const usingProxy = isCorsProxyEnabled();
+  const proxyType = getProxyType();
  const supabaseKey = getSupabaseKey();
  
  const results = {
    url: originalUrl, // 원본 URL
    proxyUrl: proxyUrl, // 프록시 적용된 URL
    usingProxy: usingProxy, // 프록시 사용 여부
+    proxyType: proxyType, // 프록시 유형
    client: !!supabase,
    restApi: false,
    auth: false,
@@ -45,17 +47,20 @@ export const testSupabaseConnection = async () => {
      originalUrl,
      proxyUrl,
      usingProxy,
+      proxyType,
      keyLength: supabaseKey.length,
      browserInfo: navigator.userAgent,
      timestamp: new Date().toISOString(),
-      backupProxySuccess: false  // 타입 오류 수정: backupProxySuccess 속성 추가
+      backupProxySuccess: false, // 백업 프록시 성공 여부
+      lastErrorDetails: '' // 마지막 오류 상세 정보
    }
  };
  
  console.log('연결 테스트 시작 - 설정 정보:', {
    originalUrl,
    proxyUrl,
-    usingProxy
+    usingProxy,
+    proxyType
  });
  
  try {
@@ -90,40 +95,58 @@ export const testSupabaseConnection = async () => {
        } else {
          errorBody = await response.text();
          console.warn(`REST API 테스트 실패 (시도 1) - 상태: ${response.status}, 오류: ${errorBody}`);
+          results.debugInfo.lastErrorDetails = `상태 코드: ${response.status}, 응답: ${errorBody}`;
          
-          // 2번째 시도: corsproxy.io URL 직접 구성
+          // 2번째 시도: 다른 프록시 서비스 URL 직접 구성
          if (usingProxy) {
-            const directProxyUrl = `https://corsproxy.io/?${encodeURIComponent(`${originalUrl}/rest/v1/`)}`;
-            console.log('REST API 테스트 URL (시도 2 - 직접 프록시):', directProxyUrl);
+            // 서로 다른 프록시 서비스 시도
+            const proxyOptions = [
+              { name: 'thingproxy', url: `https://thingproxy.freeboard.io/fetch/${originalUrl}/rest/v1/` },
+              { name: 'allorigins', url: `https://api.allorigins.win/raw?url=${encodeURIComponent(`${originalUrl}/rest/v1/`)}` },
+              { name: 'cors-anywhere', url: `https://cors-anywhere.herokuapp.com/${originalUrl}/rest/v1/` }
+            ];
            
-            try {
-              response = await fetch(directProxyUrl, {
-                method: 'GET',
-                headers: {
-                  'Content-Type': 'application/json',
-                  'apikey': supabaseKey,
-                },
-              });
+            // 현재 사용 중인 프록시와 다른 프록시만 시도
+            const alternateProxies = proxyOptions.filter(p => p.name !== proxyType);
+            
+            for (const proxy of alternateProxies) {
+              console.log(`REST API 테스트 URL (시도 2 - ${proxy.name}):`, proxy.url);
              
-              if (response.ok) {
-                results.restApi = true;
-                console.log('REST API 테스트 성공 (시도 2)');
-              } else {
-                const error2 = await response.text();
-                console.warn(`REST API 테스트 실패 (시도 2) - 상태: ${response.status}, 오류: ${error2}`);
-                results.errors.push(`REST API 오류(${response.status}): ${error2 || errorBody || '응답 없음'}`);
+              try {
+                response = await fetch(proxy.url, {
+                  method: 'GET',
+                  headers: {
+                    'Content-Type': 'application/json',
+                    'apikey': supabaseKey,
+                  },
+                });
+                
+                if (response.ok) {
+                  results.restApi = true;
+                  results.debugInfo.backupProxySuccess = true;
+                  console.log(`REST API 테스트 성공 (시도 2 - ${proxy.name})`);
+                  results.errors.push(`REST API 성공: ${proxy.name} 프록시 사용 시 정상 작동합니다. 설정에서 이 프록시를 선택해보세요.`);
+                  break;
+                } else {
+                  const error2 = await response.text();
+                  console.warn(`REST API 테스트 실패 (시도 2 - ${proxy.name}) - 상태: ${response.status}, 오류: ${error2}`);
+                }
+              } catch (innerErr: any) {
+                console.error(`REST API 테스트 시도 2 (${proxy.name}) 예외:`, innerErr);
              }
-            } catch (innerErr: any) {
-              console.error('REST API 테스트 시도 2 예외:', innerErr);
-              results.errors.push(`REST API 예외 (시도 2): ${innerErr.message || '알 수 없는 오류'}`);
+            }
+            
+            if (!results.restApi) {
+              results.errors.push(`REST API 오류(${response.status}): ${errorBody || '응답 없음'} - 다른 프록시 옵션도 모두 실패했습니다.`);
            }
          } else {
-            results.errors.push(`REST API 오류(${response.status}): ${errorBody || '응답 없음'}`);
+            results.errors.push(`REST API 오류(${response.status}): ${errorBody || '응답 없음'} - CORS 프록시 활성화를 시도해보세요.`);
          }
        }
      } catch (outerErr: any) {
        console.error('REST API 테스트 시도 1 예외:', outerErr);
        results.errors.push(`REST API 예외 (시도 1): ${outerErr.message || '알 수 없는 오류'}`);
+        results.debugInfo.lastErrorDetails = outerErr.message || '알 수 없는 오류';
        
        // 백업 시도
        if (usingProxy) {
@@ -144,6 +167,7 @@ export const testSupabaseConnection = async () => {
              results.restApi = true;
              console.log('REST API 테스트 성공 (백업 프록시)');
              results.debugInfo.backupProxySuccess = true;
+              results.errors.push('REST API 성공: allorigins 프록시 사용 시 정상 작동합니다. 설정에서 이 프록시를 선택해보세요.');
            } else {
              const backupError = await response.text();
              console.warn(`REST API 테스트 실패 (백업 프록시) - 상태: ${response.status}, 오류: ${backupError}`);
@@ -184,7 +208,14 @@ export const testSupabaseConnection = async () => {
        
      results.database = !error;
      if (error) {
-        results.errors.push(`데이터베이스 오류: ${error.message}`);
+        let errorMsg = error.message;
+        
+        // 익명 인증 오류 처리
+        if (errorMsg.includes('Auth session missing') || errorMsg.includes('JWT')) {
+          errorMsg += ' - 로그인이 필요하거나 권한 설정을 확인해주세요.';
+        }
+        
+        results.errors.push(`데이터베이스 오류: ${errorMsg}`);
        console.error('데이터베이스 테스트 실패:', error);
      } else {
        console.log('데이터베이스 테스트 성공', data);