프론트엔드에서의 에러 핸들링

본 내용은 10분 테코톡 티케님의 강의를 토대로 작성하였습니다.

 

1. 용어 정의

오류(에러)란?

• 실패, 실수, 또는 오차
• 하드웨어의 고장 또는 소프트웨어가 본래 동작을 할 수 없는 상태
  • 발생하는 시점 기준으로 컴파일 오류와 런타임 오류가 있음

 

컴파일 오류 vs. 런타임 오류

컴파일 오류	런타임 오류
코드가 컴파일 될 때 컴파일러가 해석하지 못해서 발생	프로그램이 동작할 때 발견할 수 있는 에러 자바스크립트에서는 예외라고 부름

 

자바스크립트에서의 에러

• dynamically typed language
  • 프로그램 동작 시 실시간으로 타입이 결정
• 모든 에러가 컴파일 단계가 아닌 런타임 환경에서 발생
• 사용자가 애플리케이션을 사용할 때 에러가 발생할 수 있음
• 타입스크립트를 활용하면 런타임 전에 미리 에러를 알 수 있음
  • 타입스크립트는 statically typed language
  • 자바스크립트의 superset

 

예외란?

• 일반적인 규칙이나 정례에서 벗어나는 일
• 런타임 오류와 관련된 것
• 예상하기 어렵거나 예상이 불가능한 이슈를 의미
• 자바스크립트에서는 에러 객체를 내보내게 됨
  • 처리를 하지 않았다면 프로그램은 종료

 

에러 핸들링이란?

• 오류가 발생할 수도 있고 아닐 수도 있는 것을 '예외'구문으로 처리하여 프로그램이 예상치 못하게 종료되거나 제 기능을 못하는 것을 방지
• 예외로 인해 발생한 Error 객체를 핸들링하는 것
  • Error 객체: name과 message라는 주요 프로퍼티를 가진 객체

 

2. 에러핸들링이 필요한 이유

• 에러를 인지시켜 다른 행도을 할 수 있도록 유도
  • 서비스에 대한 부정적인 경험을 막기
• 서비스의 트랜젝션에 영향을 미쳐 장애를 일으킬 수 있는 상황이 발생하는 것을 막기

 

3. 에러의 분류

• 해결 가능한 에러
  • 일시적인 네트워크 에러
• 예상 가능한 에러
  • 인증 에러
  • 잘못된 접근으로 인한 에러
  • 없는 페이지를 접근했을 때의 에러
  • 애플리케이션에서 정의한대로 API 응답의 상태 코드로 예측할 수 있는 에러
  • 악의적인 목적으로 접근했을 때 이를 보완하는 코드가 프로그램에 내재되어 있지 않은 경우
• 예측할 수 없는 에러
  • 브라우저에서 발생하는 에러
  • 서비스 장애 상황
  • 일시적인 네트워크가 불안정한 상황에서 발생하는 에러
  • 500대 에러
• 해결 불가능한 에러
  • 사용자의 고의적인 에러
  • 악의적인 목적의 접근 또는 사용

 

4. 에러핸들링 예시

Try-catch-finally

• Try
  • 에러가 발생할 수도 있는 로직 작성
  • 에러를 직접 throw 할 수 있음
• catch
  • 에러 잡기
• Finally
  • 로직의 성공 & 실패 여부와 상관없이 무조건 실행되는 부분

try {
  console.log('try');
} catch (error) {
  console.error('error');
} finally {
  console.log('finally');
}

 

비동기 API 통신에서의 에러 핸들링

• API를 통해 통신할 때 상태 코드를 통해서 예외 상황 구분
  • 하나의 상태 코드에 다양한 상황이 있을 수 있음
• 에러코드, 에러 메세지를 통해 명확한 에러 발생 원인을 알 수 있음
  • 에러코드: 상태 코드와 다른 커스텀한 문자열 또는 번호
• API 응답에 관해 에러코드, 메시지를 활용하여 사용자에게 가이드 또는 안내를 줄 수 있음
• 개발자 입장에서 어떤 오류가 발생하고 있는지 쉽게 모니터링 할 수 있음

 

잘못된 페이지나 없는 페이지를 접근

• 커스텀한 페이지를 보여줄 수 있음
• 리다이렉트로 다른 페이지로 이동시킬 수 있음
• 사용자에게 접근할 수 없다는 의미 전달

 

예상을 할 수 없는 에러 - 모니터링

• 일시적인 에러임을 알리기
• 고객센터에 연락할 수 있는 창구 마련
• 개발 환경에서는 디버깅이 편하도록 콘솔에러를 통해서 에러를 확인
• 모든 에러를 모니터링하기 위해서 센트리 도구 활용
  • 실제 배포 환경에서 에러를 포함한 로깅

 

5. 에러핸들링에 대한 고찰

try-catch 남용을 지양

• catch에 넘겨지는 error 객체의 타입을 보장할 수 없음
• 오류를 해결하는 것이 아닌 숨기는 것
• 코드의 가독성이 떨어지고 유지보수가 어려움
• 좋은 예시
  • 성공하는 여부에 대해서만 다루고, 실패하는 경우에는 외부에 위임
  • 유의미한 에러를 내보낼 수 있는 범위에서 에러를 핸들링할 것
  • 유의미한 결과를 내보낼 수 없다면, 에러를 터트릴 것(추후에 모니터링 하기)

한 프로그램 내에서 일관된 에러 핸들링을 하여 예측할 수 없는 상황에 대비하여 모니터링 하여 견고한 프로그램을 만들어 내자

 

Reference

[10분 테코톡] 티케의 프론트엔드에서의 에러 핸들링