Unhandled error handler on server #6313

mizchi · 2023-05-05T04:28:04Z

mizchi
May 5, 2023

Problem

I try to catch this error on server.

export async function loader({ request, context }: LoaderArgs) {
  throw new Error("This is an error");
};

but ErrorBoundary is client side handler.

// app/root.tsx
export function ErrorBoundary({ error }: any) {
  // client scope
  console.error(error);
  return (
    <html>
       ...
    </html>
  );
}

What i need

I need to catch error on server side (to send sentry)

For example,

// app/root.tsx
export function catchUnhandledRejection({error: ErrorOrUnhandledRejectionPromise, request, context}) {
  sentry.captureException(error);
}

Of course, we explicitly try-catch if possible on loader, but we cannot always pay attention to all possible exceptions during development. Especially when it comes to internal library errors.

Background

I am using @remix with @remix-run/cloudflare-pages. sentry/remix only supports node, so I need to write my own error handler, so I am trying to use toucan-js to catch errors more naively I am trying to use toucan-js which catches errors more naively. However, I can't seem to find a way to do that on remix.

https://github.com/robertcepa/toucan-js
https://github.com/getsentry/sentry-javascript/tree/master/packages/remix

export const errorHandler =
  <T extends unknown>(
    loaderOrActionFn: (args: DataFunctionArgs) => Promise<T | Response> | T | Response
  ) =>
  async (args: DataFunctionArgs) => {
    try {
      const res = await loaderOrActionFn(args);
      return res;
    } catch (err) {
        await logError(err);
      throw err;
    }
  };

can something like this work for you? then you would call it like this:

export const action = errorHandler(async ({ request }) => {
  //if something fails here it will be caught and logged
  return stuff;
});

5 replies

mizchi May 5, 2023
Author

I am sorry, but I do not think that is sufficient.

Of course, we explicitly try-catch if possible on loader, but we cannot always pay attention to all possible exceptions during development. Especially when it comes to internal library errors.

It is possible to implement your own error handler inside any function. However, this would severely spoil the development experience.

Also, maybe it's because I'm still new to remix, or maybe it's the minor environment of cloudflare-pages, but many of the errors I got stuck with came from outside of the action or loader.

For example, the apps/sessions.server.ts module I created for remix-auth was incompletely initialized, resulting in cookie decoding errors, or an environment variable was incomplete and touched undefined at runtime.

These were my mistakes, but took a lot of time to investigate. I would like to have a uniform error handler to account for the possibility of this happening in a production environment.

AlemTuzlak May 5, 2023

I see, well that sounds like a bigger issue is at play but you can also look at modifing your entry.server.ts file and making it more robust

mizchi May 5, 2023
Author

I tried custom app/entry.server.tsx

// app/entry.server.tsx
import type { EntryContext } from "@remix-run/cloudflare";
import { RemixServer } from "@remix-run/react";
import isbot from "isbot";
import { renderToReadableStream } from "react-dom/server";

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  try {
    const body = await renderToReadableStream(
      <RemixServer context={remixContext} url={request.url} />,
      {
        signal: request.signal,
        onError(error: unknown) {
          console.error('[error.1]', error);
          responseStatusCode = 500;
        },
      } 
    );
    if (isbot(request.headers.get("user-agent"))) {
      await body.allReady;
    }      
    responseHeaders.set("Content-Type", "text/html");
    return new Response(body, {
      headers: responseHeaders,
      status: responseStatusCode,
    });  
  } catch (err) {
    console.error('[error.2]', err);
    return new Response(body, {
      headers: responseHeaders,
      status: responseStatusCode,
    });  
  }
}

However, none of the error handlers caught the loader exception.

kiliman May 5, 2023
Maintainer

Note: entry.server runs after your loaders/actions, but before SSR. That's why you can't catch loader exceptions, only render errors.

Document Request:
REQUEST => Adapter => Remix Loaders in Parallel => entry.server => RESPONSE => entry.client

Data Request:
REQUEST => Adapter => Remix Loader => RESPONSE => React Router renders Outlet

I have a patch that adds a handleError export on entry.server so any exceptions thrown from the server side is caught and can be sent to Sentry, BugSnag, LogRocket, etc.

I need to update this to the latest Remix, but this should show you what needs to be done in Remix.

https://github.com/kiliman/remix-error-logging

dunganh21 Nov 22, 2024

HI @kiliman, i'm now using handleError for capturing error to Sentry like this

export const handleError = Sentry.wrapHandleErrorWithSentry(error => {
  const eventId = Sentry.captureException(error);
  console.log('Server HandleError EventId:', eventId);
});

i'm trying to get the eventID and embed it into response return to client, i want customer can report to us specific error. Seam there is noway to modify response to client from there

Unhandled error handler on server #6313

Uh oh!

Uh oh!

mizchi May 5, 2023

Problem

What i need

Background

related

Replies: 1 comment · 5 replies

Uh oh!

AlemTuzlak May 5, 2023

Uh oh!

mizchi May 5, 2023 Author

Uh oh!

AlemTuzlak May 5, 2023

Uh oh!

Uh oh!

mizchi May 5, 2023 Author

Uh oh!

kiliman May 5, 2023 Maintainer

Uh oh!

Uh oh!

dunganh21 Nov 22, 2024

mizchi
May 5, 2023

Replies: 1 comment 5 replies

AlemTuzlak
May 5, 2023

mizchi May 5, 2023
Author

mizchi May 5, 2023
Author

kiliman May 5, 2023
Maintainer