코딩/React Native

[RN] react-error-boundary 이용한 에러 페이지 추가하기.

카슈밀 2025. 2. 21. 23:48
반응형

https://www.npmjs.com/package/react-error-boundary

 

react-error-boundary

Simple reusable React error boundary component. Latest version: 5.0.0, last published: 2 months ago. Start using react-error-boundary in your project by running `npm i react-error-boundary`. There are 1487 other projects in the npm registry using react-err

www.npmjs.com

 

공식문서에 있는 에러페이지를 만들어도 되는데... 귀찮으니까...

 

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

function fallbackRender({ error, resetErrorBoundary }) {
  // Call resetErrorBoundary() to reset the error boundary and retry the render.
    const {reset} = useQueryErrorResetBoundary();


  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
}

<ErrorBoundary
  fallbackRender={fallbackRender} // 보여질 화면
  onReset={reset} // 다른 이벤트가 발생할떄 호출하는 속성 예를들어 tanstack 통신에러 등..
>
  <ExampleApplication />
</ErrorBoundary>;
728x90