← 전체 글로 돌아가기

웹 개발

배포 전에 unknown 에러를 피하기

TypeScript에서 catch 블록의 error 타입을 제대로 다루지 않으면 배포 후 런타임 에러가 난다. unknown 타입 체크는 선택이 아니다.

catch 블록에서 error를 any로 받고 바로 error.message를 접근했다가 배포 환경에서 화면이 깨진 경험이 있다. error가 객체가 아닐 수도 있다는 걸 간과했다.

catch 블록에서 error는 unknown

JavaScript에서 throw 될 수 있는 건 Error 객체뿐만 아니다:

throw 'string error';
throw 42;
throw null;
throw { custom: 'object' };

모두 유효한 코드다. 따라서 catch 블록에서는 error를 unknown으로 받아야 한다.

안전한 error 타입 가드

먼저 error가 Error 객체인지 확인하자:

try {
  // some code
} catch (error) {
  if (error instanceof Error) {
    console.error(error.message);
  } else {
    console.error('Unknown error:', error);
  }
}

더 복잡한 경우

HTTP 요청 에러나 커스텀 에러 객체를 다룰 때는 더 신경 써야 한다:

function getErrorMessage(error: unknown): string {
  if (error instanceof Error) return error.message;
  if (typeof error === 'string') return error;
  if (typeof error === 'object' && error !== null && 'message' in error) {
    return (error as any).message;
  }
  return 'Unknown error occurred';
}

빌드 시 타입 체크

npm run build

빌드할 때 npx tsc --noEmit으로 타입 검사만 먼저 하는 것도 좋다. 런타임에 터지는 에러를 미리 잡을 수 있다.

로그에 기록할 때

error를 로그에 남길 때도 안전하게:

const errorLog = error instanceof Error
  ? { message: error.message, stack: error.stack }
  : { raw: error };

console.error(JSON.stringify(errorLog));

배포 환경에서의 문제

로컬에서는 대부분의 error가 Error 객체라서 문제를 못 본다. 하지만 배포 환경에서는:

  • 네트워크 라이브러리에서 다양한 형태의 에러가 날 수 있다
  • 제3의 서비스 API에서 예상 못한 형태의 에러가 올 수 있다
  • 사용자 입력이나 타사 스크립트에서 뜻밖의 에러가 나올 수 있다

작은 타입 체크가 배포 후 골치 아픈 버그를 방지한다.