ErrorBoundary는 React 16부터 도입된 개념으로, 컴포넌트 트리에서 발생하는 JavaScript 오류를 처리하기 위한 방법이다.
공식문서
❗️렌더링이 깨지지 않는 에러라면 감지되지 않는다.
// 렌더링이 깨지지 않는 에러 - 버튼을 클릭하면 에러는 던져지지만 렌더링은 그대로임
const Hello = () => {
return <button onClick={
() => {throw new Error();
}
}>World</button>;
}
// 렌더링이 깨지는 에러 - 버튼을 클릭하면 Hello가 렌더링하는 것이 없음
const Hello = () => {
const [error, setError] = useState(false);
if(error)
return <button onClick={
() => setError(true)
}>World</button>;
}
setTimeout
, requestAnimationFrame
)class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return this.props.fallback ? this.props.fallback : <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
getDerivedStateFromError
: 오류가 발생했을 때 state를 업데이트 함componentDidCatch
: error 정보를 사용하여 로그를 기록하거나 시스템에 오류 보고를 할 수 있음공식문서: https://github.com/bvaughn/react-error-boundary
React 공식 문서에서 안내된 기능과 거의 유사한 기능을 제공하면서, 함수형으로 ErrorBoundary를 사용할 수 있다는 장점이 있다.
"use client";
import { ErrorBoundary } from "react-error-boundary";
<ErrorBoundary fallback={<div>Something went wrong</div>}>
<ExampleApplication />
</ErrorBoundary>
에러를 감지하고 싶은 컴포넌트를 ErrorBoundary 컴포넌트로 감싼다.
props
fallback
: default fallback 컴포넌트fallbackRender
: 데이터에 따라 동적으로 생성한 fallback 컴포넌트를 리턴하는 함수FallbackComponent
: 데이터에 따라 동적으로 생성되는 fallback 컴포넌트 (왜 얘만 대문자로 시작하지??)onError
: 에러가 발생했을 때 실행되는 함수onReset
: ErrorBoundary가 리셋될 때 호출되는 함수. fallback 내부에서 resetErrorBoundary
가 실행될 때 실행된다.resetKeys
: 특정 key 값을 가지고 있는 배열. key 값이 변경되면 ErrorBoundary를 리셋한다.❓fallback, fallbackRender, FallbackComponent의 차이는?
fallback
: 단순히 ReactNode를 직접 제공fallbackRender
: 함수 형태로 제공FallbackComponent
: 컴포넌트 형태로 제공fallbackRender와 FallbackComponent는 큰 차이는 없는 것 같다..
"use client";
import { useErrorBoundary } from "react-error-boundary";
function Example() {
const { showBoundary } = useErrorBoundary();
useEffect(() => {
fetchGreeting(name).then(
response => {
// Set data in state and re-render
},
error => {
// Show error boundary
showBoundary(error);
}
);
});
// Render ...
}
function ErrorFallback({ error }) {
const { resetBoundary } = useErrorBoundary();
return (
<div role="alert">
<p>Something went wrong:</p>
<pre style={{ color: "red" }}>{error.message}</pre>
<button onClick={resetBoundary}>Try again</button>
</div>
);
}
에러를 감지하고 싶은 컴포넌트 내부에서 명시적으로 에러를 처리한다.
이 방법을 사용하면 ErrorBoundary가 감지할 수 없는 에러들도 처리할 수 있다.
showBoundary
: 호출 시 가장 가까이 있는 ErrorBoundary를 사용한다.resetBoundary
: 호출 시 가장 가까이 있는 ErrorBoundary를 리셋한다.❓HOC란?
고차 컴포넌트(Higher-Order Components)는 컴포넌트를 취하여 새로운 컴포넌트를 반환하는 함수이다.
"use client";
import {withErrorBoundary} from 'react-error-boundary'
const ComponentWithErrorBoundary = withErrorBoundary(ExampleComponent, {
fallback: <div>Something went wrong</div>,
onError(error, info) {
// Do something with the error
// E.g. log to an error logging client here
},
})
ComponentWithErrorBoundary
는 ExampleComponent
에 ErrorBoundary가 적용된 컴포넌트이다.