프론트엔드와 에러 핸들링

 

Never be entirely idle; but either be reading, or writing, or praying or meditating or endeavoring something for the public good.

호기심

 

< 목차 >
1. 정의
2. 왜 에러 핸들링을 해야할까?
3. 에러 핸들링
4. try - catch

 

1. 정의

• 에러(오류) : 하드웨어나 소프트웨어가 본래의 동작을 수행할 수 없는 상태
• 컴파일 에러 : 코드가 컴파일(해석할 수 있는 언어로 변경되는 과정)되는 과정 중 발생하는 에러
• 런타임 에러 : 프로그램이 동작하는 과정 중 발생하는 에러
• 예외 : 일반적으로 런타임 에러와 관련된 예상하기 어렵거나 불가능한 이슈
• 에러 핸들링 : 예외로 인해 발생한 에러 객체를 다루는 것

일반적으로 자바스크립트는 모두 런타임에서의 에러다.

 

2. 왜 에러 핸들링을 해야할까?

• 자바스크립트는 에러가 발생하면, 작업이 즉시 중단된다. (더 이상 스크립트를 읽어나가지 않는다.)
• 스크립트가 중단되면, 개발자 도구를 통해 확인하지 않는 이상, 사용자는 현재 상태를 알 수 없다.
• 사용자에게 에러 상황을 알려주고, 에러에 대해 적절한 안내를 해주기 위해 필요하다.

3. 에러 핸들링

즉, 에러 핸들링은 사용자가 긍정적인 경험을 할 수 있도록 도와주는 역할을 한다.

발생한 에러에 대해, 사용자에게 얼마나 적절한 피드백을 제시하느냐가 좋은 에러 핸들링이라고 할 수 있겠다.

사용자를 생각하는 에러 메시지를 위해 아래 두가지를 고려하자.

• 문제 발생과 왜 그 문제가 발생했는지 안내해준다.
• 문제에 대한 해결책을 제시한다.

예상 가능한 에러
1. 잘못된 입력값이 전달되는 경우
2. 인증받지 못한 경로/값을 받는 경우
3. 존재하지 않는 페이지로 접근하는 경우
4. 그 외 미리 설정해놓은 API응답 에러

예상 가능한 에러는 그 상황에 맞게 사용자가 적절한 조치를 할 수 있도록 안내하고 유도해야한다.

예시 1

예시 2

예시 3

예상 불가능한 에러
1. 갑작스러운 사용량 증가로 네트워크가 불안정한 경우
2. 서버상태가 불안정한 경우(5xx 에러)

예상 불가능한 에러는 일시적인 에러로 인해 발생할 수도, 치명적인 이유에 의해 발생할 수도 있다.

사용자에게 파악할 수 없는 원인(혹은 일시적인 문제)임을 알리고, 후속 조치를 할 수 있도록 알려야 한다.

'일시적인 오류로 인해 불러오지 못했습니다. 잠시 후 다시 시도해주세요.'

'알 수 없는 오류가 발생했습니다. 같은 상황이 반복되는 경우 고객센터로 문의해주세요. 고객센터 : 070-0000-0000'

 

4. try - catch(err)

try - catch(err)를 통해, 런타임 에러 핸들링을 할 수 있다.

1. try {...} 안의 코드 실행
2. 에러가 없는 경우, try 안의 코드가 전부 실행되고, catch 블록은 건너 뜀
3. 에러가 있는 경우, try 안 코드의 실행이 중단되고, catch 블록 안의 코드가 실행 (이때, catch는 에러 객체를 포함)
   • 에러 객체(err) : 무슨 일이 일어났는지에 대한 설명이 담겨 있다. (변수명은 자유)
   • 에러 객체는 두 가지의 주요 프로퍼티를 가진다. (name, message)

console.log(err.name);
console.log(err.message);

4-1. finally

finally는 에러의 발생 여부와 관계없이 try절 이후, 혹은 catch절 이후 실행된다.

try {
	// 에러를 검사할 코드 작성
    ...
} catch(err) {
	// 에러가 발생했을 경우 코드 작성
    ...
} finally {
	// 모든 상황에서 실행할 코드 작성
    ...
}