ErrorBoundary

ErrorBoundary
에러 바운더리
하위 컴포넌트 트리에서 발생한 JavaScript 에러를 포착하여, 전체 앱이 하얀 화면(White Screen)으로 멈추는 것을 방지하고 대신 폴백(Fallback) UI를 보여주는 중요한 역할을 한다.
Error Boundary는 React Core 기능이다.
React 16(2017)부터 공식적으로 도입된 개념이다.
즉, React의 모든 프로젝트(CRA, Vite, Gatsby, Remix 등)에서 쓸 수 있다.
Error Boundary(에러 바운더리)는 React 컴포넌트 트리 안에서 렌더링 도중 발생한 에러를 감지해서, 앱 전체가 죽지 않도록 ‘대체 UI(fallback)’를 보여주는 보호 컴포넌트이다.
컴포넌트 트리의 오류를 감싸서 안전하게 격리(fallback)하는 방패막이

React 기본 에러 바운더리 (Class Component)

React 공식 문서에 따르면, 에러 바운더리는 현재 클래스 컴포넌트로만 구현할 수 있다.
getDerivedStateFromError와 componentDidCatch 생명주기 메서드를 사용한다.

import React, { Component, ErrorInfo, ReactNode } from 'react';

interface Props { children: ReactNode; fallback: ReactNode; }
interface State { hasError: boolean; }

class ErrorBoundary extends Component<Props, State> {
  state: State = { hasError: false };

  // 에러 발생 시 상태를 업데이트하여 다음 렌더링 때 폴백 UI를 보여줌
  static getDerivedStateFromError(_: Error): State {
    return { hasError: true };
  }

  // 에러 정보를 로깅 서비스(Sentry, LogRocket 등)에 전송
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo);
    // 예: Sentry.captureException(error);
  }

  render() {
    if (this.state.hasError) return this.props.fallback;
    return this.props.children;
  }
}