React 오류 경계(Error Boundary) 오류 분류: 종합 가이드

오류 처리는 견고하고 유지보수 가능한 React 애플리케이션을 구축하는 데 있어 중요한 측면입니다. React의 오류 경계(Error Boundary)는 렌더링 중에 발생하는 오류를 정상적으로 처리하는 메커니즘을 제공하지만, 다양한 오류 유형을 어떻게 분류하고 대응할지 이해하는 것은 진정으로 탄력적인 애플리케이션을 만드는 데 매우 중요합니다. 이 가이드에서는 오류 경계 내에서 오류를 분류하는 다양한 접근 방식을 탐색하고, 오류 관리 전략을 개선하기 위한 실용적인 예제와 실행 가능한 통찰력을 제공합니다.

React 오류 경계(Error Boundary)란 무엇인가요?

React 16에 도입된 오류 경계(Error Boundary)는 자식 컴포넌트 트리 어디에서든 JavaScript 오류를 포착하고, 해당 오류를 기록하며, 전체 컴포넌트 트리가 충돌하는 대신 대체 UI를 표시하는 React 컴포넌트입니다. 이는 컴포넌트를 위한 try...catch 블록과 유사하게 작동합니다.

오류 경계의 주요 특징:

• 컴포넌트 수준 오류 처리: 특정 컴포넌트 하위 트리 내의 오류를 격리합니다.
• 점진적 기능 저하(Graceful Degradation): 단일 컴포넌트 오류로 인해 전체 애플리케이션이 중단되는 것을 방지합니다.
• 제어된 대체 UI: 오류 발생 시 사용자 친화적인 메시지나 대체 콘텐츠를 표시합니다.
• 오류 로깅: 오류 정보를 기록하여 오류 추적 및 디버깅을 용이하게 합니다.

오류 경계에서 오류를 분류해야 하는 이유는 무엇인가요?

단순히 오류를 포착하는 것만으로는 충분하지 않습니다. 효과적인 오류 처리는 무엇이 잘못되었는지 이해하고 그에 따라 대응하는 것을 요구합니다. 오류 경계 내에서 오류를 분류하면 다음과 같은 여러 이점이 있습니다:

• 목표 지향적 오류 처리: 오류 유형에 따라 다른 응답이 필요할 수 있습니다. 예를 들어, 네트워크 오류는 재시도 메커니즘이 필요할 수 있는 반면, 데이터 유효성 검사 오류는 사용자 입력 수정이 필요할 수 있습니다.
• 사용자 경험 개선: 오류 유형에 따라 더 유익한 오류 메시지를 표시합니다. 일반적인 "문제가 발생했습니다"라는 메시지는 네트워크 문제나 잘못된 입력을 나타내는 특정 메시지보다 도움이 덜 됩니다.
• 디버깅 강화: 오류를 분류하면 디버깅 및 문제의 근본 원인을 식별하는 데 유용한 컨텍스트를 제공합니다.
• 사전 모니터링: 다양한 오류 유형의 발생 빈도를 추적하여 반복되는 문제를 식별하고 수정 우선순위를 정합니다.
• 전략적 대체 UI: 오류에 따라 다른 대체 UI를 표시하여 사용자에게 더 관련성 있는 정보나 조치를 제공합니다.

오류 분류 접근 방식

React 오류 경계 내에서 오류를 분류하는 데 사용할 수 있는 몇 가지 기법이 있습니다:

1. instanceof 사용하기

instanceof 연산자는 객체가 특정 클래스의 인스턴스인지 확인합니다. 이는 내장 오류 유형이나 사용자 정의 오류 유형에 따라 오류를 분류하는 데 유용합니다.

예제:

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

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

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 대체 UI를 표시하도록 state를 업데이트합니다.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // 오류를 오류 보고 서비스에 기록할 수도 있습니다.
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // 원하는 커스텀 대체 UI를 렌더링할 수 있습니다.
      let errorMessage = "문제가 발생했습니다.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "네트워크 오류가 발생했습니다. 연결을 확인하고 다시 시도해주세요.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "유효성 검사 오류가 발생했습니다. 입력 내용을 검토해주세요.";
      }

      return (
        <div>
          <h2>오류!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

설명:

• 내장된 Error 클래스를 확장하는 커스텀 NetworkError 및 ValidationError 클래스를 정의합니다.
• MyErrorBoundary 컴포넌트의 render 메서드에서 instanceof 연산자를 사용하여 포착된 오류의 유형을 확인합니다.
• 오류 유형에 따라 대체 UI에 특정 오류 메시지가 표시됩니다.

2. 오류 코드 또는 속성 사용하기

또 다른 접근 방식은 오류 객체 자체에 오류 코드나 속성을 포함하는 것입니다. 이를 통해 특정 오류 시나리오에 따라 더 세분화된 분류가 가능합니다.

예제:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Network request failed");
          error.code = response.status; // 커스텀 오류 코드를 추가합니다.
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 대체 UI를 표시하도록 state를 업데이트합니다.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // 오류를 오류 보고 서비스에 기록할 수도 있습니다.
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "문제가 발생했습니다.";
      if (this.state.error.code === 404) {
        errorMessage = "리소스를 찾을 수 없습니다.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "서버 오류입니다. 나중에 다시 시도해주세요.";
      }

      return (
        <div>
          <h2>오류!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

설명:

• fetchData 함수는 HTTP 상태 코드를 나타내는 code 속성을 오류 객체에 추가합니다.
• MyErrorBoundary 컴포넌트는 code 속성을 확인하여 특정 오류 시나리오를 결정합니다.
• 오류 코드에 따라 다른 오류 메시지가 표시됩니다.

3. 중앙 집중식 오류 매핑 사용하기

복잡한 애플리케이션의 경우, 중앙 집중식 오류 매핑을 유지하면 코드 구성 및 유지보수성을 향상시킬 수 있습니다. 이는 오류 유형이나 코드를 특정 오류 메시지 및 처리 로직에 매핑하는 딕셔너리나 객체를 만드는 것을 포함합니다.

예제:

const errorMap = {
  "NETWORK_ERROR": {
    message: "네트워크 오류가 발생했습니다. 연결을 확인해주세요.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "잘못된 입력입니다. 데이터를 검토해주세요.",
    retry: false,
  },
  404: {
    message: "리소스를 찾을 수 없습니다.",
    retry: false,
  },
  500: {
    message: "서버 오류입니다. 나중에 다시 시도해주세요.",
    retry: true,
  },
  "DEFAULT": {
    message: "문제가 발생했습니다.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // 다음 렌더링에서 대체 UI를 표시하도록 state를 업데이트합니다.
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // 오류를 오류 보고 서비스에 기록할 수도 있습니다.
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>오류!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

설명:

• errorMap 객체는 오류 유형이나 코드에 따라 메시지 및 재시도 플래그를 포함한 오류 정보를 저장합니다.
• handleCustomError 함수는 오류 메시지를 기반으로 errorMap에서 오류 세부 정보를 검색하고 특정 코드를 찾을 수 없는 경우 기본값을 반환합니다.
• MyErrorBoundary 컴포넌트는 handleCustomError를 사용하여 errorMap에서 적절한 오류 메시지를 가져옵니다.

오류 분류를 위한 모범 사례

• 명확한 오류 유형 정의: 애플리케이션에 대한 일관된 오류 유형 또는 코드 집합을 설정합니다.
• 문맥 정보 제공: 디버깅을 용이하게 하기 위해 오류 객체에 관련 세부 정보를 포함합니다.
• 오류 처리 로직 중앙화: 중앙 집중식 오류 매핑 또는 유틸리티 함수를 사용하여 오류 처리를 일관되게 관리합니다.
• 효과적인 오류 로깅: 오류 보고 서비스와 통합하여 프로덕션 환경의 오류를 추적하고 분석합니다. 인기 있는 서비스로는 Sentry, Rollbar, Bugsnag 등이 있습니다.
• 오류 처리 테스트: 단위 테스트를 작성하여 오류 경계가 다양한 오류 유형을 올바르게 처리하는지 확인합니다.
• 사용자 경험 고려: 사용자가 해결 방법을 찾도록 안내하는 유익하고 사용자 친화적인 오류 메시지를 표시합니다. 기술적인 전문 용어 사용을 피합니다.
• 오류 발생률 모니터링: 다양한 오류 유형의 발생 빈도를 추적하여 반복되는 문제를 식별하고 수정 우선순위를 정합니다.
• 국제화(i18n): 사용자에게 오류 메시지를 표시할 때, 메시지가 다양한 언어와 문화를 지원하도록 적절히 국제화되었는지 확인합니다. i18next와 같은 라이브러리나 React의 Context API를 사용하여 번역을 관리합니다.
• 접근성(a11y): 오류 메시지가 장애를 가진 사용자에게도 접근 가능하도록 해야 합니다. ARIA 속성을 사용하여 스크린 리더에 추가적인 문맥을 제공합니다.
• 보안: 특히 프로덕션 환경에서 오류 메시지에 어떤 정보를 표시할지 주의해야 합니다. 공격자에게 악용될 수 있는 민감한 데이터를 노출하지 마십시오. 예를 들어, 최종 사용자에게 원시 스택 트레이스를 표시하지 마십시오.

예시 시나리오: 전자 상거래 애플리케이션에서 API 오류 처리하기

API에서 상품 정보를 가져오는 전자 상거래 애플리케이션을 생각해 봅시다. 발생 가능한 오류 시나리오는 다음과 같습니다:

• 네트워크 오류: API 서버를 사용할 수 없거나 사용자의 인터넷 연결이 중단된 경우.
• 인증 오류: 사용자의 인증 토큰이 유효하지 않거나 만료된 경우.
• 리소스를 찾을 수 없음 오류: 요청한 상품이 존재하지 않는 경우.
• 서버 오류: API 서버에서 내부 오류가 발생한 경우.

오류 경계와 오류 분류를 사용하여 애플리케이션은 이러한 시나리오를 정상적으로 처리할 수 있습니다:

// 예제 (간소화됨)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // 이전에 보여준 errorMap 사용
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>오류!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>재시도</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

설명:

• fetchProduct 함수는 API 응답 상태 코드를 확인하고 상태에 따라 특정 오류 유형을 발생시킵니다.
• ProductErrorBoundary 컴포넌트는 이러한 오류를 포착하고 적절한 오류 메시지를 표시합니다.
• 네트워크 오류 및 서버 오류의 경우 "재시도" 버튼이 표시되어 사용자가 다시 요청을 시도할 수 있습니다.
• 인증 오류의 경우 사용자는 로그인 페이지로 리디렉션될 수 있습니다.
• 리소스를 찾을 수 없음 오류의 경우 상품이 존재하지 않음을 나타내는 메시지가 표시됩니다.

결론

React 오류 경계 내에서 오류를 분류하는 것은 탄력적이고 사용자 친화적인 애플리케이션을 구축하는 데 필수적입니다. instanceof 확인, 오류 코드, 중앙 집중식 오류 매핑과 같은 기법을 사용하면 다양한 오류 시나리오를 효과적으로 처리하고 더 나은 사용자 경험을 제공할 수 있습니다. 애플리케이션이 예기치 않은 상황을 정상적으로 처리할 수 있도록 오류 처리, 로깅 및 테스트에 대한 모범 사례를 따르는 것을 잊지 마십시오.

이러한 전략을 구현함으로써 React 애플리케이션의 안정성과 유지보수성을 크게 향상시켜 사용자의 위치나 배경에 관계없이 더 부드럽고 신뢰할 수 있는 경험을 제공할 수 있습니다.

추가 자료:

• React 오류 경계(Error Boundary) 공식 문서
• Sentry의 React 16 오류 경계 가이드
• Robin Wieruch의 React 오류 경계 튜토리얼