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/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);