[Javascript]에러 핸들링

1. 에러처리

에러 처리를 하는 이유?

예외상황에 대비한 방어적인 코딩 , 비정상적인 상황에 맞는 결과를 잘 보여주기 위해

• 개발자를 위한 에러처리를 잘하고 있는가?
• 비정상 상황에 맞는 결과를 사용자에게 잘 보여주고있는가?
• 사용자는 에러 상황에서 다른 동작으로 스무스하게 넘어갈수 있는가.

2. Throw 와 try catch

function foo(s) {
  console.log("foo start");
  if(typeof s !== 'string') throw '에러'
  console.log("foo end");
}

function bar() {
  console.log("bar start"); 
  foo(1);
  console.log("bar end");
}

function baz() {
  console.log("baz start");
  bar();
  console.log("baz end");
}

baz();

foo 함수 안에서 throw 를 이용하여 에러를 던져주면 위와 같이 Uncaught 에러 에러가 나온다. Uncaught 라는 말은 에러가 나온뒤에 핸들링을 해주지 않은 상태라는 뜻으로 try catch 를 이용하여 후속 처리를 해주어야한다.

function foo(s) {
  console.log("foo start");
  if (typeof s !== "string") throw "에러";
  console.log("foo end");
}

function bar() {
  console.log("bar start");

  try {
    foo(1);
  } catch (e) {
    console.log(e);
  }

  console.log("bar end");
}

function baz() {
  console.log("baz start");
  bar();
  console.log("baz end");
}

baz();

위와 같이 foo 를 부르기전에 try 로 감싸주고 catch 로 error 를 잡아주면 foo 에서 던져진 error를 잡고 에러 메세지를 console.log 로 프린트 한 뒤에 콜스택이 중지되지 않고 bar end 와 baz end 도 역시 실행된다.

=> 에러핸들링의 중요성이 여기에서 발휘된다.

3. 비동기의 에러핸들링

(async function() {
    try {    
      await setTimeout(() => {
        throw ('error ... ');
      }, 1000);  
    } catch (e) {
      console.log(`error is ${e.message}`);
    }
})();

위의 코드와 같이 async 함수 안에 try catch 로 setTimout 을 실행 시키고 에러를 던지면 에러가 잡히지 않는다.

• async 함수 안에서 발생한 에러는 promise 객체 안에서 발생된 에러이기 때문에 Promise.reject 처리되어 상위 컨텍스트에서 비동기 에러로 처리된다.

상위 컨텍스트로 에러를 전파하기 위해 async 함수의 내부를 try-catch로 묶을 필요는 없다.
즉, 상위 컨텍스트로 에러를 전파하기 위한 try-catch 문은 필요없는 코드인 것이다.

이러한 코드는 이런식으로 Promise.reject 형태로 error 를 잡을수 있다.