믹서의 오류 처리: 안내서.

오류는 프로그래밍의 생명 주기 중의 일부이다. 좋아하든 안 좋아하든 많은 오류를 만날 수 있다.믹싱💿, 일은 이미 많이 간소화되었지만, 얼마나 간소화되었습니까?믹서의 오류 처리에 오신 것을 환영합니다. 우리가 겪는 흔한 오류를 어떻게 해결하고, 믹스를 어떻게 사용하는지 소개할 것입니다.

404 오류와 유사🚫:

믹스를 사용할 때 가장 흔히 볼 수 있는 오류 중 하나가 404 오류입니다. 지정한 경로를 찾지 못하면 서버에서 이 오류를 던집니다.믹스에서 이런 상황이 발생하는 데는 두 가지 이유가 있다.

서버에서 사용자가 요청한 URL을 찾을 수 없습니다.

함수에서 데이터를 찾지 못했습니다.

리믹스는 당신이 아무 일도 하지 않아도 잘못된 위치에 놓인 노선 문제를 잘 처리할 수 있다(👏) 하지만 두 번째 문제는 스스로 처리해야 한다.하지만 걱정하지 마세요. 믹스는 대부분의 시간을 당신을 덮을 수 있어요!

Default Error Page of a misplaced route

코드를 검사해서 손을 기름지게 합시다.우리는 즉시 '캐리어' 가 무엇인지 보았다.따라서 캐리어 함수는 서버에서 호출될 함수로 렌더링하기 전에 루트에 데이터를 제공합니다.
모든 루트는 자신의 마운트가 있기 때문에, 모든 루트는 독립적으로 그들의 호출, 응답, 오류를 처리한다🔥.
이 기능은 서버에서만 실행됩니다.초기 서버에서는 HTML 문서에 데이터를 제공합니다.브라우저에서 탐색할 때, Remix는fetch를 통해 이 함수를 호출합니다.이것은 데이터베이스와 직접 대화할 수 있고 서버 API 기밀만 사용할 수 있다는 것을 의미합니다. 리믹스 서버 측의 내용에 대한 단독 글이 곧 발표될 것입니다. 이 글은 더 많은 정보를 포함하도록 업데이트될 것입니다.
로더에서 오류를 제거하면 로더 자체 내부에서 처리할 수 있습니다. 예를 들어,

export function loader ({ param }) {
const page = await db.post.findOne({
    where: { index: param.index }
});

  if (!page) {
    throw new Response("Not Found", {
      status: 404
    });
  }

  return page;
}

이것은 간단한 마운트 함수입니다. 데이터베이스에서 댓글의 인덱스를 가져와서 이 경로에서 사용할 수 있도록 되돌려줍니다.페이지를 찾을 수 없을 가능성이 높습니다. loader 파라미터는 사기극이기 때문에 어떤 내용도 얻지 못했습니다.이런 상황에서 우리는 상태 오류params를 던졌다.잠깐만, 바로 그거야?진짜가 아닙니다. 오류가 발생하면 믹서 프로그램 루트에서 404 라는 함수에 의해 차단됩니다.
이것은 react 구성 요소나 불러오는 프로그램이 오류를 던졌을 때 실행되는 함수일 뿐입니다. (미리 계획을 세우고 다시 혼합합니다.)

import { useCatch } from "remix";

export function CatchBoundary() {
  const caught = useCatch();

  return (
    <div>
      <h1>Caught</h1>
      <p>Status: {caught.status}</p>
      <pre>
        <code>{JSON.stringify(caught.data, null, 2)}</code>
      </pre>
    </div>
  );
}

catch 경계가 CatchBoundary개 오류404와 403개 오류402의 범위를 넘어섰습니다. 몇 개의 다른 오류만 catch 경계에서 처리됩니다.이것은 우리가 서로 다른 오류를 임의로 처리할 수 있고 상대적으로 짧은 함수로 처리할 수 있다는 것을 의미하기 때문에 매우 좋다.

export function CatchBoundary() {
  let caught = useCatch();

  let message;
  switch (caught.status) {
    case 401:
      message = (
        <p>
          Oops! Looks like you tried to visit a page that you do not have access
          to.
        </p>
      );
      break;
    case 404:
      message = (
        <p>Oops! Looks like you tried to visit a page that does not exist.</p>
      );
      break;

    default:
      throw new Error(caught.data || caught.statusText);
  }

return (
  <Document title={`${caught.status} ${caught.statusText}`}>
      <div>
         <div>
            <h1>
               You&#x27;re alone here
            </h1>
            <p className='mt-4 text-white'>
              {message}
            </p>
            <h3>
               Go back Home
            </h3>
            <div>
             {caught.status}
            </div>
           </div>
         </div>
      </div>
   </Document>
  );
}

Too much <div>s 😅

이 긴 코드 세그먼트 (스타일 없음) 를 예로 들면, 우리는 switch 문장을 사용하여 오류를 반복하고, 오류에 따라 내용을 되돌려줍니다.이 절에서 나는 404 오류를 희생양으로 사용하지만, 서버가 던진 오류나 루트나 구성 요소 링크 등 이런 방식으로 발생하는 유사한 오류에도 적용된다.
우리는 또한 useCatch() 함수가 구석에 잠복해 있다는 것을 알아차렸다. 이것은 던져진 오류 대상을 간단하게 처리하는 함수로 오류 대상을 해체할 수 있도록 해 준다. (나는 이 단어를 더 좋아한다.dissect)
그러나 이것은 끝이 아니라 나의 믹스 노선이 오류를 포함하여 독립적으로 자신을 처리할 수 있고 전체 페이지/사이트를 파괴하지 않는다는 것을 기억하십니까?이것도 Cach Boundary와 관련이 있다는 사실이 증명되었다.구성 요소가 진정으로 자신의CatchBoundary 함수를 포함하도록 하는 것이 필요하다. 봐라!너는 이 기능에서 그것을 처리해라.첫 번째 코드 세션을 예로 들면, 이 구성 요소에서만 오류를 가져올 수 있도록CatchBounday를 추가할 수 있습니다.

export function loader ({ param }) {
const page = await db.post.findOne({
    where: { index: param.index }
});

  if (!page) {
    throw new Response("Not Found", {
      status: 404
    });
  }

  return page;
}

export function CatchBoundary() {
  const params = useParams();

  return (
    <div>
      <h2>We couldn't find that page!</h2>
      <Form action="../create">
        <button
          type="submit"
          name="Post Index"
          value={param.index}
        >
          Create {param.index}?
        </button>
      </Form>
    </div>
  );
}

export default function Page() {
  return <PageView page={useLoaderData()} />;
}

이 중 일부 새로운 용어를 정리하기 위해서 useParams() 현재 URL의 매개 변수에 접근할 수 있도록 하기 위해서, 우리는 이전과 같은 기능을 사용했고, 루트에 포획 경계만 추가했다.
버퍼링된 오류는 항상 가장 가까운CatchBoundary 함수로 처리됩니다. 따라서 페이지의 전체 부분을 닫거나 실행을 유지할 수 있습니다. 호출하십시오!자, 맞춤형 브라우저가 당신의 손에 있습니다. 사용자는 매우 즐겁고 개발자는 매우 즐겁습니다. 검색 엔진의 최적화도 매우 즐겁습니다. 아무도 화를 내지 않을 것입니다.모두들 매우 즐겁다.

예상치 못한 착오💥:

이러한 오류는 때때로 발생하는데, 서버나 브라우저 심지어 loader에서 던지면 당신의 사이트가 붕괴될 수 있다.믹스에서 이런 심각한 오류는 믹스에 포착될 것이다🥳 그리고 네가 처리해라.그러니 그들의 잘못을 처리합시다.
Remix에는 캡처되지 않은 오류가 발생할 때 표시되는 ErrorBoundary라는 함수가 있습니다.그것은 CathBoundary 기능의 일부 원칙을 가지고 있다. 즉, 잘못된 사용자 인터페이스는 최근ErrorBoundary에 표시되고 사이트의 나머지 부분은 계속 운행될 것이다.

export function ErrorBoundary({ error }) {
  console.error(error);
  return (
    <html>
      <head>
        <title>Something weird happened...</title>
        <Meta />
        <Links />
      </head>
      <body>
        {/* Your Error UI comes here */}
        <Scripts />
      </body>
    </html>
  );
}

던진 오류가 여기에 포착되고 ErrorBoundary 함수가 설치된 위치에 설치됩니다.만약 내가 설명할 수 없는 어떤 이유로도 단추 구성 요소가 포획되지 않은 서버 오류를 던졌다면, 최근의 오류 경계는 그것을 포획하고, 그 자체를 구성 요소의 위치에 나타낼 것입니다.

이 그림을 보십시오. 우리는 노선에 있습니다. http://example.com/sales/invoices/102000우리의 102000 오류가 의외의 오류를 포착했다.영수증 경로에 ErrorBoundary 함수가 있는데 자신을 포착하고 과장할 수 있습니다. 보세요!우리 사이트는 여전히 실행 중이며, 오류는 이미 처리되었다.
이것이 바로 본문의 결말이다. 만약 당신들이 믹스로 활약하고 싶다면 왜 지금부터 시작하지 않겠는가?이것은 코드 샌드박스를 오프라인으로 하는 것처럼 간단해서 미리 설정하고 설정할 필요가 없다.당신들이 평론에서 생각하는 바를 말해 주십시오. 또는 만약 당신들이 어떤 보충이나 수정이 있다면, 자신을 향상시킬 뿐만 아니라, 다른 사람에게 이익을 가져다 줄 것입니다.그 전에, 평상시와 같이, 나는 너희들이 유쾌한 학습 경험과 유쾌한 독서를 하기를 바란다👋.