Remix의 오류 처리

6114 단어 react
응용 프로그램에서 예기치 않은 오류가 발생하면 항상 성가신 일입니다.

일반적으로 초기에 가장 일반적인 오류 잡기를 구축하는 것이 좋습니다. 그러나 항상 발생하는 것을 볼 수 없는 몇 가지 일반적인 오류가 있을 수 있습니다.

다행스럽게도 Remix는 이러한 오류 대부분을 포착하여 우리가 정의한 가장 가까운ErrorBoundary 상자로 렌더링할 수 있습니다.

루트 오류 경계 생성



내 관점에서 볼 때 항상 코드에 루트 오류 경계를 추가하고 싶을 것입니다. 이것은 최상위 수준이므로 오류가 최상위 수준에서 발생하면 항상 오류를 잡을 수 있습니다.

이러한 루트 오류 경계 중 하나를 만들려면 root.tsx 파일을 엽니다.

문서에 따르면 루트 오류 경계에 대해 전체 HTML을 렌더링하는 것이 가장 좋습니다. 이 오류가 렌더링될 때 마운트 및 마운트 해제되기 때문입니다.<Meta />, <Links />, and <Script /> 태그에 액세스하면 다시 렌더링할 수 있습니다.

이 루트 파일에 다음 함수를 추가해 보겠습니다.

export function ErrorBoundary({ error }) {
  return (
    <html>
      <head>
        <title>Oh no!</title>
        <Meta />
        <Links />
      </head>
      <body className='m-4'>
        <h1 className='text-2xl'>Something went wrong!</h1>
        <p>{error.message}</p>
        <Scripts />
      </body>
    </html>
  );
}


그것을 시도하고 무슨 일이 일어나는지 봅시다; 이 특정 오류를 app/routes/admin/posts/index.tsx에 추가했습니다.

export function loader() {
  throw new Error('I am a failure!');
}


이제 이 페이지를 열면 다음 오류가 발생합니다.



이것은 사용자 지정 오류를 발생시키지 않는 것보다 이미 훨씬 낫습니다.
단점은 전체 페이지를 차단하는 반면 우리의 오류는 라인 아래로만 던져진다는 것입니다.

중첩 오류 경계 추가



그리고 이것이 Remix가 제 마음을 사로잡는 부분입니다. 여러 오류 경계를 지원합니다!

Remix는 오류가 발생할 때 오류를 렌더링하기 위해 가장 가까운 오류 경계를 찾기 시작합니다.

우리의 경우에 던진 동일한 파일에 오류 경계를 추가할 수 있습니다.

export function ErrorBoundary({ error }) {
  return (
    <div className='bg-red-100 border border-red-300 p-4'>
      <h1 className='text-2xl'>Something went wrong!</h1>
      <p>{error.message}</p>
    </div>
  );
}


이제 페이지를 새로 고치고 무슨 일이 일어나는지 확인하십시오.



와우, 오류는 특정 중첩 경로에만 표시됩니다!
애플리케이션의 다른 부분은 여전히 ​​예상대로 작동합니다.

이 예제 코드는 GitHub에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!



제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나
AWS Lambda의 시간대를 일본 시간으로 변경하는 방법
React Material UI 비주얼 에디터

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage