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에 연결하거나
Reference
이 문제에 관하여(Remix 양식의 오류 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/handling-errors-in-remix-forms-j7o텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
