React ErrorBoundary: 오류 격리 및 복구 전략

동적인 프론트엔드 개발 세계에서, 특히 React와 같은 복잡한 컴포넌트 기반 프레임워크로 작업할 때 예상치 못한 오류는 불가피합니다. 이러한 오류는 올바르게 처리되지 않으면 애플리케이션 충돌과 실망스러운 사용자 경험으로 이어질 수 있습니다. React의 ErrorBoundary 컴포넌트는 이러한 오류를 정상적으로 처리하고, 격리하며, 복구 전략을 제공하는 강력한 솔루션을 제공합니다. 이 종합 가이드에서는 ErrorBoundary의 강력한 기능을 탐색하고, 이를 효과적으로 구현하여 전 세계 사용자를 위해 더 탄력적이고 사용자 친화적인 React 애플리케이션을 구축하는 방법을 보여줍니다.

Error Boundary의 필요성 이해하기

구현에 들어가기 전에, Error Boundary가 왜 필수적인지 이해해 봅시다. React에서 렌더링 중, 생명주기 메서드 또는 자식 컴포넌트의 생성자에서 발생하는 오류는 전체 애플리케이션을 충돌시킬 수 있습니다. 이는 처리되지 않은 오류가 컴포넌트 트리를 타고 올라가 종종 빈 화면이나 도움이 되지 않는 오류 메시지를 표시하기 때문입니다. 일본에 있는 사용자가 중요한 금융 거래를 완료하려다가, 관련 없어 보이는 컴포넌트의 사소한 오류 때문에 빈 화면을 마주하는 상황을 상상해 보십시오. 이는 선제적인 오류 관리의 중요성을 잘 보여줍니다.

Error Boundary는 자식 컴포넌트 트리 어디에서든 JavaScript 오류를 포착하고, 해당 오류를 기록하며, 컴포넌트 트리를 충돌시키는 대신 대체 UI(fallback UI)를 표시하는 방법을 제공합니다. 이를 통해 결함이 있는 컴포넌트를 격리하고 애플리케이션의 한 부분에서 발생한 오류가 다른 부분에 영향을 미치는 것을 방지하여, 전 세계적으로 더 안정적이고 신뢰할 수 있는 사용자 경험을 보장할 수 있습니다.

React ErrorBoundary란 무엇인가?

ErrorBoundary는 자식 컴포넌트 트리 어디에서든 JavaScript 오류를 포착하고, 해당 오류를 기록하며, 대체 UI를 표시하는 React 컴포넌트입니다. 이는 다음 두 가지 생명주기 메서드 중 하나 또는 둘 다를 구현하는 클래스 컴포넌트입니다:

• static getDerivedStateFromError(error): 이 생명주기 메서드는 하위 컴포넌트에서 오류가 발생한 후에 호출됩니다. 발생한 오류를 인자로 받아 컴포넌트의 상태를 업데이트할 값을 반환해야 합니다.
• componentDidCatch(error, info): 이 생명주기 메서드는 하위 컴포넌트에서 오류가 발생한 후에 호출됩니다. 발생한 오류와 오류를 발생시킨 컴포넌트에 대한 정보가 담긴 info 객체, 두 가지 인자를 받습니다. 이 메서드를 사용하여 오류 정보를 기록하거나 다른 부수 효과(side effects)를 수행할 수 있습니다.

기본 ErrorBoundary 컴포넌트 만들기

기본 원리를 설명하기 위해 간단한 ErrorBoundary 컴포넌트를 만들어 보겠습니다.

코드 예제

다음은 간단한 ErrorBoundary 컴포넌트의 코드입니다:

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

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

 componentDidCatch(error, info) {
 // "componentStack" 예시:
 // in ComponentThatThrows (created by App)
 // in App
 console.error("Caught an error:", error);
 console.error("Error info:", info.componentStack);
 this.setState({ error: error, errorInfo: info });
 // 오류 보고 서비스에 오류를 기록할 수도 있습니다
 // logErrorToMyService(error, info.componentStack);
 }

 render() {
 if (this.state.hasError) {
 // 어떤 커스텀 대체 UI든 렌더링할 수 있습니다
 return (
 

 
문제가 발생했습니다.
 
오류: {this.state.error && this.state.error.toString()}
 

 {this.state.errorInfo && this.state.errorInfo.componentStack}
 
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

설명

• 생성자(Constructor): 생성자는 컴포넌트의 상태를 hasError가 false로 설정되도록 초기화합니다. 또한 디버깅 목적으로 error와 errorInfo를 저장합니다.
• getDerivedStateFromError(error): 이 정적 메서드는 자식 컴포넌트에서 오류가 발생했을 때 호출됩니다. 상태를 업데이트하여 오류가 발생했음을 나타냅니다.
• componentDidCatch(error, info): 이 메서드는 오류가 발생한 후에 호출됩니다. 오류와 컴포넌트 스택에 대한 정보가 담긴 info 객체를 받습니다. 여기서는 콘솔에 오류를 기록합니다 (Sentry, Bugsnag 또는 자체 솔루션과 같은 선호하는 로깅 메커니즘으로 교체하세요). 또한 상태에 error와 errorInfo를 설정합니다.
• render(): render 메서드는 hasError 상태를 확인합니다. true이면 대체 UI를 렌더링하고, 그렇지 않으면 컴포넌트의 자식들을 렌더링합니다. 대체 UI는 유익하고 사용자 친화적이어야 합니다. 개발자에게는 유용하지만, 오류 세부 정보와 컴포넌트 스택은 보안상의 이유로 프로덕션 환경에서는 조건부로 렌더링하거나 제거해야 합니다.

ErrorBoundary 컴포넌트 사용하기

ErrorBoundary 컴포넌트를 사용하려면, 오류를 발생시킬 수 있는 모든 컴포넌트를 그 안에 감싸기만 하면 됩니다.

코드 예제

import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
 return (
 

 {/* 오류를 발생시킬 수 있는 컴포넌트들 */}
 
 
 );
}

function App() {
 return (
 
 
 
 );
}

export default App;

설명

이 예제에서 MyComponent는 ErrorBoundary로 감싸져 있습니다. MyComponent 또는 그 자식 컴포넌트 내에서 오류가 발생하면 ErrorBoundary가 이를 포착하여 대체 UI를 렌더링합니다.

고급 ErrorBoundary 전략

기본 ErrorBoundary가 기본적인 오류 처리 수준을 제공하지만, 오류 관리를 향상시키기 위해 구현할 수 있는 몇 가지 고급 전략이 있습니다.

1. 세분화된 Error Boundary

전체 애플리케이션을 단일 ErrorBoundary로 감싸는 대신, 세분화된 Error Boundary를 사용하는 것을 고려해 보세요. 이는 오류가 발생하기 쉽거나 실패 시 영향이 제한적인 애플리케이션의 특정 부분 주위에 ErrorBoundary 컴포넌트를 배치하는 것을 포함합니다. 예를 들어, 개별 위젯이나 외부 데이터 소스에 의존하는 컴포넌트를 감쌀 수 있습니다.

예제

function ProductList() {
 return (
 

 {/* 제품 목록 */}
 
 );
}

function RecommendationWidget() {
 return (
 
 {/* 추천 엔진 */}
 
 );
}

function App() {
 return (
 

 
 
 
 );
}

이 예제에서 RecommendationWidget은 자체 ErrorBoundary를 가집니다. 추천 엔진이 실패하더라도 ProductList에는 영향을 미치지 않으며, 사용자는 계속해서 제품을 탐색할 수 있습니다. 이러한 세분화된 접근 방식은 오류를 격리하고 애플리케이션 전체로 전파되는 것을 방지하여 전반적인 사용자 경험을 개선합니다.

2. 오류 로깅 및 보고

오류 로깅은 디버깅과 반복되는 문제를 식별하는 데 매우 중요합니다. componentDidCatch 생명주기 메서드는 Sentry, Bugsnag, 또는 Rollbar와 같은 오류 로깅 서비스와 통합하기에 이상적인 장소입니다. 이러한 서비스는 스택 트레이스, 사용자 컨텍스트, 환경 정보를 포함한 상세한 오류 보고서를 제공하여 문제를 신속하게 진단하고 해결할 수 있게 해줍니다. GDPR과 같은 개인정보 보호 규정을 준수하기 위해 오류 로그를 전송하기 전에 민감한 사용자 데이터를 익명화하거나 삭제하는 것을 고려하세요.

예제

import * as Sentry from "@sentry/react";

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

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

 componentDidCatch(error, info) {
 // 오류를 Sentry에 기록합니다
 Sentry.captureException(error, { extra: info });
 // 오류 보고 서비스에 오류를 기록할 수도 있습니다
 console.error("Caught an error:", error);
 }

 render() {
 if (this.state.hasError) {
 // 어떤 커스텀 대체 UI든 렌더링할 수 있습니다
 return (
 

 
문제가 발생했습니다.
 
 );
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

이 예제에서 componentDidCatch 메서드는 Sentry.captureException을 사용하여 Sentry에 오류를 보고합니다. Sentry를 구성하여 팀에 알림을 보내도록 설정하면 심각한 오류에 신속하게 대응할 수 있습니다.

3. 커스텀 대체 UI

ErrorBoundary가 표시하는 대체 UI는 오류가 발생했을 때도 사용자 친화적인 경험을 제공할 기회입니다. 일반적인 오류 메시지를 표시하는 대신, 사용자를 해결책으로 안내하는 더 유익한 메시지를 표시하는 것을 고려해 보세요. 여기에는 페이지를 새로 고치는 방법, 고객 지원에 문의하는 방법, 또는 나중에 다시 시도하는 방법에 대한 지침이 포함될 수 있습니다. 발생한 오류 유형에 따라 대체 UI를 맞춤 설정할 수도 있습니다.

예제

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

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

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

 render() {
 if (this.state.hasError) {
 // 어떤 커스텀 대체 UI든 렌더링할 수 있습니다
 if (this.state.error instanceof NetworkError) {
 return (
 

 
네트워크 오류
 
인터넷 연결을 확인하고 다시 시도해주세요.
 
 );
 } else {
 return (
 

 
문제가 발생했습니다.
 
페이지를 새로고침하거나 고객 지원에 문의해주세요.
 
 );
 }
 }

 return this.props.children;
 }
}

export default ErrorBoundary;

이 예제에서 대체 UI는 오류가 NetworkError인지 확인합니다. 만약 그렇다면, 사용자에게 인터넷 연결을 확인하라는 특정 메시지를 표시합니다. 그렇지 않으면 일반적인 오류 메시지를 표시합니다. 구체적이고 실행 가능한 지침을 제공하면 사용자 경험을 크게 향상시킬 수 있습니다.

4. 재시도 메커니즘

어떤 경우에는 오류가 일시적이며 작업을 재시도하면 해결될 수 있습니다. ErrorBoundary 내에 재시도 메커니즘을 구현하여 일정 지연 후 실패한 작업을 자동으로 재시도할 수 있습니다. 이는 네트워크 오류나 일시적인 서버 중단을 처리하는 데 특히 유용할 수 있습니다. 부수 효과가 있을 수 있는 작업에 재시도 메커니즘을 구현할 때는 주의해야 합니다. 재시도하면 의도하지 않은 결과로 이어질 수 있기 때문입니다.

예제

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
 const [data, setData] = useState(null);
 const [error, setError] = useState(null);
 const [isLoading, setIsLoading] = useState(true);
 const [retryCount, setRetryCount] = useState(0);

 useEffect(() => {
 const fetchData = async () => {
 setIsLoading(true);
 try {
 const response = await fetch('https://api.example.com/data');
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`);
 }
 const result = await response.json();
 setData(result);
 setError(null);
 } catch (e) {
 setError(e);
 setRetryCount(prevCount => prevCount + 1);
 } finally {
 setIsLoading(false);
 }
 };

 if (error && retryCount < 3) {
 const retryDelay = Math.pow(2, retryCount) * 1000; // 지수 백오프
 console.log(`${retryDelay / 1000}초 후에 재시도합니다...`);
 const timer = setTimeout(fetchData, retryDelay);
 return () => clearTimeout(timer); // 언마운트 또는 리렌더 시 타이머 정리
 }

 if (!data) {
 fetchData();
 }

 }, [error, retryCount, data]);

 if (isLoading) {
 return 
데이터 로딩 중...
;
 }

 if (error) {
 return 
오류: {error.message} - {retryCount}회 재시도함.
;
 }

 return 
데이터: {JSON.stringify(data)}
;
}

function App() {
 return (
 
 
 
 );
}

export default App;

이 예제에서 DataFetchingComponent는 API에서 데이터를 가져오려고 시도합니다. 오류가 발생하면 retryCount를 증가시키고 지수적으로 증가하는 지연 시간 후에 작업을 재시도합니다. ErrorBoundary는 처리되지 않은 예외를 포착하고 재시도 횟수를 포함한 오류 메시지를 표시합니다.

5. Error Boundary와 서버 사이드 렌더링(SSR)

서버 사이드 렌더링(SSR)을 사용할 때 오류 처리는 더욱 중요해집니다. 서버 사이드 렌더링 과정에서 발생하는 오류는 전체 서버를 다운시켜 다운타임과 좋지 않은 사용자 경험으로 이어질 수 있습니다. 서버와 클라이언트 양쪽에서 오류를 포착하도록 Error Boundary가 올바르게 구성되었는지 확인해야 합니다. 종종 Next.js나 Remix와 같은 SSR 프레임워크에는 React Error Boundary를 보완하는 자체 내장 오류 처리 메커니즘이 있습니다.

6. Error Boundary 테스트하기

Error Boundary가 올바르게 작동하고 예상된 대체 UI를 제공하는지 확인하려면 테스트가 필수적입니다. Jest나 React Testing Library와 같은 테스트 라이브러리를 사용하여 오류 상황을 시뮬레이션하고 Error Boundary가 오류를 포착하여 적절한 대체 UI를 렌더링하는지 확인하세요. 다양한 유형의 오류와 엣지 케이스를 테스트하여 Error Boundary가 견고하고 광범위한 시나리오를 처리할 수 있도록 해야 합니다.

예제

import { render, screen } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';

function ComponentThatThrows() {
 throw new Error('이 컴포넌트는 오류를 발생시킵니다');
 return 
이것은 렌더링되어서는 안 됩니다
;
}

test('오류가 발생했을 때 대체 UI를 렌더링합니다', () => {
 render(
 
 
 
 );

 const errorMessage = screen.getByText(/문제가 발생했습니다/i);
 expect(errorMessage).toBeInTheDocument();
});

이 테스트는 ErrorBoundary 내에서 오류를 발생시키는 컴포넌트를 렌더링합니다. 그런 다음 오류 메시지가 문서에 있는지 확인하여 대체 UI가 올바르게 렌더링되었는지 검증합니다.

7. 우아한 성능 저하(Graceful Degradation)

Error Boundary는 React 애플리케이션에서 우아한 성능 저하를 구현하는 핵심 요소입니다. 우아한 성능 저하란 애플리케이션의 일부가 실패하더라도 기능이 축소된 상태로 계속 작동하도록 설계하는 관행입니다. Error Boundary를 사용하면 실패한 컴포넌트를 격리하고 나머지 애플리케이션에 영향을 미치는 것을 방지할 수 있습니다. 대체 UI와 대안 기능을 제공함으로써 오류가 발생하더라도 사용자가 필수 기능에 계속 액세스할 수 있도록 보장할 수 있습니다.

피해야 할 일반적인 함정

ErrorBoundary는 강력한 도구이지만, 피해야 할 몇 가지 일반적인 함정이 있습니다:

• 비동기 코드 감싸지 않기: ErrorBoundary는 렌더링 중, 생명주기 메서드, 생성자에서 발생하는 오류만 포착합니다. 비동기 코드(예: setTimeout, Promises)의 오류는 try...catch 블록을 사용하여 포착하고 비동기 함수 내에서 적절하게 처리해야 합니다.
• Error Boundary 남용하기: 애플리케이션의 넓은 부분을 단일 ErrorBoundary로 감싸는 것을 피하세요. 이는 오류의 원인을 격리하기 어렵게 만들고 일반적인 대체 UI가 너무 자주 표시되게 할 수 있습니다. 세분화된 Error Boundary를 사용하여 특정 컴포넌트나 기능을 격리하세요.
• 오류 정보 무시하기: 단순히 오류를 포착하고 대체 UI를 표시하는 데 그치지 마세요. 오류 정보(컴포넌트 스택 포함)를 오류 보고 서비스나 콘솔에 반드시 기록하세요. 이는 근본적인 문제를 진단하고 수정하는 데 도움이 됩니다.
• 프로덕션 환경에서 민감한 정보 표시하기: 프로덕션 환경에서 상세한 오류 정보(예: 스택 트레이스)를 표시하는 것을 피하세요. 이는 사용자에게 민감한 정보를 노출할 수 있으며 보안 위험이 될 수 있습니다. 대신 사용자 친화적인 오류 메시지를 표시하고 상세 정보는 오류 보고 서비스에 기록하세요.

함수형 컴포넌트 및 훅과 함께 사용하는 Error Boundary

Error Boundary는 클래스 컴포넌트로 구현되지만, 훅을 사용하는 함수형 컴포넌트 내의 오류를 처리하는 데 여전히 효과적으로 사용할 수 있습니다. 일반적인 접근 방식은 이전에 설명한 것처럼 함수형 컴포넌트를 ErrorBoundary 컴포넌트로 감싸는 것입니다. 오류 처리 로직은 ErrorBoundary 내에 존재하며, 함수형 컴포넌트의 렌더링이나 훅 실행 중에 발생할 수 있는 오류를 효과적으로 격리합니다.

구체적으로, 함수형 컴포넌트의 렌더링 중이나 useEffect 훅의 본문 내에서 발생하는 모든 오류는 ErrorBoundary에 의해 포착됩니다. 그러나 ErrorBoundary는 함수형 컴포넌트 내의 DOM 요소에 연결된 이벤트 핸들러(예: onClick, onChange) 내에서 발생하는 오류는 포착하지 않는다는 점에 유의하는 것이 중요합니다. 이벤트 핸들러의 경우, 오류 처리를 위해 전통적인 try...catch 블록을 계속 사용해야 합니다.

오류 메시지의 국제화 및 현지화

전 세계 사용자를 위한 애플리케이션을 개발할 때는 오류 메시지를 국제화하고 현지화하는 것이 중요합니다. ErrorBoundary의 대체 UI에 표시되는 오류 메시지는 더 나은 사용자 경험을 제공하기 위해 사용자가 선호하는 언어로 번역되어야 합니다. i18next나 React Intl과 같은 라이브러리를 사용하여 번역을 관리하고 사용자의 로케일에 따라 적절한 오류 메시지를 동적으로 표시할 수 있습니다.

i18next 사용 예제

import i18next from 'i18next';
import { useTranslation } from 'react-i18next';

i18next.init({
  resources: {
    en: {
      translation: {
        'error.generic': '문제가 발생했습니다. 나중에 다시 시도해주세요.',
        'error.network': '네트워크 오류. 인터넷 연결을 확인해주세요.',
      },
    },
    fr: {
      translation: {
        'error.generic': '오류가 발생했습니다. 나중에 다시 시도해 주세요.',
        'error.network': '네트워크 오류. 인터넷 연결을 확인해 주세요.',
      },
    },
  },
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // react는 기본적으로 이스케이프 처리하므로 필요하지 않음
  },
});

function ErrorFallback({ error }) {
  const { t } = useTranslation();

  let errorMessageKey = 'error.generic';
  if (error instanceof NetworkError) {
    errorMessageKey = 'error.network';
  }

  return (
    

      
{t('error.generic')}
      
{t(errorMessageKey)}
    
  );
}

function ErrorBoundary({ children }) {
  const [hasError, setHasError] = useState(false);
  const [error, setError] = useState(null);

  static getDerivedStateFromError = (error) => {
    // 다음 렌더링에서 대체 UI를 표시하도록 상태를 업데이트
    // return { hasError: true }; // 이 코드는 훅과 함께 그대로 작동하지 않음
    setHasError(true);
    setError(error);
  }

  if (hasError) {
    // 어떤 커스텀 대체 UI든 렌더링할 수 있습니다
    return ;
  }

  return children;
}

export default ErrorBoundary;

이 예제에서는 i18next를 사용하여 영어와 프랑스어 번역을 관리합니다. ErrorFallback 컴포넌트는 useTranslation 훅을 사용하여 현재 언어에 따라 적절한 오류 메시지를 가져옵니다. 이를 통해 사용자는 선호하는 언어로 오류 메시지를 볼 수 있어 전반적인 사용자 경험을 향상시킵니다.

결론

React ErrorBoundary 컴포넌트는 견고하고 사용자 친화적인 React 애플리케이션을 구축하는 데 중요한 도구입니다. Error Boundary를 구현함으로써 오류를 정상적으로 처리하고, 애플리케이션 충돌을 방지하며, 전 세계 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다. Error Boundary의 원리를 이해하고, 세분화된 Error Boundary, 오류 로깅, 커스텀 대체 UI와 같은 고급 전략을 구현하며, 일반적인 함정을 피함으로써, 전 세계 사용자의 요구를 충족하는 더 탄력적이고 신뢰할 수 있는 React 애플리케이션을 구축할 수 있습니다. 진정으로 포괄적인 사용자 경험을 제공하기 위해 오류 메시지를 표시할 때 국제화와 현지화를 고려하는 것을 잊지 마십시오. 웹 애플리케이션의 복잡성이 계속 증가함에 따라, 고품질 소프트웨어를 구축하는 개발자에게 오류 처리 기술을 마스터하는 것은 점점 더 중요해질 것입니다.