Error Boundary

이전 프로젝트를 하면서 가장 아쉬웠던 부분이 바로 이 에러 바운더리이다. 책임 프론트 개발자분이 이 영역을 개발해 주셨는데, 지금 와서 보니 아쉬움이 너무 많다. 좀 더 세분화해서 각각 다른 화면을 제공하거나 다시 시도하는 버튼을 제공했더라면 훨씬 좋은 UX를 제공할 수 있었을 것 같다.

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

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

물론 만능은 아니고 이벤트 핸들러나 비동기적 코드, 서버 사이드 렌더링을 하는 경우, 에러 바운더리 자체에서 발생하는 에러 등은 감지하지 못한다.

에러 바운더리는 class 형으로만 현재 만들어져 있다. 때문에 class 형에서 사용하는 static getDerivedStateFromError() 나 componentDidCatch()와 같은 메소드를 Function 형에서는 사용할 수가 없다. 그래서 function 형을 사용하는 경우에는 react-error-boundary라는 라이브러리를 사용하면 된다.

import { ErrorBoundary } from '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 컴포넌트는 props로 error, resetErrorBoundary를 받게 되는데, 에러가 발생했을 때 error에는 에러 정보가 담겨있고 resetErrorBoundary는 실행 시 에러를 초기화시킨다.

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

function Greeting() {
	const [greeting, setGreeting] = React.useState(null)
    const handleError = useErrorHandler();
    
    function handleSubmit(event) {
    	event.preventDefault()
        const name = event.target.elements.name.value
        fetch(...).then(
        	res => setGreeting(res),
            handleError,
        )
    }
    
    // 또 다른 방법
    async function handleSubmit(event) {
    	event.preventDefault()
        const name = event.target.elements.name.value
        try {
        	const newGreeting = await fetch(...)
            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>
    )
}