ErrorBoundary에서 이벤트 핸들러 에러 미처리

버튼 클릭 시 발생하는 에러가 ErrorBoundary에 잡히지 않습니다. 버그를 찾으세요:

JSX

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>오류가 발생했습니다</h1>;
    }
    return this.props.children;
  }
}

function BuggyButton() {
  const handleClick = () => {
    throw new Error('클릭 에러!');
  };

  return <button onClick={handleClick}>에러 발생</button>;
}

// 사용
<ErrorBoundary>
  <BuggyButton />
</ErrorBoundary>

답변

class 컴포넌트의 ErrorBoundary는 함수 컴포넌트의 에러를 잡지 못함 getDerivedStateFromError 대신 componentDidCatch를 써야 함 throw new Error 대신 console.error를 써야 함 ErrorBoundary는 이벤트 핸들러 내부의 에러를 잡지 못함 (렌더링 중 에러만 처리)

로그인 후 제출하기