개발공부/CS

[CS] 프론트엔드 에러 핸들링

햄❤️ 2021. 9. 18. 20:48
728x90

https://www.youtube.com/watch?v=FXtooPhupr4 

 

우아한 테크톡의 프론트엔드 에러 핸들링에 대한 영상을 보고, 이 부분에 대해 좀 더 공부해보고 싶었다!! 

 

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

 

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

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

 - 런타임 오류: 프로그램이 동작할 때 발견할 수 있는 에러 -> 자바스크립트에서 이를 예외라고 부른다.

자바스크립트 언어는 동적 타입 언어이기 때문에 프로그램이 동작할 때 실시간으로 타입이 결정되어서 모든 에러가 컴파일 단계가 아닌 런타임 환경에서 발생한다. 이를 방지하려면 타입스크립트를 사용

 

✨ 예외: 런타임 오류와 관련되어 예상하기 어렵거나 예상이 불가능한 이슈

 

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

 - 에러에 대한 인지, 고객이 무슨 상황인지 모르는 것을 방지 = 서비스에 대한 부정적인 경험을 막는다.

 - 데이터베이스에 정보를 넣는 경우, 서비스 트랜잭션에 영향을 미쳐 서비스에 장애를 일으킨다. 

 

✨ 에러 분류

 예상이 가능한 에러 VS 예상이 불가능한 에러 

1) 예상 가능 에러 

 -> 인증에러, 없는 페이지 접근했을 때, API 응답의 상태코드로 예측할 수 있는 에러, 악의적 목적으로 접근했을때 보완할 수 있는 코드가 프로그램에 내재되어있지 않을 때

2) 예상 불가능 에러

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

 

  에러 핸들링 방법

  try-catch 

 - 오류를 해결하는 것이 아니라 숨기는 것으로 무조건적인 try-catch를 지양, 중첩 try-catch는 가독성 저하

 - 유의미한 에러를 내보낼 수 있는 범위에서 에러 핸들링, 모니터링을 통한 에러 원인을 찾는 것이 중요하다. 

 

 

  현업에서 에러 핸들링 

   - 현업에서 에러 핸들링..... 예측 가능한 에러에 대한 처리를 했다.

중복탭에에서 로그아웃 된거, 크롭탭 아닐 경우 유저가 에러를 인지하고 어떻게 조치되는지를 보여주는 화면들?

다만 예측 불가능한 에러에 대해 우리는 어떻게 처리하고 있는지 잘 모르겠다. 이 부분도 현업 코드를 잘 뜯어보거나 물어봐야할 것 같다. 없다면 이 부분도 어떻게 할지 체크해봐야겠다. 

728x90