🚨 11. 에러 처리 — 예외를 우아하게 다루는 시니어의 방어 전략

// 기본 Error 속성
try {
  null.property; // TypeError 발생
} catch (err) {
  console.log(err.name);    // "TypeError"
  console.log(err.message); // "Cannot read properties of null..."
  console.log(err.stack);   // 스택 트레이스 (디버깅의 핵심)
}
 
// JS 내장 에러 타입
// TypeError    — 타입이 맞지 않을 때 (null.foo, undefined())
// ReferenceError — 선언되지 않은 변수 참조 (미선언 변수)
// SyntaxError  — 문법 오류 (파싱 단계에서 발생, catch로 못 잡음)
// RangeError   — 허용 범위 초과 (배열 길이 음수 등)
// URIError     — encodeURI 등에서 잘못된 URI

// 기본 패턴
function parseUserData(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (err) {
    if (err instanceof SyntaxError) {
      // 타입별 분기 처리
      console.error("JSON 파싱 실패:", err.message);
      return null;
    }
    throw err; // 예상치 못한 에러는 다시 던지기
  }
}
 
// finally — 리소스 정리에 사용
async function withDbConnection(operation) {
  const connection = await getDbConnection();
  try {
    return await operation(connection);
  } catch (err) {
    console.error("DB 작업 실패:", err);
    throw err;
  } finally {
    // 성공/실패 무관하게 항상 연결 해제
    await connection.close();
  }
}
 
// ❌ 흔한 실수 — 에러 삼키기 (Silent Failure)
try {
  await riskyOperation();
} catch (err) {
  // 아무것도 안 함 — 에러가 사라짐!
  // 이것보다는 최소한 로그라도 남겨야 한다
}
 
// ✅ 에러를 삼켜야 한다면 의도를 명시
try {
  await optionalOperation(); // 실패해도 괜찮은 작업
} catch (err) {
  // 의도적으로 무시: 이 작업은 실패해도 메인 플로우에 영향 없음
  console.warn("선택적 작업 실패 (무시됨):", err.message);
}

// 영수네 커뮤니티 — API 에러 계층 구조
 
// 기반 에러 클래스
class AppError extends Error {
  constructor(message, options = {}) {
    super(message);
    this.name = this.constructor.name; // "AppError", "ApiError" 등 자동 설정
    this.statusCode = options.statusCode ?? 500;
    this.userMessage = options.userMessage ?? "서버 오류가 발생했습니다.";
    this.isOperational = options.isOperational ?? true; // 예측 가능한 에러인가?
    this.context = options.context ?? {}; // 디버깅용 컨텍스트
 
    // V8에서 스택 트레이스 정확하게 유지
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, this.constructor);
    }
  }
}
 
// API 에러
class ApiError extends AppError {
  constructor(message, statusCode, options = {}) {
    super(message, { statusCode, ...options });
  }
}
 
// 인증/인가 에러
class AuthError extends ApiError {
  constructor(message = "인증이 필요합니다.", options = {}) {
    super(message, 401, {
      userMessage: "로그인이 필요한 기능입니다.",
      ...options,
    });
  }
}
 
class ForbiddenError extends ApiError {
  constructor(message = "권한이 없습니다.", options = {}) {
    super(message, 403, {
      userMessage: "이 기능을 사용할 권한이 없습니다.",
      ...options,
    });
  }
}
 
// 리소스 없음
class NotFoundError extends ApiError {
  constructor(resource = "리소스", options = {}) {
    super(`${resource}를 찾을 수 없습니다.`, 404, {
      userMessage: `요청한 ${resource}를 찾을 수 없습니다.`,
      ...options,
    });
  }
}
 
// 유효성 검사 에러
class ValidationError extends AppError {
  constructor(message, fields = {}) {
    super(message, {
      statusCode: 400,
      userMessage: "입력값을 확인해주세요.",
      context: { fields },
    });
    this.fields = fields; // 필드별 에러 메시지
  }
}

// 실제 사용 예시
 
async function updatePost(postId, data, currentUser) {
  // 유효성 검사
  if (!data.title?.trim()) {
    throw new ValidationError("제목은 필수입니다.", {
      title: "제목을 입력해주세요.",
    });
  }
 
  const post = await findPost(postId);
  if (!post) {
    throw new NotFoundError("게시글");
  }
 
  if (post.authorId !== currentUser.id && !currentUser.isAdmin) {
    throw new ForbiddenError("게시글 수정 권한 없음", {
      context: { postId, userId: currentUser.id },
    });
  }
 
  return await savePost(postId, data);
}
 
// 에러 처리 측
async function handleUpdatePost(req, res) {
  try {
    const result = await updatePost(req.params.id, req.body, req.user);
    res.json({ success: true, data: result });
  } catch (err) {
    if (err instanceof ValidationError) {
      return res.status(400).json({
        error: err.userMessage,
        fields: err.fields,
      });
    }
    if (err instanceof ForbiddenError) {
      return res.status(403).json({ error: err.userMessage });
    }
    if (err instanceof NotFoundError) {
      return res.status(404).json({ error: err.userMessage });
    }
 
    // 예상치 못한 에러 — 500 반환 + 로깅
    console.error("예상치 못한 에러:", err);
    res.status(500).json({ error: "서버 오류가 발생했습니다." });
  }
}

// Promise 에러 처리 — .catch 빠뜨리면 안 됨
fetchPost(1)
  .then((post) => renderPost(post))
  .catch((err) => {
    // 어느 단계에서 에러가 나도 여기서 처리
    showError(err.userMessage ?? err.message);
  });
 
// async/await 에러 처리
async function loadPost(postId) {
  try {
    const post = await fetchPost(postId);
    return post;
  } catch (err) {
    if (err instanceof NotFoundError) {
      return null; // 없는 게시글은 null 반환
    }
    throw err; // 다른 에러는 위로 전파
  }
}
 
// ❌ 에러 전파 누락 패턴 (흔한 실수)
async function badExample() {
  const posts = await fetchPosts(); // 에러 발생 시...
  // try/catch 없음 → 에러가 상위로 전파됨 (여기선 OK)
  return posts;
}
 
// 문제: 호출 측에서 처리하지 않으면
badExample(); // Promise rejection이 처리되지 않음 → UnhandledPromiseRejection
 
// ✅ 항상 에러 처리 보장
try {
  await badExample();
} catch (err) {
  handleError(err);
}

// 브라우저 — 전역 에러 캐치
 
// 동기 에러 (try/catch로 잡지 못한 것)
window.addEventListener("error", (event) => {
  console.error("전역 에러:", event.error);
  sendToErrorTracking({
    message: event.error?.message,
    stack: event.error?.stack,
    filename: event.filename,
    lineno: event.lineno,
  });
  // event.preventDefault()로 브라우저 기본 에러 로그 억제 가능
});
 
// 처리되지 않은 Promise rejection
window.addEventListener("unhandledrejection", (event) => {
  console.error("처리되지 않은 Promise 거부:", event.reason);
  sendToErrorTracking({
    message: event.reason?.message ?? String(event.reason),
    stack: event.reason?.stack,
    type: "UnhandledPromiseRejection",
  });
  event.preventDefault(); // 브라우저 콘솔 경고 억제
});
 
// Node.js 전역 에러 핸들러
process.on("uncaughtException", (err) => {
  console.error("처리되지 않은 예외:", err);
  // 로깅 후 프로세스 종료 (uncaughtException 후 상태 불안정)
  process.exit(1);
});
 
process.on("unhandledRejection", (reason, promise) => {
  console.error("처리되지 않은 Promise 거부:", reason);
  // 심각한 에러면 종료, 그렇지 않으면 계속 실행
});

// 에러 로깅 서비스 연동 패턴 (Sentry 등)
 
class ErrorService {
  static report(err, context = {}) {
    // 1. 콘솔 로그 (개발 환경)
    if (process.env.NODE_ENV === "development") {
      console.error("[ErrorService]", err, context);
    }
 
    // 2. 운영 에러 추적 서비스 (Sentry, Datadog 등)
    if (process.env.NODE_ENV === "production") {
      // Sentry.captureException(err, { extra: context });
    }
 
    // 3. 운영 가능한(Operational) 에러는 사용자에게 알림
    if (err instanceof AppError && err.isOperational) {
      return err.userMessage; // UI에 표시
    }
 
    return "알 수 없는 오류가 발생했습니다."; // 기술적 에러는 숨김
  }
}
 
// React Error Boundary 활용 (컴포넌트 에러)
class PostErrorBoundary extends React.Component {
  state = { hasError: false, error: null };
 
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
 
  componentDidCatch(error, errorInfo) {
    ErrorService.report(error, { componentStack: errorInfo.componentStack });
  }
 
  render() {
    if (this.state.hasError) {
      return <div>게시글을 불러오는 중 오류가 발생했습니다.</div>;
    }
    return this.props.children;
  }
}

// instanceof 체크 (일반적으로 안전)
if (err instanceof NotFoundError) { ... }
 
// name 기반 체크 (더 방어적)
if (err.name === "NotFoundError") { ... }
 
// 타입스크립트 + type guard 패턴 (권장)
function isNotFoundError(err: unknown): err is NotFoundError {
  return err instanceof NotFoundError || (err as any)?.name === "NotFoundError";
}

// 🐣 영철이의 코드
async function deletePost(postId) {
  try {
    await api.delete(`/posts/${postId}`);
    toast.success("삭제 완료!");
  } catch {
    // 아무것도 안 함
  }
}

// ✅ 리팩토링된 코드
async function deletePost(postId) {
  try {
    await api.delete(`/posts/${postId}`);
    toast.success("삭제 완료!");
  } catch (err) {
    // 1. 에러 타입별 사용자 메시지
    if (err instanceof AuthError) {
      toast.error("로그인이 필요합니다.");
      redirectToLogin();
      return;
    }
    if (err instanceof ForbiddenError) {
      toast.error("삭제 권한이 없습니다.");
      return;
    }
    if (err instanceof NotFoundError) {
      toast.error("이미 삭제된 게시글입니다.");
      return;
    }
 
    // 2. 예상치 못한 에러 — 로깅 + 일반 메시지
    console.error("게시글 삭제 실패:", err);
    ErrorService.report(err, { action: "deletePost", postId });
    toast.error("삭제 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
  }
}