[React] react-error-boundary로 에러 핸들링하기
😀 해당 포스팅은 React 애플리케이션에서 오류를 처리하기 위해 react-error-boundary 라이브러리를 사용하여 에러 바운더리를 구현하는 방법과, 이를 통해 동기 및 비동기 오류를 효과적으로 관리하는 방법을 설명하고자 합니다.
React Error Handling With React-Error-Boundary
React에서 에러를 핸들링하는 방법 중 하나는 오류 경계(error boundaries)를 사용하는 것이다. 이 글에서는 react-error-boundary를 사용한 React 오류 처리에 대해 알아보았다.
React에서의 오류 경계
React 에러 바운더리는 React 애플리케이션에서 오류를 처리하는 데 중요한 부분이다. 에러 바운더리는 자바스크립트 오류를 자식 컴포넌트 트리의 어느 곳에서든 잡아내고, 그 오류를 기록하며, 충돌한 컴포넌트 트리 대신 대체 UI를 표시하는 React 컴포넌트이다. 이것은 마치 컴포넌트에 대한 자바스크립트의 catch {} 블록과 같다.
에러 바운더리가 도입되기 전에는 컴포넌트 내부의 오류가 전파되어 결국 흰 화면이나 깨진 UI를 유발해 전체 사용자 경험에 영향을 미쳤다. 그러나 에러 바운더리를 사용하면 이러한 처리되지 않은 오류를 효과적으로 관리할 수 있다.
에러 바운더리를 어디에 배치할지에 대해 생각할 때, 애플리케이션 전체에 설정하거나 더 세밀하게 제어하기 위해 개별 컴포넌트 주위에 설정할 수 있다. 중요한 점은 에러 바운더리는 렌더링, 생명주기 메서드 및 그 아래의 전체 트리 생성자에서 발생하는 오류를 잡아낸다는 것이다. 하지만 에러 바운더리는 다음과 같은 경우에는 오류를 잡아내지 않는다:
- 이벤트 핸들러(이 경우에는 일반적인 try/catch를 사용해야 한다)
- 비동기 코드(예: setTimeout 또는 requestAnimationFrame 콜백)
- 서버 측 렌더링
- 에러 바운더리 자체에서 발생한 오류(자식 컴포넌트의 오류가 아닌 경우)
에러 바운더리는 React v16에서 도입되었으며, 이를 사용하려면 getDerivedStateFromError() 또는 componentDidCatch() 생명주기 메서드를 포함한 클래스 컴포넌트를 정의해야 한다:
getDerivedStateFromError(): 이 생명주기 메서드는 오류가 발생한 후 대체 UI를 렌더링한다. 이는 렌더링 단계에서 호출되므로 부작용(side effect)은 허용되지 않는다.
componentDidCatch(): 이 메서드는 오류 정보를 기록하는 데 사용된다. 이는 커밋 단계에서 호출되므로 부작용은 허용된다.
다음은 React 문서에서 가져온, getDerivedStateFromError() 및 componentDidCatch() 생명주기 메서드를 구현한 클래스 컴포넌트의 간단한 예시이다:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 다음 렌더링에서 대체 UI를 표시하도록 상태를 업데이트한다.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// 오류를 오류 보고 서비스에 기록할 수도 있다.
console.log(error, errorInfo);
}
render() {
if (this.state.hasError) {
// 커스텀 대체 UI를 렌더링할 수 있다.
return <h1>문제가 발생했습니다.</h1>;
}
return this.props.children;
}
}
// 컴포넌트에서 사용 예시
class App extends React.Component {
render() {
return (
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
);
}
}
이 예시에서 ErrorBoundary는 자식 컴포넌트 트리에서 발생하는 자바스크립트 오류를 잡아내고, 해당 오류를 콘솔에 기록한 후 "문제가 발생했습니다."라는 메시지를 렌더링한다. MyComponent에서 오류가 발생하면, ErrorBoundary가 이를 잡아내어 콘솔에 기록하고, MyComponent 대신 오류 메시지를 렌더링한다.
react-error-boundary 사용하기
클래스 컴포넌트와 그 생명주기 메서드를 사용해 에러 바운더리를 구현할 수 있지만, react-error-boundary는 이 기능을 한 단계 더 발전시켜 보다 간단하고 사용하기 쉽게 만들어준다. 이 라이브러리는 작은 규모의 라이브러리로, React 컴포넌트에서 자바스크립트 오류를 유연하게 처리하는 방법을 제공한다.
react-error-boundary는 React 훅과 함수형 컴포넌트를 사용하는 보다 현대적인 접근 방식을 사용하며, 이는 현재 React 개발 트렌드에 더 잘 맞는다. 이 라이브러리는 오류가 발생할 가능성이 있는 코드를 감싸는 데 사용할 수 있는 ErrorBoundary라는 간단한 컴포넌트를 제공한다.
react-error-boundary의 ErrorBoundary 컴포넌트
ErrorBoundary 컴포넌트에는 fallbackRender(또는 fallbackUI)라는 prop이 있으며, 이는 오류가 감지되었을 때 표시할 함수 또는 React 요소를 전달받는다. 또한, resetKeys라는 prop을 사용하여 특정 props가 변경될 때 컴포넌트 상태를 재설정할 수 있다.
react-error-boundary의 장점은 클래스 컴포넌트와 상태 관리를 직접 작성할 필요가 없다는 점이다. 라이브러리가 내부적으로 모든 복잡한 작업을 처리해주기 때문에, 개발자는 애플리케이션 개발에 집중할 수 있다.
다음은 react-error-boundary를 컴포넌트에서 사용하는 예시이다:
import { ErrorBoundary } from 'react-error-boundary';
function MyFallbackComponent({ error, resetErrorBoundary }) {
return (
<div role="alert">
<p>문제가 발생했습니다:</p>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>다시 시도</button>
</div>
);
}
function MyComponent() {
// 오류가 발생할 수 있는 컴포넌트 로직
}
function App() {
return (
<ErrorBoundary
FallbackComponent={MyFallbackComponent}
onReset={() => {
// 여기에서 앱의 상태를 재설정한다.
}}
resetKeys={['someKey']}
>
<MyComponent />
</ErrorBoundary>
);
}
이 예시에서 MyFallbackComponent는 ErrorBoundary가 오류를 감지했을 때 렌더링된다. 오류 메시지를 표시하고, 오류 상태를 재설정하고 컴포넌트를 다시 렌더링할 수 있는 버튼을 제공한다. onReset prop은 오류가 발생하기 전에 발생한 부작용을 정리하는 데 사용되며, resetKeys prop은 컴포넌트 상태를 언제 재설정할지 제어하는 데 사용된다.
ErrorBoundary는 또한 onError prop을 제공하는데, 이는 오류가 감지될 때마다 호출되는 함수이다. 이 prop을 사용하여 오류를 오류 보고 서비스에 기록할 수 있다. 아래는 오류를 로그로 남기는 예시이다:
// 오류 기록 함수
function logErrorToService(error, info) {
// 선호하는 오류 로그 서비스 사용
console.error("Caught an error:", error, info);
}
// App 컴포넌트
function App() {
return (
<ErrorBoundary FallbackComponent={ErrorFallback} onError={logErrorToService}>
<MyComponent />
</ErrorBoundary>
);
}
react-error-boundary의 useErrorBoundary 훅
useErrorBoundary 훅은 react-error-boundary에서 제공하는 또 다른 유용한 기능이다. 이 훅은 에러 바운더리를 쉽게 표시하고 해제할 수 있게 해주는 커스텀 훅이다. 던져진 오류는 클래스 컴포넌트의 생명주기 메서드나 렌더 함수에서 오류를 던졌을 때와 마찬가지로 가장 가까운 에러 바운더리에 의해 포착된다.
useErrorBoundary 훅은 특히 비동기 코드에서 유용한데, 이 경우 컴포넌트의 에러 바운더리로는 오류를 잡아내지 못할 수 있기 때문이다. 아래는 useErrorBoundary 훅을 사용하는 예시이다:
import { useErrorBoundary } from 'react-error-boundary';
function MyComponent() {
const { showBoundary } = useErrorBoundary();
async function fetchData() {
try {
// 데이터를 fetch하는 로직
} catch (error) {
showBoundary(error);
}
}
return (
...
);
}
function App() {
return (
<ErrorBoundary FallbackComponent={ErrorFallback}>
<MyComponent />
</ErrorBoundary>
);
}
이 예시에서 MyComponent는 useErrorBoundary 훅을 사용하여 에러를 전달할 수 있는 함수를 얻는다. fetchData 함수는 데이터를 가져오는 비동기 함수이며, 오류가 발생할 경우 해당 오류를 showBoundary 함수에 전달하여 ErrorBoundary가 이를 잡아내도록 한다.
useErrorBoundary 훅은 함수형 컴포넌트에서 오류를 처리하는 강력한 방법을 제공한다. 이 훅은 react-error-boundary의 ErrorBoundary 컴포넌트와 원활하게 작동하여, React에서의 오류 처리를 훨씬 간단하게 만든다.
또한 useErrorBoundary 훅을 통해 에러 바운더리를 재설정할 수도 있다. resetBoundary 메서드는 처음에 실패했던 렌더링을 다시 시도하도록 에러 바운더리에 요청한다:
import { useErrorBoundary } from "react-error-boundary";
function ErrorFallback({ error }) {
const { resetBoundary } = useErrorBoundary();
return (
<div>
<p>문제가 발생했습니다:</p>
<pre>{error.message}</pre>
<button onClick={resetBoundary}>다시 시도</button>
</div>
);
}
withErrorBoundary 함수: HOC로 사용하기
React 훅과 함수형 컴포넌트가 점점 인기를 끌고 있지만, 여전히 클래스 컴포넌트와 작업하거나 고차 컴포넌트(HOC) 패턴을 선호하는 경우가 있을 수 있다. react-error-boundary 패키지는 이러한 경우를 위한 해결책으로 withErrorBoundary HOC를 제공한다.
withErrorBoundary는 주어진 컴포넌트를 에러 바운더리로 감싸는 고차 컴포넌트이다. 이는 컴포넌트의 구현을 변경하거나 추가적인 JSX를 트리에 넣지 않고도 에러 바운더리를 추가하는 유용한 방법이다. 아래는 withErrorBoundary를 사용하는 예시이다:
import { withErrorBoundary } from 'react-error-boundary';
function MyComponent() {
// 컴포넌트 로직
}
const MyComponentWithErrorBoundary = withErrorBoundary(MyComponent, {
FallbackComponent: ErrorFallback,
onError: logErrorToService,
onReset: handleReset,
resetKeys: ['someKey']
});
function App() {
return <MyComponentWithErrorBoundary someKey={someKey} />;
}
이 예시에서 MyComponent는 withErrorBoundary를 사용하여 에러 바운더리로 감싸져 있다. withErrorBoundary의 두 번째 인수는 옵션 객체로, ErrorBoundary 컴포넌트에 제공할 수 있는 FallbackComponent, onError, onReset, resetKeys와 같은 props를 전달할 수 있다.
이 HOC 방식은 컴포넌트의 구현을 수정하지 않고 에러 바운더리를 추가하고 싶을 때나, 훅을 사용할 수 없는 클래스 컴포넌트와 작업할 때 유익한 해결책이 될 수 있다. 이는 React 개발에서 서로 다른 코딩 스타일과 패러다임을 수용할 수 있는 react-error-boundary의 유연성을 보여준다.
react-error-boundary 사용의 장점
react-error-boundary는 React 애플리케이션에서 오류를 처리하는 데 이상적인 솔루션이 되는 여러 가지 장점을 제공한다. 그 주요 장점은 다음과 같다:
1. 단순성:
react-error-boundary 라이브러리는 이해하고 사용하기 쉬운 간단하고 직관적인 API를 제공한다. 이 라이브러리는 오류 처리를 복잡하게 만들지 않고, 개발자에게 오류를 관리할 수 있는 간단한 방법을 제시한다.
2. 함수형 컴포넌트 친화적:
전통적인 에러 바운더리는 클래스 컴포넌트를 요구하지만, react-error-boundary는 함수형 컴포넌트에 맞추어 설계되었다. 훅을 사용하여 현재의 React 개발 트렌드와 더 잘 맞는다.
3. 다용성 :
react-error-boundary는 에러 바운더리를 여러 가지 방식으로 사용할 수 있게 한다. 컴포넌트로 사용하거나, HOC로 사용하거나, 또는 커스텀 훅을 통해 사용할 수 있다. 이 다용성 덕분에 개발자는 자신의 필요와 코딩 스타일에 맞는 최적의 접근 방식을 선택할 수 있다.
4. 커스터마이징 가능한 대체 UI :
react-error-boundary는 에러가 감지되었을 때 표시할 대체 UI를 커스터마이징할 수 있게 해준다. 이는 애플리케이션이 크래시하거나 빈 화면을 표시하는 대신 훨씬 더 나은 사용자 경험을 제공할 수 있다.
5. 재설정 기능 :
이 라이브러리는 에러 상태를 재설정하여 애플리케이션이 에러에서 복구할 수 있도록 한다. 이 기능은 페이지를 새로 고침하지 않고도 해결할 수 있는 일시적인 에러에 특히 유용하다.
6. 에러 보고 :
onError prop을 사용하면 에러를 에러 보고 서비스에 기록할 수 있으며, 이는 디버깅 및 문제 해결에 유용한 정보를 제공한다.
7. 커뮤니티 및 유지 관리 :
react-error-boundary는 활발하게 유지 관리되며 React 커뮤니티에서 널리 사용되고 있어, 정기적인 업데이트와 개선을 기대할 수 있다.
모든 에러 잡기와 재시도 메커니즘
에러 바운더리를 구현할 때 중요한 고려 사항 중 하나는 애플리케이션 내의 모든 잠재적인 에러가 적절히 포착되고 처리되는지 확인하는 것이다. react-error-boundary 라이브러리는 컴포넌트 트리의 어디에서나 발생하는 에러를 잡아내는 기능을 제공함으로써 이 문제를 해결한다.
이 기능은 클래스 컴포넌트의 생명주기 메서드나 함수형 컴포넌트의 렌더 함수에서 발생하는 에러뿐만 아니라 useErrorBoundary 훅을 사용할 때 비동기 코드에서 발생하는 에러도 잡아낸다. 그러나 에러를 잡는 것은 첫 번째 단계에 불과하다.
동일하게 중요한 것은 에러가 잡힌 후 무엇을 할지 결정하는 것이다. 이때 재시도 메커니즘의 개념이 등장한다. 재시도 메커니즘은 애플리케이션이 에러에서 복구하려고 시도하는 방법으로, 종종 실패한 작업을 다시 시도하는 방식으로 작동한다.
react-error-boundary는 resetErrorBoundary 함수와 resetKeys prop을 통해 재시도 메커니즘에 대한 내장 지원을 제공한다. resetErrorBoundary는 에러를 지우고 컴포넌트 트리를 다시 렌더링하도록 호출될 수 있다. 이는 사용자가 실패한 작업을 다시 시도할 수 있도록 버튼 클릭과 같은 수동 동작으로 트리거될 수 있다.
resetKeys는 값 배열로, 해당 값이 변경되면 에러 바운더리를 재설정한다. 이 강력한 기능을 통해 에러 바운더리는 특정 props나 상태 값이 변경될 때 자동으로 재시도하고, 컴포넌트 트리를 다시 렌더링할 수 있다. 아래는 react-error-boundary를 사용한 재시도 메커니즘 구현 예시이다:
import { ErrorBoundary } from 'react-error-boundary';
function ErrorFallback({ error, resetErrorBoundary }) {
return (
<div role="alert">
<p>문제가 발생했습니다:</p>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>다시 시도</button>
</div>
);
}
function MyComponent({ retryCount }) {
// 자바스크립트 오류가 발생할 수 있는 컴포넌트 로직
}
function App() {
const [retryCount, setRetryCount] = React.useState(0);
return (
<ErrorBoundary
FallbackComponent={ErrorFallback}
onReset={() => setRetryCount(retryCount + 1)} // reset 시 재시도 횟수를 증가시킴
resetKeys={[retryCount]} // `retryCount`가 변경될 때 에러 바운더리를 재설정
>
<MyComponent retryCount={retryCount} />
</ErrorBoundary>
);
}
이 예시에서 App 컴포넌트는 retryCount 상태를 유지한다. ErrorFallback 컴포넌트에서 "다시 시도" 버튼이 클릭되면 resetErrorBoundary가 호출된다. 그러면 onReset이 트리거되고 에러 상태가 지워진다. onReset은 retryCount를 증가시키며, resetKeys의 변경으로 인해 에러 바운더리가 재설정되고 MyComponent가 다시 렌더링된다.
에러 바운더리를 구현하는 일반적인 디자인 패턴
React 애플리케이션에서 에러 바운더리를 구현할 때 사용할 수 있는 여러 디자인 패턴이 있다. 어떤 패턴을 사용할지는 특정 사용 사례와 애플리케이션의 아키텍처에 따라 달라진다.
# 컴포넌트 수준 에러 바운더리
이 접근 방식은 개별 컴포넌트를 에러 바운더리로 감싸는 것이다. 이는 높은 수준의 세분화를 제공하며, 각 컴포넌트에서 개별적으로 에러를 처리할 수 있게 한다.
컴포넌트가 크래시되면 에러 바운더리가 에러를 잡아내고, 에러가 컴포넌트 트리 상단으로 전파되지 않도록 막는다. 이는 크래시된 컴포넌트만 영향을 받고, 애플리케이션의 나머지 부분은 정상적으로 작동할 수 있음을 의미한다.
컴포넌트 수준 에러 바운더리는 서로 독립적이고 상태를 공유하지 않는 컴포넌트가 있을 때 특히 유용하다. 한 컴포넌트가 실패하더라도 다른 컴포넌트에는 영향을 미치지 않는다. 그러나 많은 컴포넌트에 각자의 에러 바운더리를 추가해야 할 경우 중복이 많이 발생할 수 있다.
# 레이아웃 수준 에러 바운더리
레이아웃 수준 에러 바운더리는 컴포넌트 트리 상단에 위치하여 관련된 컴포넌트 그룹을 감싸는 방식이다. 이는 서로 관련된 컴포넌트가 공통된 상태를 공유할 때 좋은 선택이 될 수 있다.
한 컴포넌트에서 에러가 발생하면 레이아웃 수준의 에러 바운더리가 이를 잡아내고, 전체 컴포넌트 그룹에 대한 에러 메시지 또는 대체 UI를 표시할 수 있다. 이는 애플리케이션의 한 섹션, 예를 들어 사이드바나 대시보드와 같은 부분에 영향을 미치는 에러를 처리하는 좋은 방법이다.
그러나 레이아웃 수준 에러 바운더리는 컴포넌트 수준 에러 바운더리보다는 세분화가 덜 되어 있다. 한 컴포넌트에서 발생한 에러가 해당 그룹의 다른 컴포넌트에도 영향을 미칠 수 있다.
# 최상위 에러 바운더리
최상위 에러 바운더리는 컴포넌트 트리의 가장 상단에 위치하며, 애플리케이션에서 발생하는 모든 에러를 포괄적으로 처리하는 솔루션이다. 이 접근 방식은 애플리케이션의 어느 곳에서든 에러가 발생하면 이를 포착하고, 쉽게 처리할 수 있도록 해준다.
이를 통해 애플리케이션 전체가 크래시하는 것을 방지할 수 있다. 그러나 최상위 에러 바운더리는 가장 덜 세분화된 접근 방식이다. 에러가 발생하면 해당 에러는 특정 컴포넌트나 컴포넌트 그룹뿐만 아니라 애플리케이션 전체에 영향을 미칠 수 있다.
# 비동기 에러 처리
앞서 언급했듯이, react-error-boundary는 비동기 에러를 잡아내지 않는다. 이는 비동기 코드가 렌더링 외부에서 실행되기 때문이다. 비동기 함수나 프로미스에서 에러가 발생하면, 이는 거부된 프로미스로 반환된다. react-error-boundary는 렌더링과 생명주기 메서드에서 발생하는 동기적 에러를 처리하도록 설계되었기 때문에, 비동기 에러는 잡아내지 못한다.
유사하게 setTimeout이나 RequestAnimationFrame과 같은 함수는 코드가 렌더링이 완료된 후 실행되도록 예약하기 때문에, 실행 스택 외부에서 실행되어 react-error-boundary에서 잡아낼 수 없다.
그렇다면 이러한 에러를 어떻게 처리할 수 있을까? react-error-boundary가 잡아낼 수 없는 비동기 에러를 처리하려면, 비동기 catch 블록에서 ErrorBoundary를 트리거하는 커스텀 훅을 만들어야 한다.
예시:
import React, { useState, useEffect, useCallback } from "react";
import { ErrorBoundary } from "react-error-boundary";
const useAsyncError = () => {
const [_, setError] = useState();
return useCallback(
(error) => {
setError(() => {
throw error;
});
},
[setError]
);
};
const BrokenComponent = () => {
const [data, setData] = useState(null);
const throwError = useAsyncError();
useEffect(() => {
fetch("http://some-site.wtf/rest")
.then((res) => res.json())
.then(setData)
.catch((e) => {
throwError(e);
});
}, []);
return data;
};
export default function App() {
return (
<ErrorBoundary fallback={<p>문제가 발생했습니다</p>}>
<BrokenComponent />
</ErrorBoundary>
);
}
커스텀 훅 useAsyncError는 비동기 에러가 발생했을 때 호출되며, 그 후 ErrorBoundary를 트리거한다. 또한 catch 블록에서 특정 메시지를 던질 수도 있다:
.catch((e) => {
throwError(new Error("Async Error"));
});
대안으로 react-error-boundary는 이제 useErrorBoundary라는 훅을 제공하여 비동기 에러를 잡을 수 있다:
import React, { useState, useEffect } from "react";
import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";
const BrokenComponent = () => {
const [data, setData] = useState(null);
const { showBoundary } = useErrorBoundary();
useEffect(() => {
fetch("http://some-site.wtf/rest")
.then((res) => res.json())
.then(setData)
.catch((e) => {
showBoundary(e);
});
}, []);
return data;
};
export default function App() {
return (
<ErrorBoundary fallback={<p>문제가 발생했습니다</p>}>
<BrokenComponent />
</ErrorBoundary>
);
}
React 에러 바운더리 테스트
에러 바운더리의 테스트는 Jest와 React Testing Library와 같은 테스트 도구를 사용하여 에러 바운더리에 대한 유닛 테스트를 작성할 수 있다.
이 테스트들은 컴포넌트에서 에러를 시뮬레이션하고, 에러 바운더리가 에러를 잡아내고 대체 UI를 올바르게 렌더링하는지 검증할 수 있다. 아래는 에러 바운더리에 대한 유닛 테스트 예시이다:
import { render } from "@testing-library/react";
import ErrorBoundary from "../ErrorBoundary";
import ProblematicComponent from "../ProblematicComponent";
it("에러를 잡아내고 메시지를 렌더링한다", () => {
console.error = jest.fn();
render(
<ErrorBoundary>
<ProblematicComponent />
</ErrorBoundary>
);
expect(screen.getByText("문제가 발생했습니다.")).toBeInTheDocument();
});
이 테스트에서 <ProblematicComponent />는 의도적으로 에러를 발생시키도록 설계되었으며, ErrorBoundary 컴포넌트는 에러를 잡아내고 "문제가 발생했습니다"라는 텍스트를 렌더링해야 한다.
클래스 컴포넌트든 함수형 컴포넌트든, react-error-boundary는 이를 모두 지원한다. 컴포넌트, 고차 컴포넌트(HOC), 커스텀 훅을 포함한 유연한 API는 에러 처리를 컴포넌트에 통합할 수 있는 다양한 방법을 제공한다. 또한 커스텀 대체 UI, 에러 상태 재설정 기능, 에러 보고 기능을 지원하여, 문제가 발생하더라도 원활한 사용자 경험을 보장한다.
react-error-boundary를 React 애플리케이션에 통합하면 더 나은 에러 처리, 디버깅의 용이성, 그리고 더 나은 프로덕트를 만들 수 있다. 이 라이브러리를 사용함으로써 에러 관리에 대한 고민을 줄이고, 사용자에게 훌륭한 기능을 제공할 수 있을 것이다.
Reference
https://blog.logrocket.com/react-error-handling-react-error-boundary/