search

getsentry / sentry-javascript-bundler-plugins

JavaScript Bundler Plugins for Sentry
https://sentry.io
BSD 3-Clause "New" or "Revised" License
124 stars 32 forks source link

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

Open Y0lk opened 2 months ago

Y0lk commented 2 months ago

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 commented 2 months ago

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

0Calories commented 2 months ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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!