TypeError: Cannot read properties of undefined (reading 'getElementById')

[Shramkoweb]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] 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/nextjs

SDK Version

7.12.0

Framework Version

"next": "12.2.5"

Link to Sentry event

No response

Steps to Reproduce

1. Install Next.JS
2. Use next js edge functions
3. See sentry error on server

Expected Result

Zero errors

Actual Result

TypeError: Cannot read properties of undefined (reading 'getElementById')
    at node_modules/@sentry/nextjs/esm/performance/client.js:22:26
    at node_modules/@sentry/nextjs/esm/performance/client.js:94:54
    at node_modules/@sentry/tracing/esm/browser/browsertracing.js:99:0
    at node_modules/@sentry/core/esm/integration.js:64:0
    at <anonymous>
    at node_modules/@sentry/core/esm/integration.js:60:0
    at node_modules/@sentry/core/esm/baseclient.js:217:27
    at node_modules/@sentry/hub/esm/hub.js:65:0
    at node_modules/@sentry/core/esm/sdk.js:32:0
    at node_modules/@sentry/browser/esm/sdk.js:110:2
    at node_modules/@sentry/react/esm/sdk.js:18:2
    at node_modules/@sentry/nextjs/esm/index.client.js:31:2
    at sentry.server.config.ts:8:0
    at webpack/bootstrap:21:0
    at node_modules/react/index.js:4:2
    at node_modules/react/index.js:4:2
    at webpack/runtime/jsonp chunk loading:34:0
    at api/github:middleware.js:1:17

Link to CODE

[AbhiPrasad]

Hey, thanks for writing in, Looks like this is being caused by https://github.com/getsentry/sentry-javascript/blob/78461634fbfde1a85484ac6b0e89e28497b9d77c/packages/nextjs/src/performance/client.ts#L65. In this case, document is undefined, so document.getElementById('__NEXT_DATA__') is throwing an error. The funny thing is that this code should not be running in the server, but seems to be getting pulled in. We can tell this by looking at the stacktrace:

at node_modules/@sentry/browser/esm/sdk.js:110:2
at node_modules/@sentry/react/esm/sdk.js:18:2
at node_modules/@sentry/nextjs/esm/index.client.js:31:2
at sentry.server.config.ts:8:0

This might be related to the fact that you enabled experimental-edge runtime for your route, which might cause things to be bundled weirdly. Backlogging this for now, but anyone is welcome to help out investigate and solve this.

[Shramkoweb]

Hey, thanks for writing in, Looks like this is being caused by

https://github.com/getsentry/sentry-javascript/blob/78461634fbfde1a85484ac6b0e89e28497b9d77c/packages/nextjs/src/performance/client.ts#L65

. In this case, document is undefined, so document.getElementById('__NEXT_DATA__') is throwing an error. The funny thing is that this code should not be running in the server, but seems to be getting pulled in. We can tell this by looking at the stacktrace:

at node_modules/@sentry/browser/esm/sdk.js:110:2
at node_modules/@sentry/react/esm/sdk.js:18:2
at node_modules/@sentry/nextjs/esm/index.client.js:31:2
at sentry.server.config.ts:8:0

This might be related to the fact that you enabled experimental-edge runtime for your route, which might cause things to be bundled weirdly. Backlogging this for now, but anyone is welcome to help out investigate and solve this.

Yeah. Error only with experimental-edge function

[AbhiPrasad]

We don't have the best support for Vercel's Edge Runtime as per: https://github.com/getsentry/sentry-javascript/issues/5611

[lobsterkatie]

Looks like for some reason the import in sentry.server.config.ts is getting pointed at the browser entrypoint in package.json rather than main or module. Would have to go digging in the Vercel repo to try to figure out why.

@Shramkoweb, if this is a blocker for you, you might file an issue with them and see what they say.

[wconnorwalsh]

I had the same issue: sentry.client.config.js and/or sentry.server.config.js erroneously bundling with experimental-edge functions.

The root cause is obviously #5611 – and I am not familiar with the internals of the withSentryConfig Next.js webpack plugin – but is it possible that it is bundling the Sentry code in every API handler, even if it is marked as experimental-edge?

Here is a temporary workaround for anyone else stuck. This will exclude the Sentry code in any edge functions.

// next.config.js

const config = {
 webpack: (config, options) => {
    if (options.isServer && options.nextRuntime === 'edge') {
      config.resolve.alias = {
        ...config.resolve.alias,
        './sentry.client.config.js': false,
        './sentry.server.config.js': false,
      }
    }
    return config
  }
}

module.exports = withSentryConfig(config)

[l1qu1d]

I'm having the same issue as well, as I'm using Vercel's OG Image generator. I've tried @wconnorwalsh's solution (modified), which didn't work for me, but my tech stack is different.

Stack: Nx 15+, Next.js 13+, and deploying on Vercel.

This did not work for me:

const nextConfig = {
// ...
webpack: (config, options) => {
    if (options.isServer && options.nextRuntime === 'edge') {
      config.resolve.alias = {
        ...config.resolve.alias,
        './sentry.client.config.js': false,
        './sentry.server.config.js': false,
      }
    }
    return config
  }
  // I've also tried this, which didn't work
  sentry: {
      autoInstrumentServerFunctions: false,
  },
}

module.exports = withNx(withSentryConfig(nextConfig))

The only way I could get my build to work was to remove withSentryConfig from my module.exports, which means I lose out on:

• Automatically call the code in sentry.server.config.js and sentry.client.config.js, at server start up and client page load, respectively. Using withSentryConfig is the only way to guarantee that the SDK is initialized early enough to catch all errors and start performance monitoring.
• Generate and upload source maps to Sentry, so that your stacktraces contain original, demangled code.

I know sentry, doesn't "have the best support for Vercel's Edge Runtime" https://github.com/getsentry/sentry-javascript/issues/5667#issuecomment-1233393764, but there should be at least a way to ignore it for now.

[lobsterkatie]

I know sentry, doesn't "have the best support for Vercel's Edge Runtime" #5667 (comment), but there should be at least a way to ignore it for now.

Ask and you shall receive, @l1qu1d. 🙂 It happens I just merged this today: https://github.com/getsentry/sentry-javascript/pull/6207.

I'm going to close this for now, but if y'all are still having issues once that PR is released (in 7.20), please let us know.