TypeError: headers[Symbol.for(...)] is not a function in Remix SDK

[sergiodxa]

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.21.1

Framework Version

1.4.3

Link to Sentry event

No response

Steps to Reproduce

I have setup Sentry Remix SDK as shown in the guide.

This is my Express.js config:

// near the top of the file
let dsn = process.env.FRONTEND_SENTRY_DSN;

const createSentryRequestHandler = dsn
  ? wrapExpressCreateRequestHandler(createRequestHandler)
  : createRequestHandler;

// inside `server.all("*")`
return createSentryRequestHandler({ build: require("./build"), mode: env })(
  req,
  res,
  next
);

In my entry.server.tsx I setup Sentry this way:

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

// this is outside the handleRequest function but I tried inside too
if (process.env.FRONTEND_SENTRY_DSN) {
  Sentry.init({
    dsn: process.env.FRONTEND_SENTRY_DSN,
    tracesSampleRate: 1,
    integrations: [],
    attachStacktrace: true,
    debug: process.env.NODE_ENV === "development",
  });
}

And in entry.client.tsx, before I hydrate my Remix app

if (process.env.FRONTEND_SENTRY_DSN) {
  Sentry.init({
    dsn: process.env.FRONTEND_SENTRY_DSN,
    tracesSampleRate: 1,
    integrations: [
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.remixRouterInstrumentation(
          useEffect,
          useLocation,
          useMatches
        ),
      }),
    ],
    attachStacktrace: true,
    debug: process.env.NODE_ENV === "development",
  });
}

I'm using the same version of Remix installed as devDependency in the SDK source code

sentry-javascript/packages/remix/package.json

Lines 36 to 37 in f1e59f9

	"@remix-run/node": "^1.4.3",
	"@remix-run/react": "^1.4.3",

And I'm using Node v16 (also tried v18) which match the supported engines

sentry-javascript/packages/remix/package.json

Lines 12 to 14 in f1e59f9

	"engines": {
	"node": ">=14"
	},

Expected Result

It should render my app and work correctly.

Actual Result

I get a white screen with black text with this error

TypeError: headers[Symbol.for(...)] is not a function
    at Object.normalizeRemixRequest (/Users/[REDACTED]/node_modules/@sentry/src/utils/web-fetch.ts:117:1)
    at /Users/[REDACTED]/node_modules/@sentry/src/utils/instrumentServer.ts:379:1
    at bound (node:domain:433:15)
    at runBound (node:domain:444:12)
    at /Users/[REDACTED]/node_modules/@sentry/src/utils/instrumentServer.ts:408:1
    at /Users/[REDACTED]/frontend/node_modules/@remix-run/express/server.js:41:28
    at remixHandler (/Users/[REDACTED]/server/index.js:104:78)
    at Layer.handle [as handle_request] (/Users/[REDACTED]/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/[REDACTED]/node_modules/express/lib/router/route.js:137:13)
    at next (/Users/[REDACTED]/node_modules/express/lib/router/route.js:131:14)

From the stacktrace, and after trying to debug it in node_modules, the error is happening on this exact line

sentry-javascript/packages/remix/src/utils/web-fetch.ts

Line 123 in f1e59f9

headers: headers[Symbol.for('nodejs.util.inspect.custom')](),

, looks like the symbol Symbol.for('nodejs.util.inspect.custom') is not a key in headers.

If I replace the line with just headers: headers (or just headers) my app renders correctly and when I throw an error it's reported to Sentry too, so I'm not sure what that line does, and from the comment who coded it doesn't know too 😅

[onurtemizkan]

Thanks for reporting this @sergiodxa!

That specific line is vendored from Remix's own Fetch API implementation

https://github.com/remix-run/web-std-io/blob/57acdf2a75046faaf021331cf5ccb3baa8d25835/packages/fetch/src/request.js#L325-L326

Which is based on node-fetch

https://github.com/node-fetch/node-fetch/blob/55a4870ae5f805d8ff9a890ea2c652c9977e048e/src/request.js#L307

and web-stds io

https://github.com/web-std/io/blob/c88170bf24f064adfbb3586a21fb76650ca5a9ab/packages/fetch/src/request.js#L313-L314

Those implementations store headers behind a Proxy object, which should be the case for all Remix requests. I think in your case, we try to parse a pure Express request, before it's landed to Remix. (which is expected, but we should not normalize in that case).

Will try to send a patch after I can reproduce this. Thanks!

[onurtemizkan]

@sergiodxa - I opened a PR that should unblock this case, but the original source of the issue is still unclear to me. I'll try to debug this further, but it would be much appreciated if you could provide us with a minimal reproduction.
Thanks!

[sergiodxa]

@onurtemizkan I was able to replicate it, the strange thing is that when I created a new app it didn't happen even when using the same SDK, Remix, React, Express, etc. version, but when I copied my yarn.lock over the replication repo and run yarn install the app break with the reported error

I uploaded the reproduction repository here https://github.com/sergiodxa/remix-with-sentry-sdk (repo is archived to avoid dependabot opening PRs)

[sergiodxa]

I just found that because the package.json uses ˆ1.4.3 as the version of the Remix packages when I run yarn.lock I was installing the latest version (1.7.6), when I tried to delete my yarn.lock on my work app and I ran yarn install again it installed the latest version and I got some broken types, after forcing 1.4.3 (removing the ˆ) I got back the error.

So I think there's an issue with the SDK and v1.4.3 of Remix.