에러처리와 디버깅
에러처리
try-catch, finally문
자바의 try-catch와 비슷합니다.
try{
//에러 발생예상 코드
}catch(error){
//에러 시 코드
} finally {
//에러 발생, 미발생과 상관없이 위에서 실행 후 마지막으로 실행되는 코드
}
finally문은 아예 생략해도 상관없습니다.
catch문의 error에는 에러 타입에 따른 처리를 할 수 있습니다.
에러타입
- Error : 다른 에러가 상속하는 타입
- EvalError : eval() 함수 사용시 에러
- RangeError : 숫자가 범위를 벗어날 때
- ReferenceError : 객체를 예상한 컨텍스트에 이외의 것이 들어갔을때 발생
- SyntaxError : 문법에러
- TypeError : 예기치 못한 타입의 변수 사용, 존재하지 않는 메서드 접근 등 다양하게 발생
- URIError : encodeURI(), decodeURI()에 잘못된 URI전달
//아래와 같이 에러타입 판단
try{
someFunction();//에러발생
}catch(error){
if(error instanceof TypeError){
//TypeError처리
}else if (error instanceof ReferenceError){
//ReferenceError 처리
}else {
//기타 에러 처리
}
}
try-catch의 경우 개발자가 컨트롤 할 수 없을 때 이상적이며(라이브러리 사용 시 등), 직접 작성한 코드에서 특정 상황에 에러가 발생한다면 그건 적절하게 데이터 타입을 체크 하는등 해서 해결해야지 그런 상황에 try-catch사용은 권장하지 않습니다.
에러 반환
try-catch의 동반자인 throw연산자로 에러반환을 합니다.
아무값을 넣어줘도 됩니다.
throw 1234;
throw "hi";
throw false;
throw { name: "bye" };
throw new SyntaxError("문법이 이상");
throw new TypeError("타입의 상태가..?");
위와같이 메시지를 설정한 커스텀 에러를 만들 수 있습니다.
아래와 같을때 사용할 수 있습니다.
function sortfunction(values){
if (!(values instanceof Array)){
throw new Error("process(): Argument must be an array.");
}
//정렬
}
위와같이 적절한 정보를 제공하여 코드를 관리하기 쉬워집니다.
커스텀에러냐 try-catch냐 그것이 문제로다
어떤상황에 커스텀에러이고 어떤상황에 try-catch를 사용하는지 오묘합니다.
최선의 기준은 해당 에러를 어떻게 처리할지 정확히 알고 있느냐 입니다.
try-catch의 목적은 브라우저가 에러를 기본 방식대로 처리하지 못하게 막는것이고 커스텀 에러의 목적은 일어난 이유를 제공하는것입니다.
에러 처리 전략
- 에러가 생길 수 있는 곳 찾기
- 타입 강제 에러
- 데이터 타입 에러
- 통신 에러
심각한 에러와 그렇지 않은 에러 구별
심각하지 않은 에러
- 사용자의 주요 작업을 방해하지 않는 에러
- 페이지의 일부분만 영향을 끼치는 에러
- 복구 가능한 에러
다시 시도해보면 일어나지 않을 수 있는 에러
심각한 에러
- 애플리케이션 진행을 완전히 막는 에러
- 사용자의 주요 목적을 뚜렷히 방해하는 에러
- 다른 에러를 일으키는 에러
- 서버에 에러 기록
위험도와 에러메시지 등의 정보를 저장하는 에로 로그 시스테 구축
공통 API를 통해 정지거으로 로그에 기록
복잡한 웹어플리케이션의 경우 자바스크립트 에러도 서버에 기록하길 권장
디버그 테크닉
콘솔에 기록
- console.error(message) : 에러 메시지 기록, 빨간색
- console.info(message) : 정보 메시지 기록
- console.log(message) : 일반 메시지 기록
- console.warn(message) : 경고 메시지 기록, 노란색
각 브라우저에 콘솔창에 메시지가 노출됩니다.
코드 디버그가 매우 편하긴 하나 배포 시 반드시 메시지를 모두 제거해줍시다.
콘솔에 메시지를 기록하는것이 alert창보다는 비동기적 프로세스에 실행 흐름에 끼치는 문제가 없으므로 권장합니다.
페이지에 메시지 기록
자바스크립트 콘솔을 지원하지 않는 다른 브라우저 버전에서 유용한 방법입니다.
에러 로그를 표시할 div요소를 생성하여 그 안에 표시해 줍니다.
커스텀 에러
에러 메시지가 명확하다면 판단하기 쉽기에 뛰어난 디버그 수단입니다.
에러 체크 함수를 만들어서 사용하는 간단한 예제입니다. 매개변수로 조건결과를 받고 메시지를 받는 합수입니다.
function assert(condition, message){
if(!condition){
throw new Error(message);
}
}
var num1 = 1, num2 = "test";
assert(typeof num1 == "number" && typeof num2 == "number",
"divide() : Both arguments must be numbers.");
assert함수를 통해서 간단한 커스텀에러를 발생시키는 함수를 만들어보았습니다.
마치며
에러 처리와 디버그에 대해서 알아 보았습니다.
복잡한 웹 어플리케이션 일 수록 이런 에러처리가 대단히 중요하며 적절하지 않은 에러 처리는 개발자를 좌절하게 하기도 합니다.
다음 포스트에서는 자바스크립트에서의 JSON에 대해서 알아보겠습니다.