Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
3 tasks done
Shramkoweb opened this issue Aug 31, 2022 · 7 comments · Fixed by #6207
Closed
3 tasks done

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

Shramkoweb opened this issue Aug 31, 2022 · 7 comments · Fixed by #6207
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK Type: Bug

Comments

@Shramkoweb
Copy link

Shramkoweb commented Aug 31, 2022

Is there an existing issue for this?

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
Copy link
Member

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

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.

@AbhiPrasad AbhiPrasad added Package: nextjs Issues related to the Sentry Nextjs SDK Status: Backlog labels Aug 31, 2022
Shramkoweb added a commit to Shramkoweb/Portfolio that referenced this issue Aug 31, 2022
@Shramkoweb
Copy link
Author

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

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
Copy link
Member

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

Shramkoweb added a commit to Shramkoweb/Portfolio that referenced this issue Aug 31, 2022
* 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
Copy link
Member

lobsterkatie commented Aug 31, 2022

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
Copy link

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
Copy link

l1qu1d commented Nov 16, 2022

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
Copy link
Member

lobsterkatie commented Nov 17, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Package: nextjs Issues related to the Sentry Nextjs SDK Type: Bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants