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

윤영훈·2021년 9월 15일
0

📌 용어정의

오류란?

  • 하드웨어의 고장 또는 소프트웨어가 본래의 동작을 할 수 없는 상태

소프트웨어의 오류는 컴파일 오류런타임 오류로 나뉩니다.

컴파일 오류 : 코드가 컴파일 될 때 컴파일러가 해석하지 못해서 발생

런타임 오류 : 프로그램이 동작할 때 발견할 수 있는 에러

자바스크립트에서는 런타임에러를 예외라고 부릅니다.

예외를 알아보기전에, 자바스크립트 언어와 컴파일 오류에 대해서 알아보자면

자바스크립트 언어는 동적 타입 언어이기 때문에 프로그램이 동작할 때 실시간으로 타입이 결정되어서 모든 에러가 컴파일 단계가 아닌 런타임 환경에서 발생할 수 있습니다.

예외란?

  • 런타임 오류와 관련된 것, 예상하기 어렵거나 예상이 불가능한 이슈를 의미

📌 에러핸들링이 필요한 이유

  • 에러에 대한 인지시키기, 다른 행동을 할 수 있도록 유도 ⇒ 서비스에 대한 부정적인 경험을 막기
  • 단순히 정보를 요청하는 것이 아니라 데이터베이스에 정보를 넣는 등의 작업일 경우 서비스 트랜잭션에 영향을 미쳐 서비스 장애를 일으킬 수도 있음

📌 에러의 분류

예상이 가능한 에러

  • 인증에러
  • 없는 페이지를 접근했을 때의 에러
  • 어플리케이션에서 정의한대로 API 응답의 상태 코드로 예측할 수 있는 에러
  • 악의적인 목적으로 접근했을 때 이를 보완하는 코드가 프로그램에 내제되어 있지 않는 경우

예상이 불가능한 에러

  • 서비스 장애
  • 일시적인 네트워크가 불안정한 상황에서 발생하는 에러
  • 500대 에러

📌 에러핸들링 예시

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

일반적으로 api를 통해 통신할때 상태코드를 통해 예외 상황을 구분할 수 있습니다. 하지만 하나의 상태코드에 다양한 상황이 있을 수 있습니다.

이 때, 에러코드 에러메시지를 통해 보다 명확한 에러 발생 원인을 알려 줄 수 있습니다.

에러코드는 보통 상태 코드와 다른 커스텀 문자열 또는 번호를 의미합니다.

Facebook에서의 예시 )

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

  • 일시적인 에러임을 알리기
  • 고객센터에 연락할 수 있는 창구를 마련하기

📌 에러핸들링에 대한 고찰

무조건 try-catch 하는것을 지향

  • catch에 넘겨지는 error 객체의 타입을 보장할 수 없음
  • 오류를 해결하는 것이 아닌 숨기는 것

  • 유의미한 에러를 내보낼 수 있는 범위에서 에러 핸들링
  • 유의미한 결과를 내보낼 수 없다면 에러를 터트리자

추후에 모니터링을 해서 원인을 찾아내는 것이 더 유지보수를 높이고 견고한 코드를 만들어 낼 수 있다.

참고 [10분 테코톡] 🌼 티케의 프론트엔드에서의 에러 핸들링 -https://www.youtube.com/watch?v=FXtooPhupr4&t=16s

0개의 댓글