에러 처리(예외처리)를 하는 것은 중요한 일임에도 너무 안일하게 생각했던거 같아서 정리할 겸 작성해보려고 한다. 바로 예시로 넘어가서 알아보자

📌 new Error vs throw new Error

1. new Error

• 단순히 Error 객체 생성만 하고 아무일도 일어나지 않음

2. throw new Error()

• Error 객체를 던져서 실행 흐름을 중단 → catch가 있다면 해당 catch문으로 이동
• 에러를 발생시키고 예외 처리 흐름으로 코드를 전환한다.

throw new Error - 코드 흐름

• 에러 발생: throwNewErrorTest2(123) 함수가 호출됩니다. 123은 string 타입이 아니므로 if 조건이 참이 되어 throw new Error(..) 문 실행

• 호출 스택 해제: 에러가 발생하면 자바스크립트 엔진은 현재 함수부터 상위 호출 함수까지 에러를 처리할 try...catch 블록을 찾음

• 시스템 중단: 이 코드에서는 에러를 감싸고 있는 try...catch 블록이 없기 때문에, 에러는 처리되지 않고 프로그램 실행이 즉시 중단(Crash)됩니다.

• 미실행 코드: 프로그램이 중단되었으므로, 에러 발생 이후의 코드인 console.log("해당 줄은 실행되지 않습니다.");는 실행되지 않음

throw new Error - 에러 핸들링

throwNewErrorTest2에서 발생한 에러를 try...catch문에서 처리를 해주고 있기 때문에 프로그램은 Crash상태를 마주하지 않습니다.

📌 에러의 흐름을 알아보자

e.g) 간단한 프로미스를 이용한 함수

const someFn = async () => {
  try {
    const response = await new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error("fail : 다음 동작은 catch문 안에서 이뤄지겠습니다.")); 
      }, 300)
    })
    console.log("해당 라인은 실행되지 않습니다.")
  } catch(error) {
    console.error(error.message)
    console.log("해당 catch가 흐름을 낚아 챕니다.")
  }
}

someFn()

Promise문 이후 console.log()는 실행될 수 없습니다. 왜냐하면 resolve 객체는 new Error()를 던져서 해당 함수의 try{} 안에 코드를 멈추고 해당 코드의 흐름을 catch로 옮겼기 때문입니다.

만약 흐름과 상관없이 실행되게 하고 싶다면 finally를 사용하면됩니다.

📌 에러의 흐름을 제어해보자

에러는 상위로 전파됩니다.

const someFn = async () => {
  try {
    const response = await new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error("fail : 다음 동작은 catch문 안에서 이뤄지겠습니다.")); 
      }, 300)
    })
    console.log("해당 라인은 실행되지 않습니다.")
  } catch(error) {
    console.error(error.message)
  }
}

const print() {
  console.log("출력용 함수를 호출하였습니다.");
}

async function combine() {
  await someFn();
  print();
}

combine();

이번엔 combine 함수에서 someFn()과 print() 함수를 각각 호출하고 있습니다.
someFn()에서 하나의 에러를 던졌고 해당 에러는 catch()문안에서 해결되었습니다. 그렇기 때문에 combine 함수에서 새로운 에러를 찾지 못했기에 그대로 다음 함수은 print()도 실행됩니다.

그렇다면 print()함수가 실행되지 않게 에러를 하나 더 던져보겠습니다.

const someFn = async () => {
  try {
    const response = await new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error("fail : 다음 동작은 catch문 안에서 이뤄지겠습니다.")); 
      }, 300)
    })
    console.log("해당 라인은 실행되지 않습니다.")
  } catch(error) {
    console.error(error.message);
    throw new Error("두번째 에러를 던졌습니다.");
  }
}

const print = () => {
  console.log("출력용 함수를 호출하였습니다.");
}

async function combine() {
  await someFn();
  print();
}

combine();

해당 함수에서는 두번째 에러가 combine으로 상위 전파되는데 이를 잡아주는 곳이 없어서 그대로 전체 combine함수는 그대로 멈추게 됩니다.

두번째 에러를 잡기 위해서는 try catch 문을 한번 더 사용하면 됩니다.

async function combine() {
  try {
    await someFn();
    print();
  } catch(error) {
    console.error(error.message)
  }
}

이렇게 사용하게되면 someFn()에서 던진 또 다른 에러는 무엇인지 파악할 수 있습니다.

정리하기

때론 의도하지 않은 에러가 발생할 수 있고 해당 에러가 자칫 전체 애플리케이션의 흐름을 막아버릴 수 있습니다.

1. 전체 흐름을 막아버리기
2. 해당 에러를 처리해줌으로써 나머지 기능은 돌아갈 수 있도록 하기

이외에도 다양하게 생각하는대로 에러를 처리할 수 있고, 에러를 던지고 처리하는 과정을 통해서 원하는 흐름을 잘 조율하는게 중요합니다.