Remix ReactDOMServer does not yet support Suspense

[jamesgrogantech]

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 SDK are you using?

@sentry/remix

SDK Version

7.53.0

Framework Version

React 17.0.2, Remix 1.16.0

Link to Sentry event

SDK Setup

entry.server.tsx

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

Steps to Reproduce

1. I add the Sentry.init to the entry.server.ts file
2. I start the development server (this occurs in production also)
3. I make a request to the development server from the browser

Expected Result

I expect Sentry to not interfere with the request handler.

Actual Result

I get this error when I make a request to the application:

Error: ReactDOMServer does not yet support Suspense.
    at ReactDOMServerRenderer.read ({redacted}/node_modules/react-dom/cjs/react-dom-server.node.development.js:3704:25)
    at renderToString ({redacted}/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at handleRequest ({redacted}/app/entry.server.tsx:48:5)
    at {redacted}/node_modules/@sentry/src/utils/instrumentServer.ts:136:1
    at handleDocumentRequestRR ({redacted}/node_modules/@remix-run/server-runtime/dist/server.js:186:18)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at requestHandler ({redacted}/node_modules/@remix-run/server-runtime/dist/server.js:49:18)
    at {redacted}/node_modules/@sentry/src/utils/instrumentServer.ts:355:1
    at {redacted}/node_modules/@remix-run/express/dist/server.js:39:22

I am not using Suspense anywhere in the application.I am using Sentry in the client with no issues at all, but as soon as I add it to the server I get this error.

I tried to turn on the Sentry Debug and got this warning at the same time so I wonder if it's related:
Sentry Logger [warn]: Remix SDK was unable to wrap your root because of one or more missing parameters.
There is discussion about this particular warning here #6951, but they don't seem to be experiencing the Suspense error.

Any help would be greatly appreciated.

[Lms24]

Hi @jamesgrogantech thanks for writing in!

Sentry Logger [warn]: Remix SDK was unable to wrap your root because of one or more missing parameters

This looks oddly familiar to #8216. We'll need to investigate what happens here, which param is undefined and why. Perhaps Remix changed something around building/bundling recently 🤔

I have to backlog this though as we're currently swamped with other issues. We'll try to take a look at this soon. Any help would be greatly appreciated in the meantime :)

[onurtemizkan]

Hi @jamesgrogantech, thanks for the issue report.

Sentry Logger [warn]: Remix SDK was unable to wrap your root because of one or more missing parameters.
This warning is misleading, and lately removed from server-side logs. > #8269

---

I suspect this issue might be caused by incompatible React and Remix versions, as Remix 1.16.0 uses Suspense internally which is available from React 18.

Do you only see this error when Sentry is used?

If so, could you create a reproducible example please?

Thanks!

[jamesgrogantech]

I've managed to solve this through a fix for an unrelated bug happening due to multiple calls to redirect during authentication. I'm not sure on the exact cause of the issue, but I have moved to using a single "/login" route to call my authentication to redirect to Microsoft SSO rather than calling this redirect from multiple loaders at once. This seems pretty unrelated to the Sentry error but I have confirmed this change has fixed it so I hope it helps someone else if they come across the same thing.