17. 에러 처리와 디버깅

에러 처리

try-catch 문

try-catch 문 주의 사항

• catch문 안의 에러를 파악할 때, 크로스브라우징을 위해서 message 프로퍼티를 써라.
• finally 절안에 return 문을 쓰면, try-catch 문 안의 return은 무시되고, finally 절 안의 return 값을 쓴다.
• message 프로퍼티 내용은 브라우저에 따라 다르므로 에러 타입을 기준으로 판단해야 브라우저 호환성 문제가 없다. (오잉?)

에러 타입의 종류

• Error: 기본 에러 타입, 커스텀 에러를 만들 때 사용
• EvalError: eval() 함수 사용 과정에서 에러가 생겼을 때
• RangeError: 숫자가 범위를 벗어났을 때
• ReferenceError: 존재하지 않는 변수에 접근하려 하는 경우 등
• SyntaxError: eval()에 넘긴 자바스크립트 문자열에 문법 에러가 있는 경우 등
• TypeError: 변수의 타입이 맞지 않을 때 or 존재하지 않는 메서드에 접근하려 할 때
• URIError: encodeURI()나 decodeURI()에 잘못된 URI를 넘겼을 때

어떤 때 사용하는 게 좋나?

• 버그로 인해 발생하는 에러는 직접 수정해라.
• 단, 라이브러리 코드 등 코드의 버그를 직접적으로 수정할 수 없을 때는 try-catch를 사용하는 것이 좋다.

에러 던지기(커스텀 에러): throw

커스텀 에러 만들기

• Error를 상속하여 만든 커스텀에러는 브라우저 에러와 구별해 처리할 때 유용하다.
• 브라우저 에러의 타입은 너무 포괄적이고, message는 브라우저별로 달라 에러 원인에 대해 정확히 파악하기 어렵다.
• 이 경우, 커스텀에러가 적절한 정보를 제공하여 코드를 관리하기 매우 쉬워진다.

try-catch vs 커스텀 에러

• try-catch: 에러가 발생해 자바스크립트 실행이 정지되는 것을 막음.
• 커스텀 에러: 에러가 일어난 이유 제공.

error 이벤트

• try-catch 문으로 처리하지 않은 에러가 발생하면 error 이벤트가 발생하고 (오페라, 사파리 제외)
• 이 error 이벤트는 DOM 레벨 0의 onerror 이벤트 핸들러로 받을 수 있다.
• false를 반환하여 브라우저로 에러 보고하는 것을 막을 수 있다.
• 가능하면 쓰지 말고, try-catch를 쓰는 것이 좋다.
• 이미지 태그도 error 이벤트를 지원한다.

window.onerror = function(message) {
  alert(message)
  return false;
}

에러가 생기기 쉬운 곳

• 타입 강제 에러:
  • 불리언 값으로 변환해주는 곳(==, !=, if, for, while 등)에서 발생하기 쉽다.
  • 불리언 값 자체를 명시적으로 조건문 안에 사용하는 것이 좋다.
• 데이터 타입 에러: 생각지도 못한 값이 전달되는 경우
  • 정확한 타입이 넘어왔는 지 체크하면 이 에러가 발생하는 것을 막을 수 있다.
  • 원시 타입인 경우 typeof, 객체는 instanceof로
  • 공개할 API라면 반드시 모든 타입을 체크해야 함
• 통신 에러: URL이나 데이터 형식이 잘못된 경우
  • encodeURIComponent()로 데이터를 인코딩하지 않았을 때 발생
  • 쿼리스트링을 매개변수로 쓸 때는 항상 encodeURIComponent() 메서드를 써야 한다.

심각한 에러와 그렇지 않은 에러 구별

• 구별 기준: 서비스 주요 기능을 사용할 수 있느냐 / 페이지 새로고침 등으로도 해결할 수 없느냐
• 심각한 에러인 경우 사용자에게 알린다.

서버에 에러 기록

• img 태그를 사용하여 서버에 API 호출을 할 수 있다.

function logError(sev, msg) {
  var img = new Image()
  img.src = `log.php?sev=${encodeURIComponent(sev)}&msg=${encodeURIComponent(msg)}`
}

디버그 테크닉

• 콘솔에 기록. 단, 배포할 때는 반드시 메시지를 모두 제거해야 함
• 페이지에 메시지 기록. 콘솔을 지원하지 않는 브라우저에서 디버깅할 때 유용. 마찬가기로 배포 전에 반드시 지워야 함
• 커스텀 에러: 커스텀 에러 생성 함수를 만들어서 코드 중복을 막을 수 있음

흔한 인터넷 익스플로러 에러

• 잘못된 문자 invalid character: 자바스크립트 문법에 정의되지 않은 문자
• 구성원이 없습니다 member not found: 객체가 파괴된 상황에서 그 객체에 값을 할당하려고 할 때
• DOM 할당 에러: 블록엘리먼트를 인라인엘리먼트에 삽입하거나, table 엘리먼트의 프로퍼티에 접근할 때 innerHTML이나 innerTable 프로퍼티 사용할 때
• 스크립트 문의 첫번째 문자에서 에러 발생: 외부 자바스크립트 파일에 문법 에러가 있는 경우
• 엑섹스가 거부되었습니다 The system cannot locate the resource specified: URL 길이 2083 글자 초과 시
  • URL을 줄이거나, POST로 데이터를 보낸다.