(Nextjs) - Sentry - React three fiber bug

chrisweb commented 2 months ago

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

@sentry/nextjs

SDK Version

8.26.0

Framework Version

Next 14.2.5

Link to Sentry event

https://chrisweb.sentry.io/issues/5724309981/?project=4507792998465536&query=is%3Aunresolved+issue.priority%3A%5Bhigh%2C+medium%5D&referrer=issue-stream&statsPeriod=24h&stream_index=0

Reproduction Example/SDK Setup

https://github.com/chrisweb/bug_repodruction_undefined-_reading_sentry

!!! error happens only in "production" (don't use npm run dev):

npm run build
npm run start

Steps to Reproduce

start nextjs in production (npm run build, then npm run start) open browser, localhost:3000 page will try to load a react three fiber canvas error gets triggered

Expected Result

No error in browser console

Actual Result

Error in browser console: TypeError: Cannot read properties of undefined (reading 'sentry') at 79-69aeb92584b14fbc.js:1:5614 at Array.reduce () at G (79-69aeb92584b14fbc.js:1:5599) (...)

chrisweb commented 2 months ago

I tried to find the "real" reason for the problem, but I couldn't find it (yet)

Also, I'm sorry if this is not a Sentry but a https://github.com/pmndrs/react-three-fiber bug, I was not sure this belongs in here

I posted it as a Sentry bug, because even though the error seems to get thrown in Fiber https://github.com/pmndrs/react-three-fiber/blob/a457290856f57741bf8beef4f6ff9dbf4879c0a5/packages/fiber/src/core/utils.ts#L337, I have the feeling that Fiber has a problem because maybe Sentry has added some Sentry specific attributes to the canvas element, actually there is an ambientlight three fiber component (inside of the canvas) where sentry seems to have added attributes and this seems to be the initial cause

When I remove Sentry from the Next.js configuration then everything is OK (no error in the console)

Also this error is only happens, when Next.js runs in "production", in development there is NO error

I tried to disable sentry integrations like breadcrumbs dom and also disable replaycanvas but the sentry attributes kept being placed onto fiber components as well as the canvas element itself

chrisweb commented 2 months ago

I found another Issue afterall, which seems to be about the problem I describe: https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530

EDIT: so yes, that Issue sentry-javascript-bundler-plugins #530 is about the same problem, disabling reactComponentAnnotation fixes the react three fiber problem

next.config.js:

export default withSentryConfig(nextConfig, {

    // Automatically annotate React components to show their full name in breadcrumbs and session replay
    reactComponentAnnotation: {
        enabled: false,
    },

});

As suggested in the sentry-javascript-bundler-plugins #530 Issue, a way to exclude some components would be really useful

Lms24 commented 2 months ago

Hey @chrisweb thanks for writing in!

We'll look into your issue next week as this week is Hackweek at Sentry (see #13421).

lforst commented 1 month ago

Hi, thanks for being patient! Since we have established that this is caused by https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/530 I'll close this issue and we'll track it over there. cc @0Calories

getsentry / sentry-javascript