집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 디버깅의 숨겨진 보석: error.cause

JavaScript 디버깅의 숨겨진 보석: error.cause

DDD원래의: 2025-01-12 16:45:47681검색

A Hidden Gem in JavaScript Debugging: error.cause

디버깅의 과제

디버깅에 있어 가장 큰 어려움은 무엇인가요? 그 중 하나는 의심할 바 없이 오류의 원인을 추적하는 것입니다.

다음 시나리오를 상상해 보세요.

const func = () => {
  doSth('A');
  doSth('B');
};

func에서 오류가 발생하면 오류가 발생한 단계를 어떻게 식별하나요? doSth('A'), doSth('B') 또는 func 자체로 인해 발생했나요? 분명히 오류에는 충분한 맥락이 부족합니다.

공통 솔루션

이 문제를 해결하기 위한 일반적인 접근 방식은 다음과 같습니다.

const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', error);
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', error);
  }
};

이 방법을 사용하면 오류의 원인을 더 쉽게 찾을 수 있습니다. 그러나 이 솔루션에는 몇 가지 제한 사항이 있습니다.

오류 세부 정보 손실:

오류에 광범위한 정보(예: 페이로드, HTTP 상태 코드, 오류 코드)가 포함된 경우 이 접근 방식은 새로 생성된 오류에 doSth의 오류 메시지만 추가합니다. 원본 스택 추적을 포함한 기타 중요한 세부 정보는 손실됩니다.
로그 가독성 저하:

잠재적인 오류 지점이 2개 이상 있으면 로그가 복잡해지고 해석하기 어려울 수 있습니다.
의도 표현의 모호함:

코드는 특정 doSth 함수가 포착되어 새로운 오류가 발생했다는 사실을 명시적으로 전달하지 않으므로 코드 가독성을 높일 여지가 있습니다.

error.cause 소개

이러한 문제를 해결하기 위해 ECMAScript 2022에서는 error.cause를 도입했습니다.

이 기능을 사용하면 개발자는 새 오류 개체를 생성할 때 오류의 근본 원인을 지정할 수 있습니다. error.cause를 사용하면 일련의 오류를 설정하여 문제의 근본 원인을 더 쉽게 디버깅하고 추적할 수 있습니다.

다음은 간단한 예입니다.

try {
  // Some operation that may throw an error
} catch (error) {
  throw new Error('Something went wrong', { cause: error });
}

이 접근 방식을 사용하면 오류 간의 인과 관계를 구축할 수 있습니다. 예를 들면 다음과 같습니다.

const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', { cause: error });
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', { cause: error });
  }
};

이를 통해 하위 수준 함수(예: doSth('A'))에서 발생하는 오류를 포착하고 관련 컨텍스트를 추가하는 새 오류(예: "doSth('A')를 실행하는 동안 오류가 발생했습니다.")를 발생시킬 수 있습니다. ), 원래 오류 세부정보(예: "A는 잘못된 인수입니다.")를 보존합니다.

일련의 오류 만들기

error.cause의 또 다른 장점은 연결된 오류 체인을 생성하여 개발자가 애플리케이션의 여러 계층을 통해 문제를 다시 추적할 수 있다는 것입니다.

const func = () => {
  try {
    try {
      try {
        doSth('A');
      } catch (error) {
        throw new Error('Error at depth 3', { cause: error });
      }
    } catch (error) {
      throw new Error('Error at depth 2', { cause: error });
    }
  } catch (error) {
    throw new Error('Error at depth 1', { cause: error });
  }
};

console.log(error.cause.cause); // Error at depth 3

Node.js에서는 원인이 있는 오류를 콘솔에서 특별히 처리합니다. 관련된 모든 오류 스택이 인쇄됩니다.

const func = () => {
  doSth('A');
  doSth('B');
};

결론

오류 컨텍스트와 세부 정보에 즉시 액세스할 수 있으면 디버깅이 훨씬 쉬워집니다.
이를 달성하는 효과적인 방법 중 하나는 error.cause 기능을 사용하여 "컨텍스트에 따라 다시 발생" 패턴을 채택하는 것입니다.

const func = () => {
  try {
    doSth('A');
  } catch (error) {
    throw new Error('An error from A', error);
  }
  try {
    doSth('B');
  } catch (error) {
    throw new Error('An error from B', error);
  }
};

이 접근 방식은 오류 추적 가능성을 향상시킬 뿐만 아니라 코드의 가독성과 유지 관리 가능성도 향상시킵니다.