오류 처리는 모든 JavaScript 개발자가 직면하는 작업 중 하나이지만 모든 사람이 이를 마스터하기 위해 깊이 파고드는 것은 아닙니다. 단순한 try...catch 문에 의존해 왔다면 이제 게임을 향상시킬 때입니다. 이 게시물에서는 기본적인 오류 처리부터 사용자 정의 오류 작성까지 과정을 안내하여 코드의 복원력을 높이고 디버그하기 쉽게 만듭니다.

1. 기본: try...catch

클래식한 try...catch부터 시작해 보겠습니다.

try {
  const data = JSON.parse('{"name": "John"}');
  console.log(data.age.toUpperCase()); // This will cause an error
} catch (error) {
  console.error("Something went wrong:", error);
}

이것은 간단하고 효과적입니다. try 블록을 사용하면 오류가 발생할 수 있는 코드를 실행할 수 있으며, catch 블록은 이를 캡처하여 우아하게 처리할 수 있습니다.

그러나 애플리케이션이 성장함에 따라 이것에만 의존하면 정보가 적은 오류 메시지가 표시되어 디버깅이 악몽이 될 수 있습니다. 이것이 바로 사용자 정의 오류 처리가 빛나는 곳입니다.

2. 기본 오류 유형 이해

JavaScript에는 다음과 같은 오류 유형이 내장되어 있습니다.

• 오류: 일반 오류 개체입니다.
• TypeError: 변수가 예상된 유형이 아닐 때 발생합니다.
• SyntaxError: 코드에 구문 오류가 있는 경우 발생합니다.
• ReferenceError: 존재하지 않는 변수를 참조할 때 발생합니다.

예:

try {
  let result = myUndefinedFunction();
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("ReferenceError detected:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

이러한 유형을 활용하면 보다 설명적인 오류 처리 경로를 구축할 수 있습니다. 하지만 애플리케이션 로직에 특정한 오류를 정의하고 싶다면 어떻게 해야 할까요? 여기서 사용자 정의 오류가 발생합니다.

3. 사용자 정의 오류 생성

왜 사용자 정의 오류가 발생합니까?

사용자 정의 오류는 코드 내의 특정 문제를 식별하는 데 도움이 되므로 디버깅이 훨씬 쉬워집니다. 예를 들어 API를 구축하는 경우 ValidationError, AuthenticationError 또는 DatabaseError를 구별할 수 있습니다.

사용자 정의 오류를 만드는 방법

예를 들어 ValidationError를 만들어 보겠습니다.

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  const age = -5;
  if (age 



Error 클래스를 확장하면 보다 의미 있는 ValidationError를 생성할 수 있습니다. 이 접근 방식을 사용하면 문제의 성격을 명확하게 알 수 있어 디버깅이 더 쉬워지고 코드가 더 깔끔해집니다.


  
  
  4. 더 많은 정보로 사용자 정의 오류 강화


맞춤 메시지만 보고 멈추는 이유는 무엇입니까? errorCode 또는 statusCode와 같은 추가 속성을 사용하여 사용자 정의 오류를 강화해 보겠습니다.



class HttpError extends Error {
  constructor(statusCode, message) {
    super(message);
    this.name = "HttpError";
    this.statusCode = statusCode;
  }
}

try {
  const response = { status: 404 };
  if (response.status === 404) {
    throw new HttpError(404, "Resource not found");
  }
} catch (error) {
  if (error instanceof HttpError) {
    console.error(`Error ${error.statusCode}: ${error.message}`);
  } else {
    console.error("Unexpected error:", error);
  }
}




이렇게 하면 오류에 대한 더 많은 컨텍스트를 캡처할 수 있어 보다 쉽게 ​​조치를 취하거나 효과적으로 기록할 수 있습니다.


  
  
  5. 글로벌 오류 처리 전략 구축


애플리케이션이 확장됨에 따라 오류를 처리하는 중앙 집중식 방법이 필요할 것입니다. 한 가지 접근 방식은 다양한 오류 유형을 처리하는 오류 처리 유틸리티를 만드는 것입니다.



function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
  } else if (error instanceof HttpError) {
    console.error(`HTTP error (${error.statusCode}):`, error.message);
  } else {
    console.error("An unexpected error occurred:", error);
  }
}

try {
  throw new HttpError(500, "Internal Server Error");
} catch (error) {
  handleError(error);
}




이 중앙 집중식 오류 처리는 코드를 DRY(반복하지 않음) 상태로 유지하고 애플리케이션 전체에서 일관된 오류 처리를 보장합니다.


  
  
  6. 최종적으로 정리를 위한 활용


종종 데이터베이스 연결을 닫거나 시간 초과를 지우는 등의 정리 작업을 수행해야 할 수도 있습니다. 이것이 마침내 유용한 부분입니다:



try {
  // Attempt to execute code
} catch (error) {
  // Handle errors
} finally {
  console.log("This will always execute, whether an error occurred or not.");
}




finally를 사용하면 오류 발생 여부에 관계없이 이 블록이 실행되므로 정리 작업에 이상적입니다.


  
  
  7. 로깅 서비스와 통합


프로덕션 애플리케이션의 경우 오류를 기록하는 것이 필수적입니다. Sentry, LogRocket 또는 Datadog와 같은 서비스는 전체 스택 추적을 통해 오류를 캡처할 수 있으므로 문제 해결이 훨씬 쉬워집니다.

예:



import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

try {
  // Your code that might throw an error
} catch (error) {
  Sentry.captureException(error);
  handleError(error);
}




이 통합을 통해 문제에 대한 더 나은 가시성을 제공하고 애플리케이션 상태를 실시간으로 모니터링하는 데 도움이 됩니다.


  
  
  최종 생각


try...catch의 기본을 넘어 사용자 정의 오류를 통합함으로써 유지 관리가 용이하고 읽기 쉽고 강력한 JavaScript 코드를 만들 수 있습니다. 이러한 방법을 구현하면 디버깅이 쉬워질 뿐만 아니라 애플리케이션의 전반적인 안정성도 향상됩니다.


  
  
  다음은 무엇입니까?

• 현재 프로젝트에서 사용자 정의 오류를 실험해 보세요.
• 중앙 집중식 오류 처리기를 구현합니다.
• 앱에 오류 로깅 서비스를 통합합니다.

프로젝트에서 오류를 처리하는 방법이나 공유할 수 있는 멋진 팁과 요령이 있으면 알려주세요!

이 게시물이 마음에 드셨나요? 더 많은 JavaScript 팁과 요령을 보려면 저를 팔로우하세요!