⚛️ Error boundary

😱 앱 개발 도중 에러가 발생 처리를 해주지 않는다면 머리뿐만 아니라 유저에게 보여줄 화면도 새하얗게 변할 거 같다.
🤔 리액트에서는 에러처리를 어떻게 해줄 수 있을까?

리액트의 Error boundary (legacy)

개발 문서에 의하면 일반적으로 리액트는 렌더링 도중에 에러가 발생하면 UI를 화면에서 제거한다.

이를 방지하기 위해서는 해당 UI를 Error boundary로 감싸줄 수 있다.

 

즉, Error boundary는 에러가 나서 제거된 UI대신에 화면에 fallback UI를 보여주는 특수한 컴포넌트다.

 

Error boundary를 구현하기 위해서는 static getDerivedStateFromError를 제공해야 한다.

static getDerivedStateFromError를 제공해야 에러에 따라 state을 업데이트하고 유저한테 에러 메시지를 보여줄 수 있기 때문이다.

 

추가적으로 componentDidCatch를 구현하면 분석 서비스에 쓰일 에러 로깅 로직을 추가할 수도 있다.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 다음 render 시에 fallback UI가 보이도록 state 업데이트
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // 아무 커스텀 fallback UI를 렌더할 수 있다.
      return this.props.fallback;
    }

    return this.props.children;
  }
}

// 컴포넌트 트리 일부를 감싸주면 된다.
<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

 

Profile 나 자식 컴포넌트에서 에러를 던진다면 ErrorBoundary에서는 그 에러를 catch 하고,

제공한 fallback UI와 함께 에러 메시지를 보여주고, 에러 공지 서비스한테 production error report를 보낸다.

📝 현재는 함수 컴포넌트로 error boundary를 작성할 수는 없다.
하지만 직접 error boundary class를 작성하지 않고 react-error-boundary 라이브러리를 활용할 수 있다.

함수형 컴포넌트에서의 Error boundary

리액트의 Error boundary가 할 수 없는 몇 가지를 살펴보자면

• 이벤트 핸들러 내의 에러 캐치 (try-catch 블록으로 감싸줘야 함) ❌
• 비동기 코드 (API, setTimeout, requestAnimationFrame 등등) 내에서 캐치 ❌
• 서버사이드 렌더링 내의 에러 캐치 ❌
• Error boundary 자체 내의 에러 캐치 ❌
• 함수 컴포넌트에 사용 ❌
• 내부에 훅 사용 ❌

개발 문서에서 나왔듯이 전통적인 Error Boundary 컴포넌트에 wrapper를 쓰인 react-error-boundary를 활용해서 위의 이슈들을 극복할 수 있다.

사용법

전체 애플리케이션 또는 각각의 컴포넌트를 <ErrorBoundary>로 감싸줄 수 있다.

 

기본적인 구성을 살펴보자.

 

다음은 애플리케이션 에러가 발생하면 fallback UI를 보여주는 예시다.

import React from 'react';
import { ErrorBoundary } from "react-error-boundary";

const App = () => {
return <ErrorBoundary fallback={<div>Something went wrong</div>}>
/* rest of your component */
</ErrorBoundary>
}

 

다음과 같이 fallback 컴포넌트로 상세한 에러 사항을 메시지로 나타내고 싶을 수 있다.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 function fallbackRender({ error, resetErrorBoundary }) {
   // resetErrorBoundary()를 호출하여 에러 바운더리를 reset하고 랜더링을 재시도 한다.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}</pre>
     </div>
   );
 }

 const App = () => {
 return <ErrorBoundary 
 fallbackRender={fallbackRender}
 onReset={(details) => {
 	 // 앱의 state을 리셋해서 에러가 다시 발생하는 걸 막기
   }}
 >
 /* rest of your component */
 </ErrorBoundary>
 }

 

또는 fallback이나 fallbackRender 대신 다음과 같이 다른 컴포넌트를 보여주고 싶을 수 있다.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}</pre>
     </div>
   );
 }

 const App = () => {
 return <ErrorBoundary 
 FallbackComponent={Fallback}
 onReset={(details) => {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 </ErrorBoundary>
 }

 

만약 에러 로그를 하고 싶다면 다음과 같이 추가해 줄 수 있다.

 import React from 'react';
 import { ErrorBoundary } from "react-error-boundary";

 const logError = (error: Error, info: { componentStack: string }) => {
   // Do something with the error, e.g. log to an external API
 };

 const Fallback = ({ error, resetErrorBoundary }) => {
   // Call resetErrorBoundary() to reset the error boundary and retry the render.
   return (
     <div role="alert">
       <p>Something went wrong:</p>
       <pre style={{ color: "red" }}>{error.message}</pre>
     </div>
   );
 }
 // You can use fallback / fallbackRender / FallbackComponent anything
 const App = () => {
 return <ErrorBoundary 
 FallbackComponent={Fallback}
 onError={logError}
 onReset={(details) => {
     // Reset the state of your app so the error doesn't happen again
   }}
 >
 /* rest of your component */
 </ErrorBoundary>
 }

 

또는 이벤트 핸들러나 비동기 코드에 에러를 캐치할 수 있다.

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

 function Example() {
   const { showBoundary } = useErrorBoundary();
   const getGreeting = async(name) => {
     try {
         const response = await fetchGreeting(name);
         // rest of your code
     } catch(error){
          // Show error boundary
         showBoundary(error);
     }
   }
   useEffect(() => {
    getGreeting()
   });

   return <Whatever UI you want to render/>
 }

 

다만 ErrorBoundary는 클라이언트 쪽 컴포넌트다.

따라서 nextjs에서 사용 시 'use client'을 파일 최상단에 언급해 주거나,

serializeable (바이트 스트림으로 프롭스 형태를 자유롭게 전환시킬 수 있는 특성, js에서는 JSON.stringify()와 JSON.parse()로 전환할 수 있다) props만 전달할 수 있다.

 

📚 References

https://medium.com/@vnkelkar11/using-error-boundary-in-react-a29ded725eee

Mastering Error Boundaries in React: A Guide to Effective Error Handling

https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

Component – React