17. 에러 처리와 디버깅

다루는 내용

1. 브라우저의 에러 보고에 대한 이해
2. 에러 처리
3. 자바스크립트 코드 디버그

1. 브라우저의 에러 보고에 대한 이해

• 주요 웹 브라우저는 자바스크립트 에러를 사용자에게 보고하는 기능을 갖추고 있음
• 대개 개발자에게만 쓸모있는 정보이므로 개발할 때는 에러 보고 기능을 켜야함

2. 에러 처리

• 기대할 수 있는 최선의 경우는 사용자가 무슨 일이 일어난 건지 모른 채 다시 시도해보는 것이며, 최악의 경우는 화를 내고 다시 방문하지 않는 것

2-1. try-catch

• try 절에서 에러가 생기면 코드 실행을 즉시 멈추고, catch 절을 실행

• catch 에 담기는 정보는 브라우저에 따라 다르지만, message 프로퍼티는 존재

• finally 절은 항상 실행됨

  function trycatchFunction() {
    try{
      return 2; // 무의미
    } catch(error) {
      console.log(error.message);
      return 1; // 무의미
    } finally {
      return 0;
    }
  }

• 에러 타입에는 Error, EvalError, RangeError, ReferenceError, SyntaxError, TypeError, URIError 이 있으며 모두 Error 타입을 상속

• try-catch 문은 에러가 발생할 수도 있지만, 개발자가 컨트롤 할 수 없을 때 이상적

  • ex) 라이브러리를 사용하고 에러가 날지 확신이 안 나는 상황에서 라이브러리를 직접 수정할 수 없을 때

2.2 에러 반환

• throw 를 통해 언제든 커스텀 에러를 반환할 수 있음

  function CustomError(message) {
    this.name = "CustomError";
    this.message = "message";
  }
  
  CustomError.prototype = new Error();
  
  throw new CustomError("CustomError");

• 브라우저는 개발자가 알고 있는 조건을 모르므로 불분명한 메시지 밖에 알릴 수가 없는데, 이럴 때 커스텀 메시지를 사용하면 명확한 단서를 제공할 수 있음

• 코드를 다룰 때 각 함수가 제대로 실행될 수 없는 상황에 대해 특히 주의!

• 커스텀 에러와 try-catch 문을 선택하는 최선의 기준은 해당 에러를 어떻게 처리할지 정확히 알고 있느냐 이다. try-catch 는 브라우저가 에러를 기본 방식대로 처리하지 못하게 막는 것이고, 커스텀 에러의 목적은 에러가 일어난 이유를 제공하는 것

2-3. error 이벤트

• onerror 이벤트는 DOM 레벨 2 이벤트 표준을 따르지 않으므로 DOM 레벨 0 테크닉을 써서 할당해야 함

  window.onerror = function(message, url, line) {
    console.log(message);
  }

• try-catch 문을 올바르게 사용사면 에러가 브라우저까지 전달되지 않으며, error 이벤트도 발생하지 않음

2-4. 에러 처리 전략

• 웹 애플리케이션의 자바 스크립트 레벨에서도 에러 처리 전략을 세워야 하며 그 중요성은 서버 레벨과 다르지 않음
• 미세한 자바스크립트 에러도 웹 페이지의 동작을 멈추게 할 수 있으므로 에러가 왜, 언제 일어나는지 파악해야 함
  1. 타입 강제 에러
     1. 값의 데이터 타입을 자동으로 바꾸는 연산자나 기타 언어 구조를 사용했을 때 발생
     2. 주로 == 와 != 연산자 혹은 if, for 같은 흐름 제어문에서 불리언이 아닌 값을 사용했을 때
  2. 데이터 타입 에러
     1. 느슨한 타입을 사용하므로 에러가 생기지 않도록 데이터 타입을 체크해줘야 함
  3. 통신 에러
     1. URL 이나 데이터 형식이 잘못된 경우
     2. 서버의 응답이 예상과 다를 때 발생

2-5. 심각한 에러와 그렇지 않은 에러 구별

• 심각하지 않은 에러

  1. 사용자의 주요 작업을 방해하지 않는 에러
  2. 페이지의 일부분에만 영향을 끼치는 에러
  3. 복구 가능한 에러
  4. 다시 시도해보면 일어나지 않을 수 있는 에러

• 심각한 에러

  1. 애플리케이션 진행을 완전히 막는 에러
  2. 사용자의 주요 목적을 뚜렷이 방해하는 에러
  3. 다른 에러를 일으키는 에러

• try-catch 를 사용해 에러가 발생해도 독립적으로 처리할 수 있도록 함

  for(var i=0, len=mods.length; i<len; i++) {
    try {
      modes[i].init();
    } catch(ex) {
      //handle error 
    }
  }

3. 자바스크립트 코드 디버그

• 결국 디버그 정보를 표시할 코드에 삽입하는 식

3-1. 콘솔에 기록

• 개발자가 직접 콘솔에 기록하는 방식 (책의 예제 코드는 대부분 alert 였는데, 여태 console 로 했던 것)

• error, info, log, warn 4가지 메소드가 있음

  var message = "console message"
  console.error(message);
  console.info(message);
  console.log(message);
  console.warn(message);

• 디버그가 편해지지만 배포할 때는 반드시 메시지를 모두 제거해야 함

• alert 보다 더 나은 방법인 이유는 alert 이 프로그램 실행 흐름에 끼어들기 때문에 비동기적 프로세스에서는 결과가 달라질 수 있기 때문

3-2 페이지에 메시지 기록

• innerHTML 을 통해 기록
• 콘솔을 지원하지 않는 브라우저에서 디버그 할 때 유용