debug-time-machine-cli/bundled/inject-to-user-app.js

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

#!/usr/bin/env node

/**
 * Debug Time Machine Auto-Injector - 수정된 버전
 * 
 * ERR_CONTENT_DECODING_FAILED 에러를 해결하는 완전히 수정된 프록시 서버
 */

const http = require('http');
const fs = require('fs');
const path = require('path');
const { URL } = require('url');

const injectorPort = process.env.INJECTOR_PORT || 3001;
const userAppPort = process.env.USER_APP_PORT || 3000;

console.log('🚀 Debug Time Machine Injector Proxy 시작 (수정된 버전)');
console.log(`📍 프록시 포트: ${injectorPort}`);
console.log(`🎯 사용자 앱 포트: ${userAppPort}`);

// Auto-injector 스크립트 로드
const autoInjectorPath = path.join(__dirname, 'auto-injector.js');
let injectorScript = '';

if (fs.existsSync(autoInjectorPath)) {
  injectorScript = fs.readFileSync(autoInjectorPath, 'utf8');
  console.log('✅ Auto-Injector 스크립트 로드됨');
  console.log(`📄 스크립트 크기: ${injectorScript.length} bytes`);
} else {
  console.error('❌ Auto-Injector 스크립트를 찾을 수 없습니다:', autoInjectorPath);
  console.error('📁 현재 디렉토리:', __dirname);
  console.error('📂 디렉토리 내용:', fs.readdirSync(__dirname));
  process.exit(1);
}

// 프록시 서버 생성
const server = http.createServer((req, res) => {
  console.log(`📡 요청: ${req.method} ${req.url}`);
  
  // 사용자 앱으로 프록시 요청 생성
  const proxyOptions = {
    hostname: 'localhost',
    port: userAppPort,
    path: req.url,
    method: req.method,
    headers: {
      ...req.headers,
      host: `localhost:${userAppPort}`, // 올바른 host 헤더 설정
      // 압축 관련 헤더 제거 (문제 방지)
      'accept-encoding': 'identity', // gzip 대신 identity 사용
    }
  };
  
  // 압축 관련 헤더 완전 제거
  delete proxyOptions.headers['accept-encoding'];
  delete proxyOptions.headers['content-encoding'];
  
  const proxyReq = http.request(proxyOptions, (proxyRes) => {
    console.log(`📥 응답: ${proxyRes.statusCode} ${proxyRes.headers['content-type'] || 'unknown'} ${proxyRes.headers['content-encoding'] || 'no-encoding'}`);
    
    const contentType = proxyRes.headers['content-type'] || '';
    const isHtml = contentType.toLowerCase().includes('text/html');
    const contentEncoding = proxyRes.headers['content-encoding'];
    
    // 압축된 응답은 절대 처리하지 않고 바로 전달
    if (contentEncoding && contentEncoding !== 'identity') {
      console.log('📦 압축된 응답 감지 - 스트림으로 직접 전달');
      
      // 헤더 그대로 복사해서 전달
      res.writeHead(proxyRes.statusCode, proxyRes.headers);
      
      // 스트림으로 직접 파이프
      proxyRes.pipe(res);
      return;
    }
    
    // HTML이 아닌 경우에도 스트림으로 바로 전달
    if (!isHtml) {
      console.log('📄 비HTML 응답 - 스트림으로 직접 전달');
      
      // 헤더 그대로 복사해서 전달
      res.writeHead(proxyRes.statusCode, proxyRes.headers);
      
      // 스트림으로 직접 파이프
      proxyRes.pipe(res);
      return;
    }
    
    // HTML 응답만 버퍼링해서 처리
    let body = '';
    
    // 응답 데이터 수집
    proxyRes.on('data', (chunk) => {
      body += chunk.toString('utf8'); // 명시적으로 UTF-8 인코딩 사용
    });
    
    proxyRes.on('end', () => {
      try {
        // 응답 헤더 복사하되 문제가 될 수 있는 헤더들 완전 제거
        const responseHeaders = { ...proxyRes.headers };
        
        // 압축 및 인코딩 관련 헤더 완전 제거
        delete responseHeaders['content-length'];
        delete responseHeaders['content-encoding'];
        delete responseHeaders['transfer-encoding'];
        delete responseHeaders['content-range'];
        delete responseHeaders['accept-ranges'];
        
        // 캐시 방지 헤더 추가 (개발 환경용)
        responseHeaders['cache-control'] = 'no-cache, no-store, must-revalidate';
        responseHeaders['pragma'] = 'no-cache';
        responseHeaders['expires'] = '0';
        
        // Content-Type 명시적 설정
        responseHeaders['content-type'] = 'text/html; charset=utf-8';
        
        // HTML에 스크립트 주입 시도
        if (body && body.toLowerCase().includes('<head')) {
          console.log('🎯 HTML 응답 감지, Auto-Injector 주입 중...');
          
          const injectedBody = body.replace(
            /<head[^>]*>/i,
            `$&
<!-- Debug Time Machine Auto-Injector (Fixed Version) -->
<script>
  console.log('🚀 Debug Time Machine Auto-Injector 로딩 (사용자 앱 - 수정된 버전)...');
  try {
    ${injectorScript}
  } catch (error) {
    console.error('❌ Auto-Injector 초기화 실패:', error);
  }
</script>
<!-- End Debug Time Machine Auto-Injector -->`
          );
          
          if (injectedBody !== body && injectedBody.length > body.length) {
            console.log('✅ Auto-Injector 스크립트가 사용자 앱에 주입되었습니다');
            console.log(`📊 원본 크기: ${body.length} bytes → 주입 후: ${injectedBody.length} bytes`);
            
            // 수정된 content-length 설정
            const finalBody = injectedBody;
            responseHeaders['content-length'] = Buffer.byteLength(finalBody, 'utf8').toString();
            
            res.writeHead(proxyRes.statusCode, responseHeaders);
            res.end(finalBody);
          } else {
            console.log('⚠️ 스크립트 주입 실패 - 원본 응답 전달');
            console.log('📄 응답 시작 부분:', body.substring(0, 200));
            
            responseHeaders['content-length'] = Buffer.byteLength(body, 'utf8').toString();
            res.writeHead(proxyRes.statusCode, responseHeaders);
            res.end(body);
          }
        } else {
          // <head> 태그가 없는 HTML
          console.log('⚠️ <head> 태그가 없는 HTML 응답 - 원본 전달');
          responseHeaders['content-length'] = Buffer.byteLength(body, 'utf8').toString();
          res.writeHead(proxyRes.statusCode, responseHeaders);
          res.end(body);
        }
      } catch (error) {
        console.error('❌ 응답 처리 중 오류:', error);
        
        // 오류 발생 시 원본 응답 그대로 전달
        const safeHeaders = { ...proxyRes.headers };
        delete safeHeaders['content-encoding'];
        
        res.writeHead(proxyRes.statusCode, safeHeaders);
        res.end(body);
      }
    });
  });
  
  // 프록시 요청 에러 처리
  proxyReq.on('error', (error) => {
    console.error('❌ 프록시 요청 에러:', error.message);
    
    if (!res.headersSent) {
      res.writeHead(500, { 'Content-Type': 'text/html; charset=utf-8' });
      res.end(`
<!DOCTYPE html>
<html>
<head>
  <title>Debug Time Machine - 프록시 에러</title>
  <meta charset="utf-8">
  <style>
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
      text-align: center; 
      padding: 2rem; 
      background: #f5f5f5; 
      margin: 0;
    }
    .container { 
      max-width: 600px; 
      margin: 0 auto; 
      background: white; 
      padding: 2rem; 
      border-radius: 10px; 
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    }
    .error { 
      color: #e74c3c; 
      background: #fee; 
      padding: 1rem; 
      border-radius: 5px; 
      margin: 1rem 0; 
      border: 1px solid #fcc;
    }
    .info {
      color: #3498db;
      background: #eff8ff;
      padding: 1rem;
      border-radius: 5px;
      margin: 1rem 0;
      border: 1px solid #bde4ff;
    }
    code {
      background: #f8f9fa;
      padding: 2px 6px;
      border-radius: 3px;
      font-family: 'Monaco', 'Menlo', monospace;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🕰️ Debug Time Machine</h1>
    <div class="error">
      <h3>프록시 연결 에러</h3>
      <p>사용자 앱(포트 ${userAppPort})에 연결할 수 없습니다.</p>
      <p><strong>에러:</strong> ${error.message}</p>
    </div>
    <div class="info">
      <h3>🔧 해결 방법</h3>
      <p>1. 사용자 앱이 <code>http://localhost:${userAppPort}</code>에서 실행 중인지 확인하세요</p>
      <p>2. 터미널에서 다음 명령어로 확인: <code>curl http://localhost:${userAppPort}</code></p>
      <p>3. 사용자 앱을 다시 시작해보세요</p>
      <p>4. 포트 ${userAppPort}가 다른 앱에서 사용 중인지 확인하세요</p>
    </div>
  </div>
</body>
</html>
      `);
    }
  });
  
  // 요청 데이터 전달
  req.on('data', (chunk) => {
    proxyReq.write(chunk);
  });
  
  req.on('end', () => {
    proxyReq.end();
  });
  
  // 클라이언트 요청 에러 처리
  req.on('error', (error) => {
    console.error('❌ 클라이언트 요청 에러:', error.message);
    proxyReq.destroy();
  });
});

// 서버 시작
server.listen(injectorPort, () => {
  console.log('🎉 Debug Time Machine Injector Proxy 시작됨! (수정된 버전)');
  console.log(`📍 프록시 URL: http://localhost:${injectorPort}`);
  console.log(`🎯 사용자 앱 URL: http://localhost:${userAppPort}`);
  console.log('');
  console.log('💡 사용법:');
  console.log(`   브라우저에서 http://localhost:${injectorPort} 를 열면`);
  console.log(`   자동으로 Debug Time Machine이 주입된 사용자 앱을 볼 수 있습니다.`);
  console.log('');
  console.log('🔧 수정사항:');
  console.log('   - 압축 헤더 완전 제거');
  console.log('   - UTF-8 인코딩 명시');
  console.log('   - 에러 처리 강화');
  console.log('   - 헤더 충돌 방지');
  console.log('');
  
  // 연결 테스트
  setTimeout(() => {
    console.log('🔍 사용자 앱 연결 테스트...');
    const testReq = http.get(`http://localhost:${userAppPort}`, (testRes) => {
      console.log(`✅ 사용자 앱 연결 확인됨 (상태: ${testRes.statusCode})`);
    }).on('error', (error) => {
      console.log(`⚠️ 사용자 앱 연결 실패: ${error.message}`);
      console.log('   사용자 앱이 아직 시작되지 않았을 수 있습니다.');
    });
  }, 2000);
});

// 에러 처리
server.on('error', (error) => {
  if (error.code === 'EADDRINUSE') {
    console.error(`❌ 포트 ${injectorPort}가 이미 사용 중입니다.`);
    console.error('   다른 포트를 사용하거나 기존 프로세스를 종료하세요.');
  } else {
    console.error('❌ 서버 시작 에러:', error);
  }
  process.exit(1);
});

// 종료 처리
process.on('SIGINT', () => {
  console.log('\n🧹 Debug Time Machine Injector Proxy 종료 중...');
  server.close(() => {
    console.log('✅ 서버가 정상적으로 종료되었습니다.');
    process.exit(0);
  });
});

process.on('SIGTERM', () => {
  console.log('\n🧹 Debug Time Machine Injector Proxy 종료 중...');
  server.close(() => {
    console.log('✅ 서버가 정상적으로 종료되었습니다.');
    process.exit(0);
  });
});