debug-time-machine-cli/bundled/auto-injector.js

🚀 Debug Time Machine CLI - 완전 자동화된 React 디버깅 도구

/**
 * Debug Time Machine Auto Injector
 * 
 * 사용자 앱에 자동으로 주입되어 Hook 없이도 이벤트 캡처를 활성화합니다.
 * 이 스크립트는 페이지 로드 시 자동으로 실행되어 Debug Time Machine과 연결합니다.
 */

(function() {
  'use strict';
  
  console.log('🚀 Debug Time Machine Auto Injector 시작');
  
  // 이미 실행되었는지 확인
  if (window.debugTimeMachineInjected) {
    console.log('⚠️ Debug Time Machine이 이미 주입되었습니다.');
    return;
  }
  
  window.debugTimeMachineInjected = true;
  
  // 설정
  const CONFIG = {
    websocketUrl: 'ws://localhost:4000/ws',
    debugMode: true,
    captureUserActions: true,
    captureErrors: true,
    captureStateChanges: true,
    maxReconnectAttempts: 5,
    reconnectInterval: 3000,
  };
  
  // 상태
  let ws = null;
  let isConnected = false;
  let clientId = null;
  let reconnectAttempts = 0;
  let actionCount = 0;
  let lastSecond = 0;
  
  // 유틸리티 함수
  function log(message, type = 'info', data) {
    if (!CONFIG.debugMode) return;
    
    const styles = {
      info: 'color: #2196F3; font-weight: bold;',
      success: 'color: #4CAF50; font-weight: bold;',
      warning: 'color: #FF9800; font-weight: bold;',
      error: 'color: #F44336; font-weight: bold;',
    };
    
    const timestamp = new Date().toISOString();
    const style = styles[type] || styles.info;
    
    if (data) {
      console.groupCollapsed(`%c[Debug Auto-Injector ${timestamp}] ${message}`, style);
      console.log('Data:', data);
      console.groupEnd();
    } else {
      console.log(`%c[Debug Auto-Injector ${timestamp}] ${message}`, style);
    }
  }
  
  function generateId() {
    return `${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
  }
  
  function sendMessage(type, data) {
    if (!ws || ws.readyState !== WebSocket.OPEN) {
      log(`❌ Cannot send message: WebSocket not ready (state: ${ws?.readyState})`, 'warning');
      return false;
    }
    
    const message = {
      type: type,
      payload: data,
      timestamp: Date.now(),
      clientId: clientId || undefined,
    };
    
    try {
      ws.send(JSON.stringify(message));
      log(`✅ Message sent: ${type}`, 'success', { type, dataKeys: Object.keys(data || {}) });
      return true;
    } catch (error) {
      log(`❌ Failed to send message: ${type}`, 'error', error);
      return false;
    }
  }
  
  // WebSocket 연결
  function connect() {
    if (ws && (ws.readyState === WebSocket.CONNECTING || ws.readyState === WebSocket.OPEN)) {
      log('이미 연결 중이거나 연결되어 있습니다.', 'warning');
      return;
    }
    
    try {
      log('Debug Time Machine 서버에 연결 중...', 'info');
      ws = new WebSocket(CONFIG.websocketUrl);
      
      ws.onopen = () => {
        isConnected = true;
        reconnectAttempts = 0;
        log('✅ Debug Time Machine 서버에 연결됨!', 'success');
        
        // 연결 메시지 전송
        setTimeout(() => {
          sendMessage('CONNECTION', {
            type: 'client_ready',
            url: window.location.href,
            userAgent: navigator.userAgent,
            timestamp: Date.now(),
            injected: true, // 자동 주입되었음을 표시
          });
        }, 300);
      };
      
      ws.onmessage = (event) => {
        try {
          const message = JSON.parse(event.data);
          
          switch (message.type) {
            case 'CONNECTION':
              if (message.payload?.clientId) {
                clientId = message.payload.clientId;
                log(`클라이언트 ID 할당됨: ${clientId}`, 'success');
              }
              break;
            case 'PING':
              sendMessage('PONG', {});
              break;
            case 'PONG':
              log('서버로부터 PONG 수신', 'info');
              break;
            default:
              log(`알 수 없는 메시지: ${message.type}`, 'warning');
          }
        } catch (error) {
          log('메시지 파싱 실패', 'error', error);
        }
      };
      
      ws.onclose = (event) => {
        isConnected = false;
        log(`연결 종료 (코드: ${event.code})`, 'warning');
        
        // 자동 재연결
        if (reconnectAttempts < CONFIG.maxReconnectAttempts) {
          reconnectAttempts++;
          log(`재연결 시도 중... (${reconnectAttempts}/${CONFIG.maxReconnectAttempts})`, 'info');
          setTimeout(connect, CONFIG.reconnectInterval);
        }
      };
      
      ws.onerror = () => {
        log('WebSocket 에러 발생', 'error');
      };
      
    } catch (error) {
      log('WebSocket 연결 생성 실패', 'error', error);
    }
  }
  
  // 사용자 액션 캡처
  function setupUserActionCapture() {
    log('사용자 액션 캡처 설정 중...', 'info');
    
    const excludeSelectors = [
      '.debug-time-machine',
      '[data-debug-ignore]',
      'script',
      'style',
      'meta',
      'link',
    ];
    
    function shouldCaptureEvent(target) {
      return !excludeSelectors.some(selector => {
        try {
          return target.matches && target.matches(selector);
        } catch {
          return false;
        }
      });
    }
    
    function checkRateLimit() {
      const currentSecond = Math.floor(Date.now() / 1000);
      if (currentSecond !== lastSecond) {
        lastSecond = currentSecond;
        actionCount = 0;
      }
      
      if (actionCount >= 10) { // 초당 최대 10개 액션
        return false;
      }
      
      actionCount++;
      return true;
    }
    
    function getElementSelector(element) {
      if (element.id) return `#${element.id}`;
      
      const path = [];
      let current = element;
      
      while (current && current.nodeType === Node.ELEMENT_NODE && path.length < 4) {
        let selector = current.tagName.toLowerCase();
        if (current.className) {
          const classes = current.className.split(' ').filter(c => c.trim());
          if (classes.length > 0) {
            selector += '.' + classes.slice(0, 2).join('.');
          }
        }
        path.unshift(selector);
        current = current.parentElement;
      }
      
      return path.join(' > ');
    }
    
    function captureUserAction(event) {
      const target = event.target;
      
      if (!target || !shouldCaptureEvent(target) || !checkRateLimit()) {
        return;
      }
      
      log(`🖱️ 사용자 액션 캡처: ${event.type} on ${target.tagName}`, 'info');
      
      const actionData = {
        actionType: event.type,
        element: target.tagName.toLowerCase(),
        coordinates: {
          x: event.clientX || 0,
          y: event.clientY || 0,
        },
        target: {
          id: target.id || '',
          className: target.className || '',
          tagName: target.tagName,
          textContent: (target.textContent || '').substring(0, 100),
        },
        timestamp: Date.now(),
        url: window.location.href,
        selector: getElementSelector(target),
        injected: true,
      };
      
      sendMessage('USER_ACTION', actionData);
    }
    
    // 이벤트 리스너 등록
    const eventTypes = ['click', 'submit', 'change', 'input', 'focus', 'blur'];
    
    eventTypes.forEach(eventType => {
      document.addEventListener(eventType, captureUserAction, true);
      log(`  ✅ ${eventType} 이벤트 리스너 등록`, 'info');
    });
    
    log('✅ 사용자 액션 캡처 설정 완료', 'success');
  }
  
  // 에러 캡처
  function setupErrorCapture() {
    log('에러 캡처 설정 중...', 'info');
    
    // Global error handler
    const originalOnError = window.onerror;
    window.onerror = function(message, source, lineno, colno, error) {
      log(`🔴 에러 캡처: ${message}`, 'error');
      
      sendMessage('ERROR', {
        message: String(message),
        stack: error?.stack || 'No stack available',
        timestamp: Date.now(),
        url: window.location.href,
        userAgent: navigator.userAgent,
        source: source,
        lineNumber: lineno,
        columnNumber: colno,
        injected: true,
      });
      
      // 원래 핸들러 호출
      if (originalOnError) {
        return originalOnError.apply(this, arguments);
      }
      return false;
    };
    
    // Unhandled promise rejection
    const originalOnUnhandledRejection = window.onunhandledrejection;
    window.onunhandledrejection = function(event) {
      const reason = event.reason;
      const message = reason instanceof Error ? reason.message : String(reason);
      
      log(`🔴 Promise rejection 캡처: ${message}`, 'error');
      
      sendMessage('ERROR', {
        message: `Unhandled Promise Rejection: ${message}`,
        stack: reason instanceof Error ? reason.stack : undefined,
        timestamp: Date.now(),
        url: window.location.href,
        userAgent: navigator.userAgent,
        source: 'promise',
        injected: true,
      });
      
      // 원래 핸들러 호출
      if (originalOnUnhandledRejection) {
        return originalOnUnhandledRejection.apply(this, arguments);
      }
    };
    
    log('✅ 에러 캡처 설정 완료', 'success');
  }
  
  // API 호출 캡처
  function setupApiCapture() {
    log('API 호출 캡처 설정 중...', 'info');
    
    // Fetch API 인터셉트
    const originalFetch = window.fetch;
    window.fetch = async function(...args) {
      const [url, options] = args;
      const urlString = typeof url === 'string' ? url : url.toString();
      
      // Debug Time Machine 자체 요청은 제외
      if (urlString.includes('localhost:4000') || urlString.includes('localhost:8080')) {
        return originalFetch.apply(this, args);
      }
      
      const startTime = Date.now();
      const requestId = generateId();
      
      log(`🌐 API 호출: ${urlString}`, 'info');
      
      try {
        const response = await originalFetch.apply(this, args);
        const duration = Date.now() - startTime;
        
        sendMessage('API_CALL', {
          id: requestId,
          url: urlString,
          method: options?.method || 'GET',
          status: response.status,
          statusText: response.statusText,
          duration: duration,
          success: true,
          timestamp: Date.now(),
          injected: true,
        });
        
        log(`✅ API 호출 성공: ${urlString} (${response.status}, ${duration}ms)`, 'success');
        return response;
      } catch (error) {
        const duration = Date.now() - startTime;
        
        sendMessage('API_CALL', {
          id: requestId,
          url: urlString,
          method: options?.method || 'GET',
          error: error.message,
          duration: duration,
          success: false,
          timestamp: Date.now(),
          injected: true,
        });
        
        log(`❌ API 호출 실패: ${urlString} (${error.message}, ${duration}ms)`, 'error');
        throw error;
      }
    };
    
    log('✅ API 호출 캡처 설정 완료', 'success');
  }
  
  // React 상태 변경 감지 (실험적)
  function setupReactStateDetection() {
    log('React 상태 변경 감지 설정 중...', 'info');
    
    // React DevTools 이벤트 감지 시도
    if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
      const reactDevTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
      
      // React Fiber 업데이트 감지
      const originalOnCommit = reactDevTools.onCommitFiberRoot;
      reactDevTools.onCommitFiberRoot = function(id, root, priorityLevel) {
        log('🔄 React 컴포넌트 업데이트 감지', 'info');
        
        sendMessage('STATE_CHANGE', {
          type: 'react_commit',
          timestamp: Date.now(),
          url: window.location.href,
          injected: true,
        });
        
        if (originalOnCommit) {
          return originalOnCommit.apply(this, arguments);
        }
      };
      
      log('✅ React DevTools 연동 완료', 'success');
    } else {
      log('⚠️ React DevTools를 찾을 수 없습니다', 'warning');
    }
  }
  
  // 초기화
  function init() {
    log('🚀 Debug Time Machine Auto Injector 초기화 시작', 'info');
    
    // DOM이 준비될 때까지 대기
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', init);
      return;
    }
    
    // 서버 연결 확인 후 초기화 (타임아웃 추가)
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 3000); // 3초 타임아웃
    
    fetch('http://localhost:4000/health', {
      signal: controller.signal
    })
      .then(response => {
        clearTimeout(timeoutId);
        return response.json();
      })
      .then(data => {
        log(`✅ Debug Time Machine 서버 발견! (클라이언트: ${data.clients || 0}개)`, 'success');
        
        // 모든 기능 활성화
        connect();
        setupUserActionCapture();
        setupErrorCapture();
        setupApiCapture();
        setupReactStateDetection();
        
        // 전역 참조 설정
        window.debugTimeMachine = {
          isConnected: () => isConnected,
          getClientId: () => clientId,
          sendMessage: sendMessage,
          captureError: (error, context) => {
            log(`🔴 수동 에러 캡처: ${error.message}`, 'error');
            sendMessage('ERROR', {
              message: error.message || String(error),
              stack: error.stack || 'No stack available',
              timestamp: Date.now(),
              url: window.location.href,
              userAgent: navigator.userAgent,
              context: context,
              manual: true,
              injected: true,
            });
          },
          // 수동 테스트 함수들
          testUserAction: () => {
            log('🧪 수동 사용자 액션 테스트', 'info');
            sendMessage('USER_ACTION', {
              actionType: 'test',
              element: 'button',
              timestamp: Date.now(),
              url: window.location.href,
              target: { tagName: 'BUTTON', textContent: 'Test Button' },
              manual: true,
              injected: true,
            });
          },
          testStateChange: () => {
            log('🧪 수동 상태 변경 테스트', 'info');
            sendMessage('STATE_CHANGE', {
              componentName: 'TestComponent',
              prevState: { test: 'old' },
              newState: { test: 'new' },
              timestamp: Date.now(),
              url: window.location.href,
              manual: true,
              injected: true,
            });
          }
        };
        
        log('🎉 Debug Time Machine Auto Injector 초기화 완료!', 'success');
        
        // 테스트 메시지 전송
        setTimeout(() => {
          if (isConnected) {
            sendMessage('TEST', {
              message: 'Auto Injector가 성공적으로 초기화되었습니다!',
              timestamp: Date.now(),
              injected: true,
              userAgent: navigator.userAgent,
              url: window.location.href,
            });
            log('📤 초기화 완료 메시지 전송됨', 'success');
          } else {
            log('⚠️ WebSocket 연결이 아직 준비되지 않았습니다', 'warning');
          }
        }, 2000);
        
      })
      .catch((error) => {
        clearTimeout(timeoutId);
        if (error.name === 'AbortError') {
          log('Debug Time Machine 서버 연결 타임아웃. 일반 모드로 실행됩니다.', 'info');
        } else {
          log('Debug Time Machine 서버를 찾을 수 없습니다. 일반 모드로 실행됩니다.', 'info');
        }
        log('💡 디버그 모드를 원한다면: debug-time-machine-cli start-with-app "npm start"', 'info');
      });
  }
  
  // 즉시 초기화 시작
  init();
  
})();