Cannot read properties of undefined (reading 'sentry') when using reactComponentAnnotation with @react-three/fiber

[Y0lk]

Environment

@sentry/webpack-plugin 2.16.1

Steps to Reproduce

1. Setup @sentry/webpack-plugin with reactComponentAnnotation enabled
2. Install @react-three/fiber and use any of the components

Expected Result

It wouldn't be possible to annotate the @react-three/fiber components but it should at least not crash.

Actual Result

Crashes with the following error: Cannot read properties of undefined (reading 'sentry')

I imagine the reason why this happens is because of how @react-three/fiber works, where it turns JSX into THREE objects. reactComponentAnnotation is unusable in our project because of this issue so it'd be great if there was a way to fix this. At the very least, you might wanna add some kind of warning to your documentation.

[lforst]

Thanks for writing in. I forwarded this internally. I think @0Calories will take a look!

[0Calories]

Hi @Y0lk, thanks for reporting this, I reproduced this locally and confirmed the crash is caused by the plugin adding the data-sentry props to Three components. I'll look into a proper fix, but in the meantime I can introduce some configs to the plugin to avoid issues like this;

ignoredFiles: A list of strings representing local paths to files, the plugin will not perform any annotations on components in ignored files

ignoredComponents: A list of strings representing component names that the plugin will avoid annotating

Would these settings be helpful in getting your project running with reactComponentAnnotation?

[ellabellla]

Hi @Y0lk, thanks for reporting this, I reproduced this locally and confirmed the crash is caused by the plugin adding the data-sentry props to Three components. I'll look into a proper fix, but in the meantime I can introduce some configs to the plugin to avoid issues like this;

ignoredFiles: A list of strings representing local paths to files, the plugin will not perform any annotations on components in ignored files

ignoredComponents: A list of strings representing component names that the plugin will avoid annotating

Would these settings be helpful in getting your project running with reactComponentAnnotation?

This would be really helpful

[juansalvatore]

Hi @Y0lk, thanks for reporting this, I reproduced this locally and confirmed the crash is caused by the plugin adding the data-sentry props to Three components. I'll look into a proper fix, but in the meantime I can introduce some configs to the plugin to avoid issues like this;

ignoredFiles: A list of strings representing local paths to files, the plugin will not perform any annotations on components in ignored files

ignoredComponents: A list of strings representing component names that the plugin will avoid annotating

Would these settings be helpful in getting your project running with reactComponentAnnotation?

I think this would be good additions, is there a way too to add to the error log the component/file name, so that it's easier to debug and add to these lists? Thanks!

[chrisweb]

Hi @Y0lk, thanks for reporting this, I reproduced this locally and confirmed the crash is caused by the plugin adding the data-sentry props to Three components. I'll look into a proper fix, but in the meantime I can introduce some configs to the plugin to avoid issues like this;

ignoredFiles: A list of strings representing local paths to files, the plugin will not perform any annotations on components in ignored files

ignoredComponents: A list of strings representing component names that the plugin will avoid annotating

Would these settings be helpful in getting your project running with reactComponentAnnotation?

Definatly, I had the problem today when using next.js, so I opened a ticket in the sentry-javascript repository (https://github.com/getsentry/sentry-javascript/issues/13413), it is only now that I found this ticket, the suggested configuration options would for sure be helpful, especially as it would allow us to NOT set reactComponentAnnotation to false and completly disable the new feature

[jbednar97]

Thank you for opening this up. I had a bad time debugging what caused issues in our codebase after integrating Sentry. Are there any updates yet?

[lforst]

@jbednar97 no updates. As a workaround please disable reactComponentAnnotation.

[devkobby24]

Disabling the reactComponentAnnotation in the sentry config files works

[Ceres6]

Hi! I'm having the same problem. I'd be happy to help implement the fix/new config to alleviate the problem if I can get some steer and help is wanted

[chargome]

@Ceres6 could you check if https://github.com/getsentry/sentry-javascript-bundler-plugins/pull/617 solves this?

[Ceres6]

@chargome I can't use it because the latest @sentry/nextjs is v8.54.0 which uses @sentry/[email protected] while the option was introduced in 2.23.0

[chargome]

@Ceres6 I'll bump it 👍

[Ceres6]

I see there is a failing test on the bump PR. Lmk when it's published