Remix SDK not reporting server errors to Sentry #6951

oliversong · 2023-01-26T22:59:08Z

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.

The text was updated successfully, but these errors were encountered:

lforst · 2023-01-27T08:24:03Z

Hi, if you add debug: true to the entry.server.tsx init call, do you see any suspicious output?

timzchang · 2023-01-27T23:38:39Z

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

[email protected]

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.

oliversong · 2023-01-28T01:39:07Z

I also tried debug: true in the server init and got no output whatsoever.

uncle-samm · 2023-02-16T10:57:47Z

I'm having the same issue, however I feel it has to do with lack of documentation personally, It seems like something is missing. I don't see how initing the sentry class is enough for it to work, but perhaps I got it wrong.

I'm using remix 1.12 and cloudflare pages

github-actions · 2023-03-10T00:25:19Z

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

timzchang · 2023-03-10T19:54:53Z

Bump: wondering if folks have had a chance to look at this issue?

uncle-samm · 2023-03-16T13:45:23Z

I've given up on the issue and implemented using the ErrorBoundary to report errors to me,

There were too many issues using cloudflare pages and sentry as is, so I've done all workarounds as I can.

It doesn't automatically log any error, I don't know why, it just doesn't.
Cloudflare pages (even without minifying js) does not seem to map with remix --source-maps so the stack is still unreadable. I'm sure there are solutions but as of now the documentation is just not there yet. As I couldn't find a good alternative for logging as we speak, I've just done it very hacky.

I work in a startup where speed of development is key, so I have no time to help out and debug the issue. I could get debug logs but they gave nothing that was unusual.

I hope a solution will be found and posted here. Or developer will extensively test this on cloudflare pages as it's one of remix' main partners.

Actually I'm lyiing, I did get this debug log:
"Remix SDK was unable to wrap your root because of one or more missing parameters."

here is my basic implementation:
entry.client.tsx

import { RemixBrowser } from "@remix-run/react";
import { hydrateRoot } from "react-dom/client";
import * as Sentry from "@sentry/remix";
import { useLocation, useMatches } from "@remix-run/react";
import { useEffect } from "react";
import { env } from "./utils/env.client";



Sentry.init({
  dsn: env.SENTRY_DSN,
  tracesSampleRate: 1,
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.remixRouterInstrumentation(
        useEffect,
        useLocation,
        useMatches,
      ),
    }),
  ],
  debug: env.GIVEN_BUILD === "preview",
  release: env.CF_PAGES_COMMIT_SHA,
  environment: env.GIVEN_BUILD
});

hydrateRoot(document, <RemixBrowser />);

entry.server.tsx

Sentry.init({
  dsn: env.SENTRY_DSN,
  tracesSampleRate: 1,
  debug: env.GIVEN_BUILD === "preview",
  release: env.CF_PAGES_COMMIT_SHA,
  environment: env.GIVEN_BUILD
});

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const markup = renderToString(
    <RemixServer context={remixContext} url={request.url} />
  );

  responseHeaders.set("Content-Type", "text/html");

  return new Response("<!DOCTYPE html>" + markup, {
    status: responseStatusCode,
    headers: responseHeaders,
  });
}

root.tsx

... code above
export default withSentry(App)
... code below

It's also good to mention that cloudflare pages environment variables aren't readable without context (which you only get through loader or action function), would be nice if you found a solution for that.

For now during the build it'll create an environment variable it can read.

cole-sanderson · 2023-03-31T15:31:34Z

Bump, any update? I am also dealing with this issue.

nmackey · 2023-04-10T19:47:51Z

Bump, also running into this issue.

AbhiPrasad · 2023-04-11T08:00:56Z

Hey folks - thanks for reaching out. We've escalated this so we can investigate further!

AbhiPrasad · 2023-04-11T15:23:43Z

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 - #7810

KrisBraun · 2023-05-07T02:31:08Z

I believe this is an issue with Sentry supporting Cloudflare Pages, as I'm having the same issue. It happens consistently both with miniflare locally and on deployment.

AbhiPrasad · 2023-05-08T14:48:01Z

See #5610 on Cloudflare Workers support @KrisBraun

AbhiPrasad · 2023-05-08T14:49:01Z

I'm going to close this because we haven't got a reproduction, and I can't see to understand how this is not working when you are using the remix server or express server adapters.

Please re-open or create a new issue if you can get a reproduction, thanks!

jaankoppe · 2023-05-18T05:50:25Z

@AbhiPrasad Your working demo got a lot more @sentry dependencies, than a regular setup + there are no versions but somekind of file:.yalc/ thing there:

"@sentry/core": "file:.yalc/@sentry/core",
"@sentry/node": "file:.yalc/@sentry/node",
"@sentry/react": "file:.yalc/@sentry/react",
"@sentry/remix": "file:.yalc/@sentry/remix",
"@sentry/types": "file:.yalc/@sentry/types",
"@sentry/utils": "file:.yalc/@sentry/utils",

But the default when installing sentry is only:

"@sentry/remix": "^7.52.1",

Using Remix Server and in the entry.server.jsx file having these lines related to Sentry:

import * as Sentry from "@sentry/remix";

Sentry.init({
  dsn: "_DSN_",
  debug: true,
  tracesSampleRate: 1.0,
});

In root.jsx:

export default withSentry(App, {
  errorBoundaryOptions: {
    fallback: <div>Something went wrong</div>,
  },
});

Client side works correctly, so not going to paste the client code here, but yes like lots of folks discussing here, that the server implementation is not working with Remix Server when trying to implement as described in the docs.

MoSattler · 2023-05-25T15:41:35Z

Same here - client side working, server side is not reporting anything whatsoever.

@AbhiPrasad you repro only works cause you are explicitly catching errors. But unhandled errors are not getting reported to sentry.

If you remove the catch block (like in the official sentry example), you will be able to reproduce the issue.

MoSattler · 2023-05-25T18:49:58Z

I opened a new issue here: #6951

richardhunghhw · 2023-06-14T20:04:32Z

I opened a new issue here: #6951

I think you meant to link this issue #8216 instead

delivey · 2023-07-24T09:21:18Z

Adding this to entry.server.tsx solved it for me, but I presume this only fixes it if you're using v2.

export function handleError(
    error: unknown,
    { request }: DataFunctionArgs
): void {
    if (error instanceof Error) {
        Sentry.captureRemixServerException(error, "remix.server", request);
    } else {
        // Optionally capture non-Error objects
        Sentry.captureException(error);
    }
}

AbhiPrasad · 2023-07-24T13:13:58Z

Yeah I think we should recommend using v2 error handling since they fixed a lot of things we no longer have to deal with, otherwise it's tricky getting the correct client/server separation.

docs: https://docs.sentry.io/platforms/javascript/guides/remix/#remix-v2-features

oliversong added the Type: Bug label Jan 26, 2023

getsantry bot added the Status: Untriaged label Jan 26, 2023

oliversong changed the title ~~Remix SDK not~~ Remix SDK not reporting server errors to Sentry Jan 26, 2023

lforst added Status: Needs Reproduction Package: remix Issues related to the Sentry Remix SDK and removed Status: Untriaged labels Jan 27, 2023

github-actions bot added the Status: Stale label Mar 10, 2023

github-actions bot removed the Status: Stale label Mar 11, 2023

AbhiPrasad added Status: Backlog and removed Status: Needs Reproduction labels Apr 11, 2023

HazAT assigned AbhiPrasad Apr 11, 2023

AbhiPrasad removed their assignment Apr 17, 2023

github-actions bot added the Waiting for: Team label May 7, 2023

github-actions bot removed the Waiting for: Team label May 8, 2023

AbhiPrasad closed this as completed May 8, 2023

jamesgrogantech mentioned this issue May 24, 2023

Remix ReactDOMServer does not yet support Suspense #8200

Closed

3 tasks

getsantry bot added the Waiting for: Product Owner label Jul 24, 2023

getsantry bot added this to GitHub Issues with 👀 Jul 24, 2023

getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 Jul 24, 2023

Lms24 removed the Waiting for: Product Owner label Aug 3, 2023

getsantry bot removed the status in GitHub Issues with 👀 Aug 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remix SDK not reporting server errors to Sentry #6951

Remix SDK not reporting server errors to Sentry #6951

oliversong commented Jan 26, 2023

lforst commented Jan 27, 2023

timzchang commented Jan 27, 2023

oliversong commented Jan 28, 2023

uncle-samm commented Feb 16, 2023 •

edited

Loading

github-actions bot commented Mar 10, 2023

timzchang commented Mar 10, 2023

uncle-samm commented Mar 16, 2023 •

edited

Loading

cole-sanderson commented Mar 31, 2023

nmackey commented Apr 10, 2023

AbhiPrasad commented Apr 11, 2023

AbhiPrasad commented Apr 11, 2023 •

edited

Loading

KrisBraun commented May 7, 2023

AbhiPrasad commented May 8, 2023

AbhiPrasad commented May 8, 2023

jaankoppe commented May 18, 2023

MoSattler commented May 25, 2023 •

edited

Loading

MoSattler commented May 25, 2023

richardhunghhw commented Jun 14, 2023 •

edited

Loading

delivey commented Jul 24, 2023

AbhiPrasad commented Jul 24, 2023 •

edited

Loading

Remix SDK not reporting server errors to Sentry #6951

Remix SDK not reporting server errors to Sentry #6951

Comments

oliversong commented Jan 26, 2023

Is there an existing issue for this?

How do you use Sentry?

Which package are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

lforst commented Jan 27, 2023

timzchang commented Jan 27, 2023

Which package are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

Notes

oliversong commented Jan 28, 2023

uncle-samm commented Feb 16, 2023 • edited Loading

github-actions bot commented Mar 10, 2023

timzchang commented Mar 10, 2023

uncle-samm commented Mar 16, 2023 • edited Loading

cole-sanderson commented Mar 31, 2023

nmackey commented Apr 10, 2023

AbhiPrasad commented Apr 11, 2023

AbhiPrasad commented Apr 11, 2023 • edited Loading

KrisBraun commented May 7, 2023

AbhiPrasad commented May 8, 2023

AbhiPrasad commented May 8, 2023

jaankoppe commented May 18, 2023

MoSattler commented May 25, 2023 • edited Loading

MoSattler commented May 25, 2023

richardhunghhw commented Jun 14, 2023 • edited Loading

delivey commented Jul 24, 2023

AbhiPrasad commented Jul 24, 2023 • edited Loading

uncle-samm commented Feb 16, 2023 •

edited

Loading

uncle-samm commented Mar 16, 2023 •

edited

Loading

AbhiPrasad commented Apr 11, 2023 •

edited

Loading

MoSattler commented May 25, 2023 •

edited

Loading

richardhunghhw commented Jun 14, 2023 •

edited

Loading

AbhiPrasad commented Jul 24, 2023 •

edited

Loading