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 (getsentry/sentry-javascript#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