[React] Error_Boundary

Error Boundary

에러 바운더리는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 풀백 UI를 보여주는 React 컴포넌트로 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체트리에서 에러를 잡아낸다.

과거에는 컴포넌트 내부의 자바스크립트 에러를 정상적으로 처리 할 수 있는 방법이 없었는데, 에러 바운더리를 설정해주면 바운더리 내의 컴포넌트와 그 하위 컴포넌트에서 발생하는 에러를 감지해서 fallback UI를 띄어 줄 수 있다.

예외(에러 바운더리에서 포착하지 못하는 것)

• 이벤트 핸들러
• 비동기적 코드
• 서버 사이드 렌더링
• 자식에서가 아닌 에러 경계 자체에서 발생하는 에러

$ npm install --save react-error-boundary

function App(){
  ...
  return (
    <ErrorBoundary
          FallbackComponent={OurFallbackComponent}
        >
          <ComponentThatMightThrowAnError/>
    </ErrorBoundary>
  );
}

const OurFallbackComponent = ({ error, resetErrorBoundary }) => {
  return (
    <div>
      <h1>An error occurred: {error.message}</h1>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
};

가장 기본적인 사용법은 fallback UI로 사용할 컴포넌트를 생성하고 ErrorBoundary 컴포넌트로 에러 바운더리를 설정한 컴포넌트를 감싸준 후 FallbackComponent 속성에 생성한 fallback 컴포넌트를 전달하면 된다.

fallback 컴포넌트는 prop으로 error, resetErrorBounday를 받게 되는데, 에러가 발생했을 때 error에는 에러 정보가 담겨있고 resetErrorBoundary는 실행 시 에러를 초기화 시킨다.

import React, { useState } from "react";

import { useErrorHandler } from "react-error-boundary";

function Greeting() {
  const [greeting, setGreeting] = useState(null);
  const handleError = useErrorHandler();

  async function handleSubmit(event) {
    event.preventDefault();
    const name = event.target.elements.name.value;
    try {
      const newGreeting = await fetchGreeting(name);
      setGreeting(newGreeting);
    } catch (error) {
      handleError(error);
    }
  }

  return greeting ? (
    <div>{greeting}</div>
  ) : (
    <form onSubmit={handleSubmit}>
      <label>Name</label>
      <input id="name" />
      <button type="submit">get a greeting</button>
    </form>
  );
}

에러 바운더리는 비동기 코드에 대한 에러를 인지하지 못하기 때문에 흔하게 에러가 발생하는 AJAX 요청도 useErrorHandler를 사용하여 핸들링 해주어야 한다.