sentry-javascript: Remix SDK not reporting server errors to Sentry

Is there an existing issue for this?

I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
I have reviewed the documentation https://docs.sentry.io/
I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/remix

SDK Version

7.33.0

Framework Version

1.8.2

Link to Sentry event

No response

SDK Setup

AFAICT, I’ve set up our code exactly as in the documentation and example vanguard app.

entry.client.tsx

Sentry.init({
  dsn: (window as any).ENV.SENTRY_DSN,
  environment: (window as any).ENV.NODE_ENV,
  tracesSampleRate: 1,
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.remixRouterInstrumentation(
        useEffect,
        useLocation,
        useMatches
      ),
    }),
  ],
});

entry.server.tsx

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1,
  integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
});

root.tsx

export default withSentry(App);

I’ve double checked that the environment variables are being passed correctly on both the client and the server init calls.

Steps to Reproduce

Load the app
Purposely cause a client side error as suggested by the documentation:

<button
  type="button"
  onClick={() => {
    throw new Error("Sentry Frontend Error");
  }}
>
  Throw error
</button>

Purposely cause a server side error as suggested by the documentation

export const action: ActionFunction = async ({ request }) => {
  throw new Error("Sentry Error");
};

Expected Result

Errors should show up in Sentry for both of these.

Actual Result

Error only appears for the client side error. The server side error never appears.

If I set an explicit captureException call in the error boundary in root.tsx, then that will be reported and show in Sentry.

export function ErrorBoundary({ error }: { error: any }) {
  Sentry.captureException(error);
  return (
    <html>
      <head>
        <title>Oh no!</title>
        <Meta />
        <Links />
      </head>
      <body>
        <Layout style={{ height: "100%" }}>
          <Header />
          <Layout className="ContentContainer">
            <Card>
              <h1>
                <WarningOutlined /> An error occurred - please try again.
              </h1>
            </Card>
          </Layout>
          <Footer />
        </Layout>
        <Scripts />
      </body>
    </html>
  );
}

I’ve also tried removing the error boundary in root.tsx entirely (thinking it may be conflicting), to no avail. For whatever reason, I just cannot get sentry’s default instrumentation on the server side to function at all.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 20 (7 by maintainers)

Most upvoted comments

I attempted to reproduce this - but was unable to: https://github.com/AbhiPrasad/GH-6951-sentry-remix-express. Could anyone provide a reproduction that shows this not working?

Here’s a super barebones example app I used. It uses an express server request handler like the OP posted.

With the example I could throw errors in actions, and in loaders and get resulting errors in Sentry. Important to note - we only support the remix server and express server adapters - everything else needs to be manually instrumented by you.

With that in mind Remix v2 is coming out though - and I think it makes sense for us to re-evaluate instrumenting remix from first principles. We’ve learned a lot from revamping our Next.js SDK and creating the SvelteKit SDK that we can bring back to the Remix SDK.

v2 support - https://github.com/getsentry/sentry-javascript/issues/7810

AbhiPrasad on Apr 14, 2023

Hello! I have virtually the same set up to @oliversong and I’m running into the same issue. Some additional details:

Which package are you using?

@sentry/remix

SDK Version

7.33.0

Framework Version

remix-run@1.11.0

Link to Sentry event

No response

SDK Setup

In an example app generated with this template, I followed the setup documentation like OP did. The only difference is this app uses a custom express server, so I wrapped createRequestHandler according to the docs.

const createSentryRequestHandler = wrapExpressCreateRequestHandler(createRequestHandler);

app.all('*', createSentryRequestHandler({build: require(BUILD_DIR)}));

Steps to Reproduce

Same as OP, I raise an error on the client and server side suggested by documentation

Expected Result

Errors should show up in Sentry for both of these.

Actual Result

Error only appears for the client side error. The server side error never appears.

In addition, setting captureException in the action similarly doesn’t send any error to sentry.

export const action: ActionFunction = async ({ request }) => {
  try {
    throw new Error("Sentry Error");
  } catch (err) {
    Sentry.captureException(err);
  }
};

Notes

Adding the debug: true flag in the server init doesn’t output anything.
I notice in the network tab that a network request to sentry for type event happens immediately upon an error on the client, but no network request happens for a server error.

timzchang on Jan 27, 2023

See https://github.com/getsentry/sentry-javascript/issues/5610 on Cloudflare Workers support @KrisBraun

AbhiPrasad on May 8, 2023