오류(에러)란?
사전적 정의로 실패, 실수 또는 오차를 의미합니다.
컴퓨터 분야에서는 하드웨어의 고장 또는 소프트웨어가 본래의 동작을 할수없는 상태소프트웨어의 오류는 다시 발생하는 시점을 기준으로 컴파일에러와 런타임 에러로 나눌 수 있습니다.
컴파일 오류 : 문법을 잘못 작성하는 듯 코드가 컴파일 될때 컴파일러가 해석하지 못해서 발생합니다.
런타임 오류 : 프로그램이 동작할 때 발견할 수 있는 에러 쉽게 트라이캐치에서 잡히는 에러를 의미합니다.
자바스크립트에서는 런타임에러를 예외라고 부릅니다.
자바스크립트 언어는 Dynamic Typed Language이기 때문에 프로그램이 동작할 때 실시간으로 Type이 결정되어서 모든 에러가 컴파일 단계가 아닌 런타임 환경에서 발생할 수 있습니다.
그래서 다른 정적언어를 사용했더라면 코드를 작성하면서 잡을 수 있는 에러임에도 불구하고 최악의 경우 사용자가 어플리케이션을 사용할 때 에러가 발생합니다.
따라서 컴파일 환경에서 타입에 관련된 에러를 잡을 수 있도록 도와주는 Statically Typed Language인 TypeScript의 도움을 받을 수 있습니다.
- 타입 스크립트도 자바스크립트의 superset이기 때문에 완벽하게 타입에 관한 에러처리가 가능한 것은 아닙니다.
즉, 타입스크립트만 쓰면 문제가 없어 라기보단 타입스크립트를 잘 활용하면 런타임 전에 미리 알 수 있는 오류도 있습니다.
자바스크립트(Dynamically Typed Language) : 모든 에러가 컴파일 단계가 아닌 런타임 환경에서 발생한다.
타입스크립트(Statically Typed Language) : Typescript를 제대로 활용하면 런타임 전에 미리 알 수 있는 오류도 있다.
예외란?
사전적 정의로 일반적인 규칙이나 정례에서 벗어나는 일
프로그래밍에서 말하는 예외는 일반적으로 런타임 오류와 관련된 것으로 예상하기 어렵거나 예상이 불가능한 이슈를 의미합니다.이러한 예외가 발생하면 자바스크립트에서는 에러 객체를 내보내고 처리를 하지 않았다면 프로그램은 종료됩니다.
우리는 오류가 발생할 수 도 있고 아닐 수도 있는 것을 예외 구문으로 처리하여 프로그램이 예상치 못하게 죽게 되거나 제대로 작동을 못 하는 것을 방지할 수 있습니다.
즉, 예외로 인해서 발생한 에러 객체를 핸들링 하는 것을 에러 핸들링이라고 합니다.
그래서 보통 자바스크립트 에러라고 하면 런타임 환경에서의 에러 즉, 예외를 의미하여 사용하기도 합니다.
왜 에러핸들링이 필요한 이유?
에러에 대해 인지시키고 다른 행동을 할 수 있도록 유도하여 서비스에 대한 부정적인 경험을 막을 수 있습니다.
정확한 에러 핸들링을 하지 않는다면 단순히 정보를 요청하는 것이 아니라 데이터베이스에 정보를 넣는 등의 작업일 경우 서비스의 트랜잭션에 영향을 미쳐 서비스 장애를 일으킬 수 있는 상황까지 이어질 수 있습니다.
에러의 분류
출처 : jbee블로그, 클라이언트의 사용자 중심 예외 처리
(https://jbee.io/react/error-declarative-handling-2/)
분류표에 맞춰 모든 에러가 명확하게 나눠지는 것은 아닙니다.
예상이 가능한 에러
- 인증에러
- 없는 페이지를 접근했을 때의 에러
- 어플리케이션에서 정의한대로 API응답의 상태 코드로 예측할 수 있는 에러
- 악의적인 목적으로 접근했을 때 이를 보완하는 코드가 프로그램에 내제되어 있지 않은 경우
예상이 불가능한 에러
- 서비스 장애
- 너무많은 사람들이 몰려 일시적인 네트워크가 불안정한 상황에서 발생하는 에러
- 500대 에러
Try-Catch-Finally
예외처리에 가장 널리 사용되는 트라이 캐치 구문
Try안에는 에러가 발생할 수 도 있는 로직을 작성하고 만약 에러가 발생하거나 Try에서 에러 객체를 Throw 했다면 Catch가 받습니다.
자바 스크립트에서 예외가 발생하면 에러객체를 던진다. 이는 네임과 메시지라는 주요 프로퍼티를 가진 객체입니다.
Catch는 에러객체를 인자로 받습니다.
그리고 오류 여부에 상관없이 수행해야하는 로직이 있다면 Finally를 활용할 수 있습니다.
에러핸들링 예시
- 비동기 API 통신에서의 에러핸들링
일반적으로 API를 통해 통신할 때 상태코드를 통해서 예외 상황을 구분할 수 있습니다.
하지만 하나의 상태코드에는 다양한 상황이 있을 수 있습니다.
이때 에러코드 에러메시지를 통해서 보다 명확한 에러 발생 원인을 알려 줄 수 있습니다.
에러코드는 보통 상태코드와 다른 커스텀한 문자열 또는 번호를 의미합니다.
잘못된 페이지나 없는 페이지를 접근
잘못된 페이지이거나 없는 페이지를 접근할 경우 커스텀한 404 페이지를 보여주거나 다른 페이지로 넘어갈 수 있도록 리다이렉트 하는 등의 안내를 통해서 사용자에게 접근할 수 없다라는 의미를 알려 줄 수 있습니다.
예상할 수 없는 에러 - 모니터링
- 일시적인 에러인 경우
사용자에게 일시적인 문제임을 알려야 하며 사용자의 입장에서 빠르게 해결하지 못하는 경우
고객센터로 문의할 수 있는 경로를 열어두는 것도 방법입니다.
또한, 개발자의 입장에서도 주기적인 모니터링을 통해서 추후에 계속해서 같은 에러가 발생하지 않도록 예외처리를 해야합니다.(센트리도구 활용 등)
무조건 Try Catch하는 것을 지양합니다.
-
Catch에 넘겨지는 에러 객체의 타입을 보장할 수 없습니다.
캐치에 넘어가는 에러가 분기처리를 하지 않으면 무엇인지 명확히 알 수 없습니다. -
오류를 해결하는 것이 아닌 숨기는 것
모든 예외 사항에 대해서 캐치를 했을 경우 사용자에게는 에러가 보이지 않겠지만 이는 오류를 해결하는 것이 아닌 숨기는 것에 불가합니다.
만약 에러를 분리하기 위해서 Catch안에서 Rethrow를 하거나 중첩 Try-Catch를 하게 되면 나중에 어플리케이션이 꺼졌을 때도 코드의 가독성은 훨씬 떨어지게 됩니다.
const checkAuth = async (acessToken_ => {
const user = await login(accessToken);
const role = await getRole(user);
return role;
};
const UserPage = () => {
try {
checkAuth(accessToken);
}catch(error) {
// 에러처리
console.error(ERROR_MESSSGE[error.code] ?? ERROR_MESSAGE.DEFAULT);
}
};성공하는 여부에 대해서만 다루고 실패하는 경우는 외부에 위임
성공하는 사례와 실패하는 사례를 구분하여 작성하면 코드의 가독성과 유지보수성이 높아지게 됩니다.
엑세스 토큰에서 오류가 없다면 실제 checkAuth에서는 오류가 날 일이 적어집니다.
필요에 의해선 checkAuth안에서 예외 처리를 하기도 하지만 환경에 의해서는 엑세스 토큰이 절대 오류가 나지 않는 개발자에게는 불필요한 코드를 더 작성하는 상황일 수도 있습니다.
이에 외부로 실패하는 경우를 위임하여 다양한 방법으로 에러 핸들링을 할 때 유지보수성을 높일 수 있도록 하는 것이 추천하는 에러핸들링 입니다.
-> 오류가 더 이상 전파 되지 않는 범위에서 유의미한 에러를 내보낼 수 있는 범위에서 에러핸들링을 해야합니다.
에러를 통해서 유의미한 결과를 내보낼 수 없다면 차라리 미래를 위해 에러를 터트리고 추후에 모니터링을 통해 원인을 찾아내는 것이 더 유지보수를 용이하게 하고 견고한 코드를 만들어 내는 길입니다.
출처 :[10분 테코톡] 🌼 티케의 프론트엔드에서의 에러 핸들링
(https://www.youtube.com/watch?v=FXtooPhupr4&list=WL&index=37)
참조 :
클라이언트의 사용자 중심예외 처리, 코어자바스크립트 'try-catch'와 에러 핸들링
https://jbee.io/react/error-declarative-handling-2/
에러처리를 어떻게 하면 좋을까
https://rinae.dev/posts/hot-tohandle-errors-1/
비동기 프로그래밍과 실전 에러 핸들링
https://www.youtube.com/watch?v=o9JnT4sneAQ
프론트엔드 웹서비스에서 우아하게 비동기 처리하기
https://www.youtube.com/watch?v=FvRtoViujGg
