Error Handling in Resource Route #9240

meisbokai · 2024-04-16T02:49:33Z

meisbokai
Apr 16, 2024

Hello, I would like to ask if anyone has any advice on handling errors in resource routes.

I have the following router in my resource route myRoute.myData[.xlsx].tsx (with dummy functions).

export const formatData = (data: JsonObject[]) => {
    if (someErrorA){throw new Error("Error A")}

    if (someErrorB){throw new Response("Error B", {status: 500} )}

    // Do some formating

    return formatedData
};

export async function loader() {
  // Get data from database
  const data = await getData(); // May have errors here

  // Format data
  const formatedData = formatData(data); // May also have errors here

  // Write to a file
  const excelFile = writeToExcel(formatedData) // May also have errors here too!

  // Return as a response, to be downloaded by user
  return new Response(excelFile, {
    status: 200,
    headers: {
      "Content-Disposition": `attachment; filename="someFile.xlsx"`,
      "Content-Type":
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    },
  });
}

To access the resource route from the parent route myRoute.myData.tsx, I am using the following Link

<Link reloadDocument to="../myData.xlsx">
    <Button className="px-3">
        Download
    </Button>
</Link>

I have tried to add an ErrorBoundary in the resource route, but I realized that doing so will cause the resource route to return an empty component, which is not desired.

Something else that I've attempted was to return the error in a JSON payload as recommended here

I have also tried to add the ErrorBoundary in the parent route, but it does not catch the Errors that I am throwing.

Resource Route: myRoute.myData[.xlsx].tsx
(Attempt 1) Parent Route: myRoute.myData.tsx
(Attempt 2) Parent Route: myRoute.tsx

Below the ErrorBoundary that I am using, obtained from here

export function ErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error)) {
    return (
      <html>
        <head>
          <title>Oh no!</title>
          <Meta />
          <Links />
        </head>
        <body>
          <div id="error-page">
            <h1>Oops! {error.status}</h1>
            <p>{error.statusText}</p>
            {error.data?.message && (
              <p>
                <i>{error.data.message}</i>
              </p>
            )}
          </div>
        </body>
      </html>
    );
  } else if (error instanceof Error) {
    return (
      <div id="error-page">
        <h1>Oops! Unexpected Error</h1>
        <p>There was an error thrown</p>
        <p>
          <i>{error.name}</i>
          <i>{error.message}</i>
        </p>
      </div>
    );
  }
}

May I ask if there is a proper way of handling errors for resource routes? I am unable to find any examples on this in the Remix Documentation. Thank you very much in advance!

BjorneOma · 2024-09-24T07:54:14Z

BjorneOma
Sep 24, 2024

I am having the exact same problem. Did you come up with a solution?

1 reply

gitnik Sep 24, 2024

This is honestly one of the biggest shortcomings of Remix. Fine-grained error-handling is really cumbersome (if not impossible sometimes)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Error Handling in Resource Route #9240

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Error Handling in Resource Route #9240

Uh oh!

meisbokai Apr 16, 2024

Replies: 1 comment · 1 reply

Uh oh!

BjorneOma Sep 24, 2024

Uh oh!

gitnik Sep 24, 2024

meisbokai
Apr 16, 2024

Replies: 1 comment 1 reply

BjorneOma
Sep 24, 2024