안녕! 오늘은 JavaScript 개발자라면 반드시 알아야 할 에러 핸들링과 예외 처리에 대해 깊이 있게 파헤쳐볼 거야. 😊

솔직히 말해서, 코드를 짜다 보면 에러는 피할 수 없는 친구야. 아니, 어쩌면 가장 자주 만나는 동료일지도 몰라! 🤝 하지만 이 에러들을 어떻게 다루느냐에 따라 초보 개발자와 시니어 개발자가 갈리는 거지.

이 글에서는 단순히 try-catch만 쓰는 수준을 넘어서, 실전에서 바로 써먹을 수 있는 프로덕션 레벨의 에러 핸들링 전략을 함께 알아볼 거야. 재능넷에서 프로그래밍 재능을 공유하거나 배우는 분들에게도 정말 유용한 내용이 될 거라 확신해! 💡

🎯 왜 에러 핸들링이 중요할까?

본격적으로 들어가기 전에, 왜 에러 핸들링이 그렇게 중요한지부터 짚고 넘어가자. 🤔

상상해봐. 너가 만든 웹 애플리케이션에서 사용자가 결제 버튼을 눌렀는데, 갑자기 화면이 하얗게 변하면서 아무것도 안 된다면? 사용자는 당황하고, 너는 밤새 버그를 찾아 헤매게 될 거야. 😱

좋은 에러 핸들링은 다음과 같은 것들을 가능하게 해줘:

📚 JavaScript 에러의 종류 이해하기

에러를 잘 다루려면 먼저 어떤 종류의 에러들이 있는지 알아야 해. JavaScript에는 크게 7가지 기본 에러 타입이 있어. 하나씩 살펴보자! 🔍

각 에러 타입을 실제 코드로 확인해보자:

// SyntaxError - 문법이 틀렸을 때
// const x = ; // 이렇게 쓰면 SyntaxError!

// ReferenceError - 선언되지 않은 변수 사용
try {
  console.log(nonExistentVariable);
} catch (error) {
  console.log(error.name); // "ReferenceError"
  console.log(error.message); // "nonExistentVariable is not defined"
}

// TypeError - 잘못된 타입 사용
try {
  const num = 123;
  num.toUpperCase(); // 숫자에는 toUpperCase 메서드가 없어!
} catch (error) {
  console.log(error.name); // "TypeError"
}

// RangeError - 범위를 벗어난 값
try {
  const arr = new Array(-1); // 배열 길이는 음수가 될 수 없어!
} catch (error) {
  console.log(error.name); // "RangeError"
}

// URIError - URI 인코딩/디코딩 실패
try {
  decodeURIComponent('%'); // 잘못된 URI 형식
} catch (error) {
  console.log(error.name); // "URIError"
}

🛡️ Try-Catch-Finally: 기본 중의 기본

자, 이제 본격적으로 에러를 다루는 방법을 알아보자! 가장 기본이 되는 건 바로 try-catch-finally 구문이야. 😎

이 구조는 정말 직관적이야. "시도해봐(try), 안 되면 잡아(catch), 그리고 마지막엔 이걸 해(finally)"라는 뜻이거든!

try {
  // 에러가 발생할 수 있는 코드
  // 여기서 문제가 생기면 즉시 catch 블록으로 이동
} catch (error) {
  // 에러가 발생했을 때 실행되는 코드
  // error 객체를 통해 에러 정보에 접근 가능
} finally {
  // 에러 발생 여부와 관계없이 항상 실행되는 코드
  // 주로 리소스 정리(cleanup) 작업에 사용
}

실전 예제를 하나 볼까? JSON 파싱은 에러가 자주 발생하는 대표적인 케이스야:

function parseUserData(jsonString) {
  try {
    const userData = JSON.parse(jsonString);
    console.log('✅ 파싱 성공:', userData);
    return userData;
  } catch (error) {
    console.error('❌ JSON 파싱 실패:', error.message);
    // 기본값 반환으로 앱이 계속 동작하도록 함
    return { name: 'Unknown', age: 0 };
  } finally {
    console.log('📝 파싱 시도 완료');
  }
}

// 테스트
parseUserData('{"name":"철수","age":25}'); // 정상 작동
parseUserData('잘못된 JSON'); // 에러 처리됨

좀 더 복잡한 실전 예제를 보자. API 호출 시나리오야:

async function fetchUserProfile(userId) {
  let loadingElement = document.getElementById('loading');
  
  try {
    // 로딩 표시 시작
    loadingElement.style.display = 'block';
    
    const response = await fetch(`/api/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log('✅ 사용자 데이터:', data);
    return data;
    
  } catch (error) {
    console.error('❌ 프로필 로딩 실패:', error.message);
    
    // 사용자에게 친절한 에러 메시지 표시
    showErrorMessage('프로필을 불러오는데 실패했습니다. 다시 시도해주세요.');
    
    // 에러 로깅 서비스로 전송 (예: Sentry, LogRocket)
    logErrorToService(error);
    
    return null;
    
  } finally {
    // 성공이든 실패든 로딩 표시는 반드시 숨김
    loadingElement.style.display = 'none';
    console.log('📝 API 호출 완료');
  }
}

function showErrorMessage(message) {
  // 실제로는 UI에 에러 메시지를 표시하는 로직
  alert(message);
}

function logErrorToService(error) {
  // 실제로는 에러 로깅 서비스로 전송
  console.log('🔔 에러 로깅:', error);
}

🎭 커스텀 에러 클래스 만들기

기본 에러 타입만으로는 부족할 때가 있어. 특히 대규모 애플리케이션에서는 커스텀 에러 클래스를 만들어서 사용하는 게 훨씬 효율적이야! 🎨

왜냐고? 에러를 더 세밀하게 분류하고, 각 에러 타입에 맞는 처리를 할 수 있거든. 마치 옷을 종류별로 정리하는 것처럼 말이야! 👔👗

// 기본 커스텀 에러 클래스
class AppError extends Error {
  constructor(message, statusCode = 500) {
    super(message);
    this.name = this.constructor.name;
    this.statusCode = statusCode;
    this.isOperational = true; // 예상 가능한 에러인지 표시
    
    // 스택 트레이스에서 생성자 호출 제거
    Error.captureStackTrace(this, this.constructor);
  }
}

// 특정 상황을 위한 커스텀 에러들
class ValidationError extends AppError {
  constructor(message) {
    super(message, 400);
    this.name = 'ValidationError';
  }
}

class AuthenticationError extends AppError {
  constructor(message = '인증이 필요합니다') {
    super(message, 401);
    this.name = 'AuthenticationError';
  }
}

class NotFoundError extends AppError {
  constructor(resource = '리소스') {
    super(`${resource}를 찾을 수 없습니다`, 404);
    this.name = 'NotFoundError';
  }
}

class DatabaseError extends AppError {
  constructor(message, originalError) {
    super(message, 500);
    this.name = 'DatabaseError';
    this.originalError = originalError;
  }
}

이제 이 커스텀 에러들을 실제로 사용해보자:

// 사용자 등록 함수 예제
function registerUser(userData) {
  try {
    // 1. 입력 검증
    if (!userData.email || !userData.email.includes('@')) {
      throw new ValidationError('올바른 이메일 주소를 입력해주세요');
    }
    
    if (!userData.password || userData.password.length < 8) {
      throw new ValidationError('비밀번호는 최소 8자 이상이어야 합니다');
    }
    
    // 2. 중복 체크
    const existingUser = checkUserExists(userData.email);
    if (existingUser) {
      throw new ValidationError('이미 등록된 이메일입니다');
    }
    
    // 3. 사용자 생성
    const newUser = createUser(userData);
    return newUser;
    
  } catch (error) {
    // 에러 타입에 따라 다른 처리
    if (error instanceof ValidationError) {
      console.log('📝 입력 검증 실패:', error.message);
      // UI에 사용자 친화적인 메시지 표시
      showValidationError(error.message);
    } else if (error instanceof DatabaseError) {
      console.error('💾 데이터베이스 오류:', error.message);
      // 관리자에게 알림
      notifyAdmin(error);
    } else {
      console.error('❌ 예상치 못한 오류:', error);
      // 일반적인 에러 처리
      showGenericError();
    }
    
    throw error; // 상위로 에러 전파
  }
}

// 에러 핸들러 함수
function handleError(error) {
  // 운영 에러 (예상 가능한 에러)
  if (error.isOperational) {
    return {
      status: error.statusCode,
      message: error.message
    };
  }
  
  // 프로그래밍 에러 (버그)
  console.error('🐛 프로그래밍 에러:', error);
  return {
    status: 500,
    message: '서버 오류가 발생했습니다'
  };
}

실전에서 자주 사용하는 패턴을 하나 더 보자. API 응답 에러를 처리하는 커스텀 에러야:

class ApiError extends AppError {
  constructor(message, statusCode, endpoint, method = 'GET') {
    super(message, statusCode);
    this.name = 'ApiError';
    this.endpoint = endpoint;
    this.method = method;
    this.timestamp = new Date().toISOString();
  }
  
  toJSON() {
    return {
      name: this.name,
      message: this.message,
      statusCode: this.statusCode,
      endpoint: this.endpoint,
      method: this.method,
      timestamp: this.timestamp
    };
  }
}

// API 호출 래퍼 함수
async function apiCall(endpoint, options = {}) {
  try {
    const response = await fetch(endpoint, options);
    
    if (!response.ok) {
      const errorData = await response.json().catch(() => ({}));
      throw new ApiError(
        errorData.message || 'API 요청 실패',
        response.status,
        endpoint,
        options.method || 'GET'
      );
    }
    
    return await response.json();
    
  } catch (error) {
    if (error instanceof ApiError) {
      // API 에러는 그대로 전파
      throw error;
    }
    
    // 네트워크 에러 등 다른 에러는 ApiError로 변환
    throw new ApiError(
      '네트워크 오류가 발생했습니다',
      0,
      endpoint,
      options.method || 'GET'
    );
  }
}

// 사용 예제
async function loadUserData(userId) {
  try {
    const userData = await apiCall(`/api/users/${userId}`);
    console.log('✅ 사용자 데이터 로드 성공:', userData);
    return userData;
  } catch (error) {
    if (error instanceof ApiError) {
      console.error('🌐 API 에러:', error.toJSON());
      
      // 상태 코드에 따른 처리
      switch (error.statusCode) {
        case 401:
          redirectToLogin();
          break;
        case 404:
          showNotFoundMessage();
          break;
        case 500:
          showServerErrorMessage();
          break;
        default:
          showGenericError();
      }
    }
  }
}

🔄 비동기 코드의 에러 핸들링

자, 이제 진짜 중요한 부분이야! 현대 JavaScript 개발에서 비동기 코드는 피할 수 없는 존재거든. 그런데 비동기 코드의 에러 핸들링은 동기 코드와는 좀 달라. 🎢

Promise, async/await, 콜백... 각각의 방식마다 에러를 다루는 방법이 다르니까 하나씩 정복해보자! 💪

1️⃣ Promise 에러 핸들링

// Promise의 기본 에러 핸들링
function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log('✅ 데이터 로드 성공:', data);
      return data;
    })
    .catch(error => {
      console.error('❌ 데이터 로드 실패:', error.message);
      // 에러를 처리하고 기본값 반환
      return { default: true };
    })
    .finally(() => {
      console.log('📝 요청 완료');
    });
}

// Promise.all 에러 핸들링
async function loadMultipleResources() {
  const urls = [
    '/api/users',
    '/api/posts',
    '/api/comments'
  ];
  
  try {
    // 하나라도 실패하면 전체 실패
    const results = await Promise.all(
      urls.map(url => fetch(url).then(r => r.json()))
    );
    console.log('✅ 모든 리소스 로드 성공:', results);
    return results;
  } catch (error) {
    console.error('❌ 리소스 로드 실패:', error);
    throw error;
  }
}

// Promise.allSettled - 더 안전한 방법
async function loadMultipleResourcesSafely() {
  const urls = [
    '/api/users',
    '/api/posts',
    '/api/comments'
  ];
  
  const results = await Promise.allSettled(
    urls.map(url => fetch(url).then(r => r.json()))
  );
  
  // 각 결과를 개별적으로 처리
  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`✅ ${urls[index]} 성공:`, result.value);
    } else {
      console.error(`❌ ${urls[index]} 실패:`, result.reason);
    }
  });
  
  // 성공한 것들만 필터링
  const successfulResults = results
    .filter(r => r.status === 'fulfilled')
    .map(r => r.value);
  
  return successfulResults;
}

2️⃣ Async/Await 에러 핸들링

Async/await는 비동기 코드를 동기 코드처럼 작성할 수 있게 해주는 멋진 문법이야. 에러 핸들링도 try-catch로 깔끔하게 할 수 있지! 😊

// 기본 async/await 에러 핸들링
async function getUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`사용자를 찾을 수 없습니다: ${userId}`);
    }
    
    const userData = await response.json();
    return userData;
    
  } catch (error) {
    console.error('❌ 사용자 데이터 로드 실패:', error.message);
    throw error; // 상위로 전파
  }
}

// 여러 비동기 작업의 에러 핸들링
async function processUserOrder(userId, orderId) {
  try {
    // 1단계: 사용자 정보 가져오기
    const user = await getUserData(userId);
    console.log('✅ 사용자 정보:', user);
    
    // 2단계: 주문 정보 가져오기
    const order = await getOrderData(orderId);
    console.log('✅ 주문 정보:', order);
    
    // 3단계: 결제 처리
    const payment = await processPayment(user, order);
    console.log('✅ 결제 완료:', payment);
    
    // 4단계: 이메일 발송
    await sendConfirmationEmail(user.email, order);
    console.log('✅ 확인 이메일 발송 완료');
    
    return { success: true, orderId, payment };
    
  } catch (error) {
    // 어느 단계에서 실패했는지 로깅
    console.error('❌ 주문 처리 실패:', error.message);
    
    // 실패한 작업에 따라 롤백 처리
    await rollbackOrder(orderId);
    
    throw new Error(`주문 처리 중 오류 발생: ${error.message}`);
  }
}

// 에러 핸들링 래퍼 함수
function asyncHandler(fn) {
  return async function(...args) {
    try {
      return await fn(...args);
    } catch (error) {
      console.error('❌ 에러 발생:', error.message);
      // 에러 로깅 서비스로 전송
      logErrorToService(error);
      throw error;
    }
  };
}

// 사용 예제
const safeGetUserData = asyncHandler(async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) throw new Error('사용자를 찾을 수 없습니다');
  return await response.json();
});

// 이제 try-catch 없이 사용 가능
const userData = await safeGetUserData(123);

3️⃣ 타임아웃과 재시도 로직

네트워크 요청은 언제든 실패할 수 있어. 그래서 타임아웃과 재시도 로직을 구현하는 게 중요해! ⏱️

// 타임아웃 구현
function fetchWithTimeout(url, timeout = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('요청 시간 초과')), timeout)
    )
  ]);
}

// 재시도 로직 구현
async function fetchWithRetry(url, options = {}) {
  const maxRetries = options.maxRetries || 3;
  const retryDelay = options.retryDelay || 1000;
  
  for (let i = 0; i < maxRetries; i++) {
    try {
      console.log(`🔄 시도 ${i + 1}/${maxRetries}`);
      
      const response = await fetchWithTimeout(url, options.timeout);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      
      console.log('✅ 요청 성공!');
      return await response.json();
      
    } catch (error) {
      console.error(`❌ 시도 ${i + 1} 실패:`, error.message);
      
      // 마지막 시도였다면 에러 던지기
      if (i === maxRetries - 1) {
        throw new Error(`${maxRetries}번 시도 후 실패: ${error.message}`);
      }
      
      // 다음 시도 전 대기 (지수 백오프)
      const delay = retryDelay * Math.pow(2, i);
      console.log(`⏳ ${delay}ms 후 재시도...`);
      await new Promise(resolve => setTimeout(resolve, delay));
    }
  }
}

// 사용 예제
async function loadCriticalData() {
  try {
    const data = await fetchWithRetry('/api/critical-data', {
      maxRetries: 3,
      retryDelay: 1000,
      timeout: 5000
    });
    
    console.log('✅ 중요 데이터 로드 완료:', data);
    return data;
    
  } catch (error) {
    console.error('❌ 중요 데이터 로드 최종 실패:', error.message);
    // 폴백 데이터 사용
    return getDefaultData();
  }
}

🎪 전역 에러 핸들러 구현하기

아무리 조심해도 놓치는 에러가 있을 수 있어. 그래서 전역 에러 핸들러를 구현하는 게 중요해! 이건 마지막 안전망 같은 거야. 🥅

브라우저와 Node.js 환경에서 각각 어떻게 구현하는지 알아보자!

🌐 브라우저 환경

// 1. 일반 JavaScript 에러 캐치
window.addEventListener('error', (event) => {
  console.error('🚨 전역 에러 발생:', {
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    error: event.error
  });
  
  // 에러 로깅 서비스로 전송
  logErrorToService({
    type: 'JavaScript Error',
    message: event.message,
    stack: event.error?.stack,
    url: window.location.href,
    userAgent: navigator.userAgent,
    timestamp: new Date().toISOString()
  });
  
  // 사용자에게 친절한 메시지 표시
  showErrorNotification('일시적인 오류가 발생했습니다. 페이지를 새로고침해주세요.');
  
  // 기본 에러 처리 방지 (선택사항)
  // event.preventDefault();
});

// 2. Promise rejection 캐치
window.addEventListener('unhandledrejection', (event) => {
  console.error('🚨 처리되지 않은 Promise rejection:', {
    reason: event.reason,
    promise: event.promise
  });
  
  // 에러 로깅
  logErrorToService({
    type: 'Unhandled Promise Rejection',
    reason: event.reason?.message || event.reason,
    stack: event.reason?.stack,
    url: window.location.href,
    timestamp: new Date().toISOString()
  });
  
  // 기본 동작 방지
  event.preventDefault();
});

// 3. 리소스 로딩 에러 캐치
window.addEventListener('error', (event) => {
  if (event.target !== window) {
    console.error('🚨 리소스 로딩 실패:', {
      tagName: event.target.tagName,
      src: event.target.src || event.target.href
    });
    
    // 이미지 로딩 실패 시 대체 이미지 표시
    if (event.target.tagName === 'IMG') {
      event.target.src = '/images/placeholder.png';
    }
  }
}, true); // capture phase에서 캐치

🖥️ Node.js 환경

// Node.js 전역 에러 핸들러
process.on('uncaughtException', (error, origin) => {
  console.error('🚨 처리되지 않은 예외:', {
    error: error.message,
    stack: error.stack,
    origin: origin
  });
  
  // 에러 로깅
  logErrorToFile(error);
  
  // 프로세스 종료 (안전하게)
  process.exit(1);
});

process.on('unhandledRejection', (reason, promise) => {
  console.error('🚨 처리되지 않은 Promise rejection:', {
    reason: reason,
    promise: promise
  });
  
  // 에러 로깅
  logErrorToFile(reason);
});

// Express.js 에러 핸들링 미들웨어
function errorHandler(err, req, res, next) {
  console.error('🚨 Express 에러:', {
    message: err.message,
    stack: err.stack,
    url: req.url,
    method: req.method,
    ip: req.ip
  });
  
  // 에러 로깅
  logErrorToService({
    type: 'Express Error',
    message: err.message,
    stack: err.stack,
    url: req.url,
    method: req.method,
    headers: req.headers,
    body: req.body,
    timestamp: new Date().toISOString()
  });
  
  // 클라이언트에 응답
  if (err.isOperational) {
    // 운영 에러 (예상 가능한 에러)
    res.status(err.statusCode || 500).json({
      status: 'error',
      message: err.message
    });
  } else {
    // 프로그래밍 에러 (버그)
    res.status(500).json({
      status: 'error',
      message: '서버 오류가 발생했습니다'
    });
  }
}

// Express 앱에 에러 핸들러 등록
app.use(errorHandler);

실전에서 사용하는 통합 에러 핸들링 시스템을 구축해보자:

// 통합 에러 핸들링 시스템
class ErrorHandler {
  constructor() {
    this.errorLog = [];
    this.maxLogSize = 100;
    this.setupHandlers();
  }
  
  setupHandlers() {
    // 브라우저 환경
    if (typeof window !== 'undefined') {
      window.addEventListener('error', this.handleError.bind(this));
      window.addEventListener('unhandledrejection', this.handleRejection.bind(this));
    }
    
    // Node.js 환경
    if (typeof process !== 'undefined') {
      process.on('uncaughtException', this.handleError.bind(this));
      process.on('unhandledRejection', this.handleRejection.bind(this));
    }
  }
  
  handleError(event) {
    const errorInfo = {
      type: 'error',
      message: event.message || event.error?.message,
      stack: event.error?.stack,
      timestamp: new Date().toISOString(),
      url: typeof window !== 'undefined' ? window.location.href : 'N/A',
      userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : 'N/A'
    };
    
    this.logError(errorInfo);
    this.notifyUser(errorInfo);
    this.sendToService(errorInfo);
  }
  
  handleRejection(event) {
    const errorInfo = {
      type: 'unhandledRejection',
      reason: event.reason?.message || event.reason,
      stack: event.reason?.stack,
      timestamp: new Date().toISOString(),
      url: typeof window !== 'undefined' ? window.location.href : 'N/A'
    };
    
    this.logError(errorInfo);
    this.sendToService(errorInfo);
    
    event.preventDefault();
  }
  
  logError(errorInfo) {
    console.error('🚨 에러 발생:', errorInfo);
    
    this.errorLog.push(errorInfo);
    
    // 로그 크기 제한
    if (this.errorLog.length > this.maxLogSize) {
      this.errorLog.shift();
    }
    
    // 로컬 스토리지에 저장 (브라우저)
    if (typeof localStorage !== 'undefined') {
      try {
        localStorage.setItem('errorLog', JSON.stringify(this.errorLog));
      } catch (e) {
        console.error('로컬 스토리지 저장 실패:', e);
      }
    }
  }
  
  notifyUser(errorInfo) {
    // 사용자에게 친절한 메시지 표시
    if (typeof window !== 'undefined') {
      const message = this.getUserFriendlyMessage(errorInfo);
      // 실제로는 토스트 메시지나 모달을 사용
      console.log('📢 사용자 알림:', message);
    }
  }
  
  getUserFriendlyMessage(errorInfo) {
    // 에러 타입에 따라 다른 메시지
    if (errorInfo.message?.includes('network')) {
      return '네트워크 연결을 확인해주세요.';
    }
    if (errorInfo.message?.includes('timeout')) {
      return '요청 시간이 초과되었습니다. 다시 시도해주세요.';
    }
    return '일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
  }
  
  async sendToService(errorInfo) {
    // 에러 로깅 서비스로 전송
    try {
      await fetch('/api/log-error', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(errorInfo)
      });
    } catch (e) {
      console.error('에러 로깅 서비스 전송 실패:', e);
    }
  }
  
  getErrorLog() {
    return this.errorLog;
  }
  
  clearErrorLog() {
    this.errorLog = [];
    if (typeof localStorage !== 'undefined') {
      localStorage.removeItem('errorLog');
    }
  }
}

// 전역 에러 핸들러 인스턴스 생성
const globalErrorHandler = new ErrorHandler();

// 사용 예제
console.log('📊 에러 로그:', globalErrorHandler.getErrorLog());

📊 에러 로깅과 모니터링

에러를 잡는 것도 중요하지만, 그 에러들을 기록하고 분석하는 것도 엄청 중요해! 🔍

프로덕션 환경에서는 사용자가 겪는 모든 에러를 추적하고 분석해야 해. 그래야 버그를 빠르게 찾아서 고칠 수 있거든! 재능넷 같은 플랫폼에서도 안정적인 서비스를 위해 이런 시스템이 필수적이야.

🛠️ 에러 로깅 시스템 구축

// 고급 에러 로거 클래스
class ErrorLogger {
  constructor(config = {}) {
    this.config = {
      endpoint: config.endpoint || '/api/logs',
      batchSize: config.batchSize || 10,
      flushInterval: config.flushInterval || 30000, // 30초
      enableConsole: config.enableConsole !== false,
      environment: config.environment || 'production'
    };
    
    this.errorQueue = [];
    this.startAutoFlush();
  }
  
  // 에러 로깅 메인 메서드
  log(error, context = {}) {
    const errorData = this.formatError(error, context);
    
    if (this.config.enableConsole) {
      console.error('🔴 Error logged:', errorData);
    }
    
    this.errorQueue.push(errorData);
    
    // 배치 크기에 도달하면 즉시 전송
    if (this.errorQueue.length >= this.config.batchSize) {
      this.flush();
    }
  }
  
  // 에러 포맷팅
  formatError(error, context) {
    return {
      // 기본 에러 정보
      message: error.message || String(error),
      name: error.name || 'Error',
      stack: error.stack,
      
      // 컨텍스트 정보
      context: {
        ...context,
        url: typeof window !== 'undefined' ? window.location.href : undefined,
        userAgent: typeof navigator !== 'undefined' ? navigator.userAgent : undefined,
        timestamp: new Date().toISOString(),
        environment: this.config.environment
      },
      
      // 사용자 정보 (있다면)
      user: this.getUserInfo(),
      
      // 시스템 정보
      system: this.getSystemInfo(),
      
      // 추가 메타데이터
      metadata: {
        errorId: this.generateErrorId(),
        severity: this.calculateSeverity(error),
        tags: this.extractTags(error, context)
      }
    };
  }
  
  // 사용자 정보 수집
  getUserInfo() {
    // 실제로는 인증 시스템에서 가져옴
    return {
      id: localStorage.getItem('userId'),
      sessionId: this.getSessionId()
    };
  }
  
  // 시스템 정보 수집
  getSystemInfo() {
    if (typeof window === 'undefined') return {};
    
    return {
      screen: {
        width: window.screen.width,
        height: window.screen.height
      },
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      memory: performance.memory ? {
        used: performance.memory.usedJSHeapSize,
        total: performance.memory.totalJSHeapSize
      } : undefined
    };
  }
  
  // 에러 심각도 계산
  calculateSeverity(error) {
    if (error.name === 'TypeError' || error.name === 'ReferenceError') {
      return 'high';
    }
    if (error.message?.includes('network') || error.message?.includes('timeout')) {
      return 'medium';
    }
    return 'low';
  }
  
  // 태그 추출
  extractTags(error, context) {
    const tags = [];
    
    if (error.name) tags.push(error.name);
    if (context.component) tags.push(`component:${context.component}`);
    if (context.action) tags.push(`action:${context.action}`);
    
    return tags;
  }
  
  // 고유 에러 ID 생성
  generateErrorId() {
    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
  }
  
  // 세션 ID 가져오기/생성
  getSessionId() {
    let sessionId = sessionStorage.getItem('sessionId');
    if (!sessionId) {
      sessionId = this.generateErrorId();
      sessionStorage.setItem('sessionId', sessionId);
    }
    return sessionId;
  }
  
  // 서버로 전송
  async flush() {
    if (this.errorQueue.length === 0) return;
    
    const errors = [...this.errorQueue];
    this.errorQueue = [];
    
    try {
      const response = await fetch(this.config.endpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ errors })
      });
      
      if (!response.ok) {
        console.error('에러 로그 전송 실패:', response.status);
        // 실패한 에러들을 다시 큐에 추가
        this.errorQueue.unshift(...errors);
      }
    } catch (error) {
      console.error('에러 로그 전송 중 오류:', error);
      // 실패한 에러들을 다시 큐에 추가
      this.errorQueue.unshift(...errors);
    }
  }
  
  // 자동 플러시 시작
  startAutoFlush() {
    this.flushTimer = setInterval(() => {
      this.flush();
    }, this.config.flushInterval);
  }
  
  // 정리
  destroy() {
    if (this.flushTimer) {
      clearInterval(this.flushTimer);
    }
    this.flush(); // 남은 에러들 전송
  }
}

// 전역 로거 인스턴스
const errorLogger = new ErrorLogger({
  endpoint: '/api/error-logs',
  batchSize: 5,
  flushInterval: 20000,
  environment: process.env.NODE_ENV || 'development'
});

// 사용 예제
try {
  // 위험한 작업
  riskyOperation();
} catch (error) {
  errorLogger.log(error, {
    component: 'UserProfile',
    action: 'loadData',
    userId: 123
  });
}

📈 에러 분석 대시보드

에러 데이터를 수집했다면, 이제 분석해야 해! 간단한 에러 분석 시스템을 만들어보자:

// 에러 분석 클래스
class ErrorAnalytics {
  constructor() {
    this.errors = [];
    this.loadFromStorage();
  }
  
  // 에러 추가
  addError(error) {
    this.errors.push({
      ...error,
      timestamp: new Date().toISOString()
    });
    this.saveToStorage();
  }
  
  // 에러 통계
  getStatistics() {
    return {
      total: this.errors.length,
      byType: this.groupByType(),
      bySeverity: this.groupBySeverity(),
      byTime: this.groupByTime(),
      topErrors: this.getTopErrors(5),
      errorRate: this.calculateErrorRate()
    };
  }
  
  // 타입별 그룹핑
  groupByType() {
    const grouped = {};
    this.errors.forEach(error => {
      const type = error.name || 'Unknown';
      grouped[type] = (grouped[type] || 0) + 1;
    });
    return grouped;
  }
  
  // 심각도별 그룹핑
  groupBySeverity() {
    const grouped = { high: 0, medium: 0, low: 0 };
    this.errors.forEach(error => {
      const severity = error.metadata?.severity || 'low';
      grouped[severity]++;
    });
    return grouped;
  }
  
  // 시간대별 그룹핑
  groupByTime() {
    const now = Date.now();
    const oneHour = 60 * 60 * 1000;
    
    return {
      lastHour: this.errors.filter(e => 
        now - new Date(e.timestamp).getTime() < oneHour
      ).length,
      last24Hours: this.errors.filter(e => 
        now - new Date(e.timestamp).getTime() < 24 * oneHour
      ).length,
      last7Days: this.errors.filter(e => 
        now - new Date(e.timestamp).getTime() < 7 * 24 * oneHour
      ).length
    };
  }
  
  // 가장 많이 발생한 에러
  getTopErrors(limit = 5) {
    const errorCounts = {};
    
    this.errors.forEach(error => {
      const key = `${error.name}: ${error.message}`;
      if (!errorCounts[key]) {
        errorCounts[key] = {
          error: error,
          count: 0
        };
      }
      errorCounts[key].count++;
    });
    
    return Object.values(errorCounts)
      .sort((a, b) => b.count - a.count)
      .slice(0, limit);
  }
  
  // 에러 발생률 계산
  calculateErrorRate() {
    const timeWindows = this.groupByTime();
    return {
      perHour: timeWindows.lastHour,
      perDay: timeWindows.last24Hours / 24,
      perWeek: timeWindows.last7Days / 7
    };
  }
  
  // 로컬 스토리지에 저장
  saveToStorage() {
    try {
      localStorage.setItem('errorAnalytics', JSON.stringify(this.errors));
    } catch (e) {
      console.error('에러 분석 데이터 저장 실패:', e);
    }
  }
  
  // 로컬 스토리지에서 로드
  loadFromStorage() {
    try {
      const data = localStorage.getItem('errorAnalytics');
      if (data) {
        this.errors = JSON.parse(data);
      }
    } catch (e) {
      console.error('에러 분석 데이터 로드 실패:', e);
    }
  }
  
  // 리포트 생성
  generateReport() {
    const stats = this.getStatistics();
    
    console.log('📊 에러 분석 리포트');
    console.log('='.repeat(50));
    console.log(`총 에러 수: ${stats.total}`);
    console.log('\n타입별 분포:');
    Object.entries(stats.byType).forEach(([type, count]) => {
      console.log(`  ${type}: ${count}회`);
    });
    console.log('\n심각도별 분포:');
    Object.entries(stats.bySeverity).forEach(([severity, count]) => {
      console.log(`  ${severity}: ${count}회`);
    });
    console.log('\n시간대별 발생:');
    console.log(`  최근 1시간: ${stats.byTime.lastHour}회`);
    console.log(`  최근 24시간: ${stats.byTime.last24Hours}회`);
    console.log(`  최근 7일: ${stats.byTime.last7Days}회`);
    console.log('\n가장 많이 발생한 에러:');
    stats.topErrors.forEach((item, index) => {
      console.log(`  ${index + 1}. ${item.error.name}: ${item.error.message} (${item.count}회)`);
    });
    console.log('='.repeat(50));
    
    return stats;
  }
  
  // 데이터 초기화
  clear() {
    this.errors = [];
    localStorage.removeItem('errorAnalytics');
  }
}

// 전역 분석 인스턴스
const errorAnalytics = new ErrorAnalytics();

// 사용 예제
errorAnalytics.generateReport();

🎨 사용자 친화적인 에러 메시지

기술적으로 완벽한 에러 핸들링도 중요하지만, 사용자에게 어떻게 보여주느냐도 엄청 중요해! 😊

"Uncaught TypeError: Cannot read property 'name' of undefined" 같은 메시지를 사용자에게 보여주면 안 되겠지? 친절하고 이해하기 쉬운 메시지로 바꿔야 해!

// 에러 메시지 변환기
class ErrorMessageTranslator {
  constructor() {
    this.messageMap = {
      // 네트워크 관련
      'Failed to fetch': '서버와 연결할 수 없습니다. 인터넷 연결을 확인해주세요.',
      'Network request failed': '네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
      'timeout': '요청 시간이 초과되었습니다. 다시 시도해주세요.',
      
      // 인증 관련
      'Unauthorized': '로그인이 필요합니다.',
      'Forbidden': '접근 권한이 없습니다.',
      'Invalid token': '로그인 정보가 만료되었습니다. 다시 로그인해주세요.',
      
      // 데이터 관련
      'Not found': '요청하신 정보를 찾을 수 없습니다.',
      'Invalid input': '입력하신 정보가 올바르지 않습니다.',
      'Validation failed': '입력 형식을 확인해주세요.',
      
      // 서버 관련
      'Internal server error': '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
      'Service unavailable': '서비스가 일시적으로 이용 불가능합니다.',
      
      // 기타
      'Unknown error': '알 수 없는 오류가 발생했습니다.'
    };
    
    this.actionMap = {
      'Failed to fetch': '새로고침하거나 인터넷 연결을 확인해주세요.',
      'Unauthorized': '로그인 페이지로 이동합니다.',
      'Not found': '이전 페이지로 돌아가거나 홈으로 이동해주세요.',
      'timeout': '페이지를 새로고침하거나 잠시 후 다시 시도해주세요.'
    };
  }
  
  // 에러를 사용자 친화적 메시지로 변환
  translate(error) {
    const errorMessage = error.message || String(error);
    
    // 정확히 일치하는 메시지 찾기
    if (this.messageMap[errorMessage]) {
      return {
        title: '오류 발생',
        message: this.messageMap[errorMessage],
        action: this.actionMap[errorMessage] || '다시 시도해주세요.',
        severity: this.getSeverity(error)
      };
    }
    
    // 부분 일치하는 메시지 찾기
    for (const [key, value] of Object.entries(this.messageMap)) {
      if (errorMessage.toLowerCase().includes(key.toLowerCase())) {
        return {
          title: '오류 발생',
          message: value,
          action: this.actionMap[key] || '다시 시도해주세요.',
          severity: this.getSeverity(error)
        };
      }
    }
    
    // 기본 메시지
    return {
      title: '오류 발생',
      message: '일시적인 오류가 발생했습니다.',
      action: '페이지를 새로고침하거나 잠시 후 다시 시도해주세요.',
      severity: 'medium'
    };
  }
  
  // 에러 심각도 판단
  getSeverity(error) {
    const message = error.message?.toLowerCase() || '';
    
    if (message.includes('server') || message.includes('database')) {
      return 'high';
    }
    if (message.includes('network') || message.includes('timeout')) {
      return 'medium';
    }
    return 'low';
  }
  
  // 커스텀 메시지 추가
  addCustomMessage(errorKey, userMessage, action) {
    this.messageMap[errorKey] = userMessage;
    if (action) {
      this.actionMap[errorKey] = action;
    }
  }
}

// 에러 UI 표시 클래스
class ErrorUI {
  constructor() {
    this.translator = new ErrorMessageTranslator();
    this.setupStyles();
  }
  
  // 스타일 설정
  setupStyles() {
    if (typeof document === 'undefined') return;
    
    const style = document.createElement('style');
    style.textContent = `
      .error-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        max-width: 400px;
        padding: 20px;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 10000;
        animation: slideIn 0.3s ease-out;
      }
      
      @keyframes slideIn {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      
      .error-notification.severity-high {
        border-left: 4px solid #ef5350;
      }
      
      .error-notification.severity-medium {
        border-left: 4px solid #ffa726;
      }
      
      .error-notification.severity-low {
        border-left: 4px solid #42a5f5;
      }
      
      .error-notification-title {
        font-weight: bold;
        margin-bottom: 8px;
        color: #333;
      }
      
      .error-notification-message {
        color: #666;
        margin-bottom: 12px;
        line-height: 1.5;
      }
      
      .error-notification-action {
        color: #999;
        font-size: 0.9em;
      }
      
      .error-notification-close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #999;
      }
    `;
    document.head.appendChild(style);
  }
  
  // 에러 알림 표시
  show(error, duration = 5000) {
    if (typeof document === 'undefined') return;
    
    const translated = this.translator.translate(error);
    
    const notification = document.createElement('div');
    notification.className = `error-notification severity-${translated.severity}`;
    notification.innerHTML = `
      <button class="error-notification-close">×</button>
      <div class="error-notification-title">${translated.title}</div>
      <div class="error-notification-message">${translated.message}</div>
      <div class="error-notification-action">${translated.action}</div>
    `;
    
    document.body.appendChild(notification);
    
    // 닫기 버튼 이벤트
    const closeBtn = notification.querySelector('.error-notification-close');
    closeBtn.addEventListener('click', () => {
      this.hide(notification);
    });
    
    // 자동 닫기
    if (duration > 0) {
      setTimeout(() => {
        this.hide(notification);
      }, duration);
    }
    
    return notification;
  }
  
  // 알림 숨기기
  hide(notification) {
    notification.style.animation = 'slideIn 0.3s ease-out reverse';
    setTimeout(() => {
      notification.remove();
    }, 300);
  }
}

// 전역 인스턴스
const errorUI = new ErrorUI();

// 사용 예제
try {
  throw new Error('Failed to fetch');
} catch (error) {
  errorUI.show(error);
}

// 폼 검증 에러 메시지 헬퍼
const formErrorMessages = {
  email: {
    required: '이메일 주소를 입력해주세요. 📧',
    invalid: '올바른 이메일 형식이 아닙니다. (예: user@example.com)',
    duplicate: '이미 사용 중인 이메일입니다. 다른 이메일을 사용해주세요.'
  },
  password: {
    required: '비밀번호를 입력해주세요. 🔒',
    tooShort: '비밀번호는 최소 8자 이상이어야 합니다.',
    tooWeak: '더 강력한 비밀번호를 사용해주세요. (대소문자, 숫자, 특수문자 포함)',
    mismatch: '비밀번호가 일치하지 않습니다. 다시 확인해주세요.'
  },
  phone: {
    required: '전화번호를 입력해주세요. 📱',
    invalid: '올바른 전화번호 형식이 아닙니다. (예: 010-1234-5678)'
  },
  name: {
    required: '이름을 입력해주세요. 👤',
    tooShort: '이름은 최소 2자 이상이어야 합니다.',
    invalid: '이름에는 특수문자를 사용할 수 없습니다.'
  }
};

function showFormError(field, errorType) {
  const message = formErrorMessages[field]?.[errorType] || '입력 내용을 확인해주세요.';
  errorUI.show(new Error(message), 3000);
}

🔧 실전 에러 핸들링 패턴

이제 실전에서 바로 써먹을 수 있는 에러 핸들링 패턴들을 알아보자! 이 패턴들은 실제 프로젝트에서 검증된 것들이야. 💼

1️⃣ Result 패턴 (Rust 스타일)

에러를 예외로 던지는 대신, 결과 객체로 반환하는 패턴이야. 함수형 프로그래밍에서 많이 사용돼:

// Result 클래스
class Result {
  constructor(success, value, error) {
    this.success = success;
    this.value = value;
    this.error = error;
  }
  
  static ok(value) {
    return new Result(true, value, null);
  }
  
  static err(error) {
    return new Result(false, null, error);
  }
  
  isOk() {
    return this.success;
  }
  
  isErr() {
    return !this.success;
  }
  
  unwrap() {
    if (this.isErr()) {
      throw this.error;
    }
    return this.value;
  }
  
  unwrapOr(defaultValue) {
    return this.isOk() ? this.value : defaultValue;
  }
  
  map(fn) {
    if (this.isErr()) return this;
    try {
      return Result.ok(fn(this.value));
    } catch (error) {
      return Result.err(error);
    }
  }
  
  mapErr(fn) {
    if (this.isOk()) return this;
    return Result.err(fn(this.error));
  }
}

// 사용 예제
function divide(a, b) {
  if (b === 0) {
    return Result.err(new Error('0으로 나눌 수 없습니다'));
  }
  return Result.ok(a / b);
}

function calculateAverage(numbers) {
  if (numbers.length === 0) {
    return Result.err(new Error('빈 배열입니다'));
  }
  
  const sum = numbers.reduce((acc, n) => acc + n, 0);
  return divide(sum, numbers.length);
}

// 체이닝 사용
const result = calculateAverage([10, 20, 30])
  .map(avg => avg.toFixed(2))
  .map(str => `평균: ${str}`)
  .mapErr(err => `계산 실패: ${err.message}`);

if (result.isOk()) {
  console.log('✅', result.value);
} else {
  console.error('❌', result.error);
}

// 기본값 사용
const average = calculateAverage([]).unwrapOr(0);
console.log('평균:', average);

2️⃣ Either 패턴 (함수형)

// Either 클래스 (Left = 에러, Right = 성공)
class Either {
  constructor(left, right) {
    this.left = left;
    this.right = right;
  }
  
  static left(value) {
    return new Either(value, null);
  }
  
  static right(value) {
    return new Either(null, value);
  }
  
  isLeft() {
    return this.left !== null;
  }
  
  isRight() {
    return this.right !== null;
  }
  
  map(fn) {
    return this.isRight() 
      ? Either.right(fn(this.right))
      : this;
  }
  
  flatMap(fn) {
    return this.isRight() 
      ? fn(this.right)
      : this;
  }
  
  fold(leftFn, rightFn) {
    return this.isLeft()
      ? leftFn(this.left)
      : rightFn(this.right);
  }
}

// 사용 예제
function parseJSON(jsonString) {
  try {
    return Either.right(JSON.parse(jsonString));
  } catch (error) {
    return Either.left(error.message);
  }
}

function validateUser(user) {
  if (!user.email) {
    return Either.left('이메일이 필요합니다');
  }
  if (!user.name) {
    return Either.left('이름이 필요합니다');
  }
  return Either.right(user);
}

// 체이닝
const result = parseJSON('{"email":"test@test.com","name":"철수"}')
  .flatMap(validateUser)
  .map(user => ({ ...user, validated: true }))
  .fold(
    error => `❌ 에러: ${error}`,
    user => `✅ 성공: ${user.name}`
  );

console.log(result);

3️⃣ Circuit Breaker 패턴

외부 서비스 호출이 계속 실패할 때, 일정 시간 동안 호출을 차단하는 패턴이야. 시스템 과부하를 방지할 수 있어! ⚡

// Circuit Breaker 클래스
class CircuitBreaker {
  constructor(options = {}) {
    this.failureThreshold = options.failureThreshold || 5;
    this.resetTimeout = options.resetTimeout || 60000; // 1분
    this.monitoringPeriod = options.monitoringPeriod || 10000; // 10초
    
    this.state = 'CLOSED'; // CLOSED, OPEN, HALF_OPEN
    this.failureCount = 0;
    this.lastFailureTime = null;
    this.successCount = 0;
    
    this.stats = {
      totalCalls: 0,
      successfulCalls: 0,
      failedCalls: 0,
      rejectedCalls: 0
    };
  }
  
  async execute(fn) {
    this.stats.totalCalls++;
    
    // OPEN 상태: 호출 차단
    if (this.state === 'OPEN') {
      if (Date.now() - this.lastFailureTime >= this.resetTimeout) {
        console.log('🔄 Circuit Breaker: HALF_OPEN 상태로 전환');
        this.state = 'HALF_OPEN';
        this.successCount = 0;
      } else {
        this.stats.rejectedCalls++;
        throw new Error('Circuit Breaker가 OPEN 상태입니다. 잠시 후 다시 시도해주세요.');
      }
    }
    
    try {
      const result = await fn();
      this.onSuccess();
      return result;
    } catch (error) {
      this.onFailure();
      throw error;
    }
  }
  
  onSuccess() {
    this.stats.successfulCalls++;
    this.failureCount = 0;
    
    if (this.state === 'HALF_OPEN') {
      this.successCount++;
      if (this.successCount >= 2) {
        console.log('✅ Circuit Breaker: CLOSED 상태로 복구');
        this.state = 'CLOSED';
        this.successCount = 0;
      }
    }
  }
  
  onFailure() {
    this.stats.failedCalls++;
    this.failureCount++;
    this.lastFailureTime = Date.now();
    
    if (this.failureCount >= this.failureThreshold) {
      console.log('🚨 Circuit Breaker: OPEN 상태로 전환');
      this.state = 'OPEN';
    }
  }
  
  getState() {
    return this.state;
  }
  
  getStats() {
    return {
      ...this.stats,
      state: this.state,
      failureCount: this.failureCount,
      successRate: this.stats.totalCalls > 0
        ? (this.stats.successfulCalls / this.stats.totalCalls * 100).toFixed(2) + '%'
        : '0%'
    };
  }
  
  reset() {
    this.state = 'CLOSED';
    this.failureCount = 0;
    this.successCount = 0;
    this.lastFailureTime = null;
  }
}

// 사용 예제
const apiCircuitBreaker = new CircuitBreaker({
  failureThreshold: 3,
  resetTimeout: 30000,
  monitoringPeriod: 10000
});

async function callExternalAPI(endpoint) {
  return apiCircuitBreaker.execute(async () => {
    const response = await fetch(endpoint);
    if (!response.ok) {
      throw new Error(`API 호출 실패: ${response.status}`);
    }
    return await response.json();
  });
}

// 테스트
async function testCircuitBreaker() {
  for (let i = 0; i < 10; i++) {
    try {
      const data = await callExternalAPI('/api/unstable-endpoint');
      console.log(`✅ 호출 ${i + 1} 성공:`, data);
    } catch (error) {
      console.error(`❌ 호출 ${i + 1} 실패:`, error.message);
    }
    
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
  
  console.log('📊 Circuit Breaker 통계:', apiCircuitBreaker.getStats());
}

4️⃣ Retry 패턴 (지수 백오프)

// Retry 헬퍼 함수
async function retryWithBackoff(fn, options = {}) {
  const maxRetries = options.maxRetries || 3;
  const initialDelay = options.initialDelay || 1000;
  const maxDelay = options.maxDelay || 30000;
  const backoffMultiplier = options.backoffMultiplier || 2;
  const shouldRetry = options.shouldRetry || (() => true);
  
  let lastError;
  
  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      console.log(`🔄 시도 ${attempt + 1}/${maxRetries + 1}`);
      return await fn();
    } catch (error) {
      lastError = error;
      
      // 재시도 여부 확인
      if (!shouldRetry(error) || attempt === maxRetries) {
        throw error;
      }
      
      // 지수 백오프 계산
      const delay = Math.min(
        initialDelay * Math.pow(backoffMultiplier, attempt),
        maxDelay
      );
      
      // 지터 추가 (랜덤성)
      const jitter = delay * 0.1 * Math.random();
      const totalDelay = delay + jitter;
      
      console.log(`⏳ ${Math.round(totalDelay)}ms 후 재시도...`);
      await new Promise(resolve => setTimeout(resolve, totalDelay));
    }
  }
  
  throw lastError;
}

// 사용 예제
async function fetchUserData(userId) {
  return retryWithBackoff(
    async () => {
      const response = await fetch(`/api/users/${userId}`);
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return await response.json();
    },
    {
      maxRetries: 3,
      initialDelay: 1000,
      maxDelay: 10000,
      backoffMultiplier: 2,
      shouldRetry: (error) => {
        // 5xx 에러만 재시도
        return error.message.includes('500') || 
               error.message.includes('502') ||
               error.message.includes('503');
      }
    }
  );
}

// 고급 Retry 클래스
class RetryManager {
  constructor() {
    this.retryStrategies = new Map();
  }
  
  // 재시도 전략 등록
  registerStrategy(name, strategy) {
    this.retryStrategies.set(name, strategy);
  }
  
  // 전략 실행
  async execute(strategyName, fn) {
    const strategy = this.retryStrategies.get(strategyName);
    if (!strategy) {
      throw new Error(`재시도 전략을 찾을 수 없습니다: ${strategyName}`);
    }
    
    return retryWithBackoff(fn, strategy);
  }
}

// 전역 Retry Manager
const retryManager = new RetryManager();

// 전략 등록
retryManager.registerStrategy('api-call', {
  maxRetries: 3,
  initialDelay: 1000,
  backoffMultiplier: 2,
  shouldRetry: (error) => error.message.includes('5')
});

retryManager.registerStrategy('critical-operation', {
  maxRetries: 5,
  initialDelay: 500,
  backoffMultiplier: 1.5,
  shouldRetry: () => true
});

// 사용
const data = await retryManager.execute('api-call', async () => {
  return await fetch('/api/data').then(r => r.json());
});

🎯 프레임워크별 에러 핸들링

각 프레임워크마다 에러 핸들링 방식이 조금씩 달라. 주요 프레임워크들의 베스트 프랙티스를 알아보자! 🚀

⚛️ React 에러 핸들링

// Error Boundary 컴포넌트
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      hasError: false,
      error: null,
      errorInfo: null
    };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('🚨 React Error Boundary:', error, errorInfo);
    
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
    
    // 에러 로깅 서비스로 전송
    logErrorToService({
      type: 'React Component Error',
      message: error.message,
      stack: error.stack,
      componentStack: errorInfo.componentStack,
      timestamp: new Date().toISOString()
    });
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div style={{
          padding: '40px',
          textAlign: 'center',
          background: '#fff3e0',
          borderRadius: '12px',
          margin: '20px'
        }}>
          <h2>😢 앗! 문제가 발생했습니다</h2>
          <p>페이지를 새로고침하거나 잠시 후 다시 시도해주세요.</p>
          <button 
            onClick={() => window.location.reload()}
            style={{
              padding: '10px 20px',
              background: '#6c9bd1',
              color: 'white',
              border: 'none',
              borderRadius: '6px',
              cursor: 'pointer',
              marginTop: '20px'
            }}
          >
            새로고침
          </button>
          
          {process.env.NODE_ENV === 'development' && (
            <details style={{ marginTop: '20px', textAlign: 'left' }}>
              <summary>에러 상세 정보</summary>
              <pre style={{ 
                background: '#f5f5f5', 
                padding: '15px', 
                borderRadius: '6px',
                overflow: 'auto'
              }}>
                {this.state.error && this.state.error.toString()}
                {this.state.errorInfo && this.state.errorInfo.componentStack}
              </pre>
            </details>
          )}
        </div>
      );
    }
    
    return this.props.children;
  }
}

// 사용 예제
function App() {
  return (
    <ErrorBoundary>
      <Header />
      <ErrorBoundary>
        <MainContent />
      </ErrorBoundary>
      <ErrorBoundary>
        <Sidebar />
      </ErrorBoundary>
      <Footer />
    </ErrorBoundary>
  );
}

// React Query 에러 핸들링
import { useQuery } from 'react-query';

function UserProfile({ userId }) {
  const { data, error, isLoading, isError } = useQuery(
    ['user', userId],
    () => fetchUser(userId),
    {
      retry: 3,
      retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
      onError: (error) => {
        console.error('사용자 데이터 로드 실패:', error);
        errorLogger.log(error, { component: 'UserProfile', userId });
      }
    }
  );
  
  if (isLoading) return <div>로딩 중...</div>;
  
  if (isError) {
    return (
      <div className="error-message">
        <p>사용자 정보를 불러올 수 없습니다.</p>
        <p>{error.message}</p>
      </div>
    );
  }
  
  return <div>{data.name}</div>;
}

💚 Vue.js 에러 핸들링

// Vue 전역 에러 핸들러
const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  console.error('🚨 Vue Error:', {
    error: err,
    component: instance?.$options.name,
    info: info
  });
  
  // 에러 로깅
  errorLogger.log(err, {
    framework: 'Vue',
    component: instance?.$options.name,
    lifecycle: info
  });
};

// 컴포넌트 레벨 에러 핸들링
export default {
  name: 'UserProfile',
  
  data() {
    return {
      user: null,
      error: null,
      loading: false
    };
  },
  
  async created() {
    await this.loadUser();
  },
  
  methods: {
    async loadUser() {
      this.loading = true;
      this.error = null;
      
      try {
        this.user = await fetchUser(this.userId);
      } catch (error) {
        console.error('사용자 로드 실패:', error);
        this.error = error.message;
        errorLogger.log(error, { 
          component: 'UserProfile',
          userId: this.userId 
        });
      } finally {
        this.loading = false;
      }
    }
  },
  
  errorCaptured(err, instance, info) {
    console.error('자식 컴포넌트 에러:', err);
    this.error = '하위 컴포넌트에서 오류가 발생했습니다.';
    return false; // 에러 전파 중단
  }
};

🅰️ Angular 에러 핸들링

// 전역 에러 핸들러
import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: Error) {
    console.error('🚨 Angular Error:', error);
    
    // 에러 로깅
    errorLogger.log(error, {
      framework: 'Angular',
      url: window.location.href
    });
    
    // 사용자에게 알림
    errorUI.show(error);
  }
}

// 모듈에 등록
@NgModule({
  providers: [
    { provide: ErrorHandler, useClass: GlobalErrorHandler }
  ]
})
export class AppModule { }

// HTTP 인터셉터로 API 에러 처리
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMessage = '';
        
        if (error.error instanceof ErrorEvent) {
          // 클라이언트 에러
          errorMessage = `클라이언트 오류: ${error.error.message}`;
        } else {
          // 서버 에러
          errorMessage = `서버 오류: ${error.status} - ${error.message}`;
        }
        
        console.error(errorMessage);
        errorLogger.log(new Error(errorMessage), {
          type: 'HTTP Error',
          status: error.status,
          url: error.url
        });
        
        return throwError(() => new Error(errorMessage));
      })
    );
  }
}

🧪 에러 핸들링 테스트

에러 핸들링 코드도 테스트가 필요해! 😊 제대로 작동하는지 확인하는 방법을 알아보자.

// Jest를 사용한 에러 핸들링 테스트
describe('에러 핸들링 테스트', () => {
  
  // 1. 에러가 제대로 던져지는지 테스트
  test('0으로 나누면 에러를 던져야 함', () => {
    function divide(a, b) {
      if (b === 0) {
        throw new Error('0으로 나눌 수 없습니다');
      }
      return a / b;
    }
    
    expect(() => divide(10, 0)).toThrow('0으로 나눌 수 없습니다');
    expect(() => divide(10, 0)).toThrow(Error);
  });
  
  // 2. 비동기 에러 테스트
  test('API 호출 실패 시 에러를 던져야 함', async () => {
    async function fetchData() {
      const response = await fetch('/api/data');
      if (!response.ok) {
        throw new Error('API 호출 실패');
      }
      return await response.json();
    }
    
    // fetch를 모킹
    global.fetch = jest.fn(() =>
      Promise.resolve({
        ok: false,
        status: 500
      })
    );
    
    await expect(fetchData()).rejects.toThrow('API 호출 실패');
  });
  
  // 3. 커스텀 에러 테스트
  test('ValidationError가 올바르게 생성되어야 함', () => {
    const error = new ValidationError('이메일이 유효하지 않습니다');
    
    expect(error).toBeInstanceOf(ValidationError);
    expect(error).toBeInstanceOf(AppError);
    expect(error).toBeInstanceOf(Error);
    expect(error.name).toBe('ValidationError');
    expect(error.statusCode).toBe(400);
    expect(error.isOperational).toBe(true);
  });
  
  // 4. 에러 핸들러 테스트
  test('에러 핸들러가 올바르게 작동해야 함', () => {
    const mockLogger = jest.fn();
    const errorHandler = new ErrorHandler();
    errorHandler.logError = mockLogger;
    
    const error = new Error('테스트 에러');
    errorHandler.handleError(error);
    
    expect(mockLogger).toHaveBeenCalledWith(
      expect.objectContaining({
        message: '테스트 에러'
      })
    );
  });
  
  // 5. Retry 로직 테스트
  test('3번 재시도 후 실패해야 함', async () => {
    let attemptCount = 0;
    
    async function unreliableFunction() {
      attemptCount++;
      throw new Error('항상 실패');
    }
    
    await expect(
      retryWithBackoff(unreliableFunction, { maxRetries: 2 })
    ).rejects.toThrow('항상 실패');
    
    expect(attemptCount).toBe(3); // 초기 시도 + 2번 재시도
  });
  
  // 6. Circuit Breaker 테스트
  test('Circuit Breaker가 OPEN 상태가 되어야 함', async () => {
    const breaker = new CircuitBreaker({ failureThreshold: 3 });
    
    // 3번 실패시키기
    for (let i = 0; i < 3; i++) {
      try {
        await breaker.execute(async () => {
          throw new Error('실패');
        });
      } catch (e) {
        // 에러 무시
      }
    }
    
    expect(breaker.getState()).toBe('OPEN');
    
    // OPEN 상태에서는 호출이 거부되어야 함
    await expect(
      breaker.execute(async () => 'success')
    ).rejects.toThrow('Circuit Breaker가 OPEN 상태입니다');
  });
});

// React 컴포넌트 에러 테스트
import { render, screen } from '@testing-library/react';

describe('ErrorBoundary 테스트', () => {
  test('에러 발생 시 폴백 UI를 표시해야 함', () => {
    const ThrowError = () => {
      throw new Error('테스트 에러');
    };
    
    // 콘솔 에러 임시 억제
    const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
    
    render(
      <ErrorBoundary>
        <ThrowError />
      </ErrorBoundary>
    );
    
    expect(screen.getByText(/문제가 발생했습니다/i)).toBeInTheDocument();
    
    spy.mockRestore();
  });
});

📝 에러 핸들링 베스트 프랙티스 요약

자, 이제 지금까지 배운 내용을 정리해보자! 실전에서 바로 적용할 수 있는 핵심 원칙들이야. 📌

🎓 마무리하며

와! 정말 긴 여정이었지? 😅 하지만 이제 너는 JavaScript 에러 핸들링의 달인이 되었어! 🎉

에러 핸들링은 단순히 코드가 깨지지 않게 하는 것 이상의 의미가 있어. 사용자 경험을 지키고, 시스템의 안정성을 보장하며, 개발자의 삶의 질을 높이는 중요한 기술이지. 💪

재능넷에서 프로그래밍 재능을 공유하거나 배울 때도, 이런 에러 핸들링 지식은 정말 중요해. 안정적인 코드를 작성하는 능력은 모든 개발자가 갖춰야 할 핵심 역량이니까! 🌟

기억해! 좋은 개발자는 에러가 발생하지 않는 코드를 짜는 게 아니라, 에러가 발생했을 때 우아하게 처리하는 코드를 짜는 거야. 🎨

이 글에서 배운 내용들을 실제 프로젝트에 적용해보고, 계속 개선해나가자. 에러 핸들링은 한 번에 완벽하게 할 수 없어. 경험을 쌓으면서 점점 더 나아지는 거야! 📈

혹시 막히는 부분이 있거나 더 궁금한 게 있다면, 재능넷 커뮤니티에서 다른 개발자들과 소통해보는 것도 좋은 방법이야. 함께 성장하는 거지! 🤝

자, 이제 나가서 멋진 코드를 작성해봐! 에러가 나도 당황하지 말고, 오늘 배운 내용을 떠올리면서 차근차근 해결해나가면 돼. 화이팅! 🚀✨