에러 핸들링

mangojang·2023년 2월 6일

JavaScript

차근차근 쌓아가는 JS 기초

목록 보기

6/20

✍️ 에러 핸들링은 항상 고민이 많이 되는 부분인 것 같다. 분기 처리 할 때 필요한 에러 객체에 관한 내용과, 커스텀 에러를 통한 활용 방법에 대해 정리해 보았다.

try…catch

기본형

try 블록 안에서 실행된 코드에서 error 발생 시, catch문 에서 걸러 짐. → catch문에서 에러 핸들링 실행.
try 블록 안에서 실행된 코드에서 error 가 없다면, 바로 try…catch문을 나감.

try{
	// 코드 실행
}catch(error){
	// 에러 핸들링 
}

⚠️ try…catch 문 안의 setTimeout은 error를 못 잡음.
➡️ setTimeout에 넘겨진 익명 함수는 엔진이 try…catch를 떠난 다음에서야 실행 되기 때문.

setTimeout 에서의 error 를 잡으려면 setTimeout 안에서 try…catch 문을 사용 해야함.

setTimeout(function() {
  try {
	   containError();
  } catch(error) {
    console.log(error);
  }
}, 1000);

finally

try 블록 안에서 실행된 코드가 error가 있던 없던 제일 마지막에 실행 됨.
try 구문에서 return을 실행 하여도, finally 구문이 먼저 실행 됨.

try{
	// 코드 실행
}catch(error){
	// 에러 핸들링 
}finally{
	// 마지막에 항상 실행
}

에러 객체

속성

name : 에러 이름. error.name

오류 유형
- EvalError: eval() 에서 발생한 에러
- RangeError: 숫자 변수나 매개 변수가 유효한 범위를 벗어났음을 나타내는 에러
- ReferenceError : 잘못된 참조를 했을 때 나타나는 에러
- SyntaxError : eval()이 코드를 분석하는 중 잘못된 구문을 만났을 때 나타나는 에러
- TypeError: 변수나 매개변수가 유효한 자료형이 아님을 나타나는 에러
- URIError: encodeUI() 나 decodeURI() 함수에 부적절한 매개변수를 제공했을 때 발생하는 에러
- AggregateError: 하나의 동작이 여러 개의 오류 발생시키는 경우
- InternalError: Javascript 엔진 내부에서 오류가 발생 했을때 나타남.
message : 에러 상세 내용을 담고 있음. error.message
stack: 현재 호출 스택. 에러를 유발한 중첩 호출들의 순서 정보를 가지고 있음. error.stack

try{
	// 코드 실행
}catch(error){
	// 에러 핸들링 
	alert(error.name);
	alert(error.message);
	alert(error.stack);

}

생성자

new Error(message)

message : 에러 메시지

throw new Error("에러가 났다!")

throw

에러 객체를 던지는 키워드
try 문에서 throw 연산자 사용 시, 바로 catch 문으로 넘어감.

let json = '{ "age": 30 }';

try {

  let user = JSON.parse(json); 

  if (!user.name) {
		// 조건에 맞지 않을 경우, 에러를 던져 버림.-> catch 문 진행. 
    throw new SyntaxError("불완전한 데이터: 이름 없음"); // (*)
  }
	
	// 위의 조건에서 걸러지기에 alert(user.name) 은 실행 되지 않음.
  alert( user.name );

} catch(e) {
  alert( "JSON Error: " + e.message ); // JSON Error: 불완전한 데이터: 이름 없음
}

custom error

custom error 를 활용하면 에러 핸들링이 수월해짐.

로그인 로직에서 사용하는 경우

에러 객체를 생성하고, name 속성을 주어 분기 처리

function findUser(id, password){
	User.findById(id, function(err,user){
		if(err){
			throw err;
		}
		//1. user가 없는 경우- 회원이 아닌경우
		if(!user){
			//1-1. 에러객체를 생성하고, 분기를 탈 name 속성을 추가해 줌.
			let err = new Error("아이디에 해당하는 회원이 없습니다.")
			err.name = 'NoUserError';
      throw err;
		}
		//2. password 일치 여부 확인
		if (user.password === password) {
			//2-1. password가 같은 경우 - 로그인 성공
      return '로그인 성공';
    } else {
			//2-2. password가 다른 경우
			// 에러객체를 생성하고, 분기를 탈 name 속성을 추가해 줌.
      let err = new Error('비밀번호가 틀렸습니다.');
      err.name = 'WrongPasswordError';
      throw err;
    }
	
	});
}

try {
  findUser('mangojang', '12345');
} catch (e) {
	//3. 에러 객체의 name 속성에 따라 분기 처리 해줌.
  if (e.name === 'NoUserError') {
    console.log('회원이 없을 때 에러를 처리');
  } else if (e.name === 'WrongPasswordError') {
    console.log('비밀번호틀렸을 때 에러를 처리');
  } else {
    console.log('다른 에러');
  }
}