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

Shramkoweb · 2022-08-31T19:56:06Z

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/nextjs

SDK Version

7.12.0

Framework Version

"next": "12.2.5"

Link to Sentry event

No response

Steps to Reproduce

Install Next.JS
Use next js edge functions
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

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

AbhiPrasad · 2022-08-31T20:28:21Z

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

sentry-javascript/packages/nextjs/src/performance/client.ts

Line 65 in 7846163

const nextDataTag = global.document.getElementById('__NEXT_DATA__');

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

getsentry/sentry-javascript#5667

Shramkoweb · 2022-08-31T20:31:53Z

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

sentry-javascript/packages/nextjs/src/performance/client.ts

Line 65 in 7846163

const nextDataTag = global.document.getElementById('__NEXT_DATA__');

. 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 · 2022-08-31T20:34:12Z

We don't have the best support for Vercel's Edge Runtime as per: #5611

* chore(deps): update project dependencies * fix: add try/catch for GH api * ci: disable sentry on server * fix: fix server error with sentry getsentry/sentry-javascript#5667 * chore: add lint:fix

lobsterkatie · 2022-08-31T20:39:13Z

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 · 2022-09-22T15:29:35Z

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 · 2022-11-16T07:02:25Z

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" #5667 (comment), but there should be at least a way to ignore it for now.

lobsterkatie · 2022-11-17T05:14:55Z

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: #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.

Shramkoweb added the Type: Bug label Aug 31, 2022

getsantry bot added the Status: Untriaged label Aug 31, 2022

AbhiPrasad added Package: nextjs Status: Backlog labels Aug 31, 2022

getsantry bot removed the Status: Untriaged label Aug 31, 2022

Shramkoweb added a commit to Shramkoweb/Portfolio that referenced this issue Aug 31, 2022

fix: fix server error with sentry

f5e74c5

getsentry/sentry-javascript#5667

lobsterkatie mentioned this issue Nov 17, 2022

feat(nextjs): Add excludeServerRoutes config option #6207

Merged

lobsterkatie closed this as completed Nov 17, 2022

switz mentioned this issue Jan 24, 2023

Next.js App Router support roadmap #6726

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Shramkoweb commented Aug 31, 2022 •

edited

AbhiPrasad commented Aug 31, 2022

Shramkoweb commented Aug 31, 2022

AbhiPrasad commented Aug 31, 2022

lobsterkatie commented Aug 31, 2022 •

edited

wconnorwalsh commented Sep 22, 2022

l1qu1d commented Nov 16, 2022

lobsterkatie commented Nov 17, 2022 •

edited

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

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

Comments

Shramkoweb commented Aug 31, 2022 • edited

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

Steps to Reproduce

Expected Result

Actual Result

AbhiPrasad commented Aug 31, 2022

Shramkoweb commented Aug 31, 2022

AbhiPrasad commented Aug 31, 2022

lobsterkatie commented Aug 31, 2022 • edited

wconnorwalsh commented Sep 22, 2022

l1qu1d commented Nov 16, 2022

lobsterkatie commented Nov 17, 2022 • edited

Shramkoweb commented Aug 31, 2022 •

edited

lobsterkatie commented Aug 31, 2022 •

edited

lobsterkatie commented Nov 17, 2022 •

edited