FE - 에러 핸들링

에러핸들링이란

예상하거나 예상치 못한 상황에서 에러가 발생했을 때 자바스크립트에서 지원하는 기본적인 기능들로 예외 처리를 하여 어플리케이션이 중단되는 것을 막고, 실행 흐름이 이어 갈 수 있도록 복구하는 것을 말합니다.

 

 

에러핸들링이 왜 중요한가?

1. 안정적인 서비스

•  에러 핸들링이 되어있지 않다면 어플리케이션의 규모가 커지고 코드양이 많아져 로직이 복잡해진다면 예외나 에러가 발생할 상황이 많아지고, 관리하기 힘들어진다.

2. 사용자 경험

• 에러 핸들링이 되어있지 않은 상태에서 서버와 통신하는 과정에 에러가 발생했을 때 어플리케이션이 중단되고, 사용자는 멈춰있는 화면을 보게 된다.
• 시간이 지날수록 사용자는 서비스를 이탈할 가능성이 높아진다.

 

에러의 종류

1. 컴파일 에러

• 자바스크립트 엔진이 코드를 읽으면서 구문에 에러가 없는 지 검사하고 구문에 에러가 있다면 에러를 방출한다.

2. 런타임 에러

• 코드가 실행되고 발생하는 에러 
• 자바스크립트는 코드를 일고 실행시키기 때문에 처음에 읽는 과정에서 에러가 발생한다면 실행흐름을 복구시킬수 없다
• 즉, 핸들링이 불가능해진다.

 

자바스크립트 에러 객체 종류

• Error : 기본 적인 Error 객체
• SynTaxError: 문법이 틀렸을 때 발생
• ReferenceError: 잘못된 참조를 했을 때 발생
• RangeError: 숫자 변수가 범위를 벗어났을 때 발생

등등..

 

 

에러 발생 과정

실행 컨텍스트 과정에서 에러가 발생하는 코드를 실행시키려고 할 때 

자바스크립트 엔진은 

어떤 에러인지와 에러 메시지, 그리고 스택 등이 담겨있는 new Error 객체를 생성하여 Throw한다.

 

Throw되면 호출함수의 되감기 과정이 발생하여 전역 실행컨텍스트까지 도달하면 전역 에러를 발생시키고,

프로그램은 종료된다.

 

 

에러 핸들링 방법

try/catch

try/catch내에서 에러가 Throw되면

호출 함수의 되감기 과정이 발생되고

try/catch 함수의 try문이 있는 곳까지 도달하게 됩니다.

try문을 만나게 되면 catch에 에러를 전달하고,

에러가 콘솔에 찍히게 됩니다.

 

비동기 로직에서 try/catch 주의할 점

만약 비동기 호출에서 await와 같은 비동기 처리 패턴이 없다면

try/catch내에서 비동기 호출이 실행될 때 동안 try문이 종료하게 된다.

만약 비동기 호출에서 에러가 발생하면 전역에러가 발생하게 된다.

 

 

try/catch를 많이 사용하면 좋지 않을까?

try/catch문을 많이사용하게 되면 

분기처리가 되지않기 때문에 어디서 에러가 발생하는지 파악하기 힘들고

빠르게 에러를 처리하고, 유지보수하기에 걸림돌이 될 수 있습니다.