17. 에러 처리와 디버깅

· ☕ 3 min read · 👀... views

다루는 내용

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

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

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

2. 에러 처리

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

2-1. try-catch

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

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

  • finally 절은 항상 실행됨

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    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 를 통해 언제든 커스텀 에러를 반환할 수 있음

    1
2
3
4
5
6
7
8

    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 테크닉을 써서 할당해야 함

    1
2
3

    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 를 사용해 에러가 발생해도 독립적으로 처리할 수 있도록 함

    1
2
3
4
5
6
7

    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가지 메소드가 있음

    1
2
3
4
5

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

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

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

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

  • innerHTML 을 통해 기록
  • 콘솔을 지원하지 않는 브라우저에서 디버그 할 때 유용
Share on
snack
WRITTEN BY
snack
Web Programmer
Total visitors ...
Total views ...

©2021, All Rights Reserved

Powered by Hugo and the Zzo theme

What's on this Page