fullstorydev / fullstory-babel-plugin-annotate-react

A Babel plugin that annotates React components, making them easier to target with FullStory search
MIT License
30 stars 13 forks source link

Skip annotation for specific components #33

Closed omrivardi closed 3 months ago

omrivardi commented 3 years ago

Hi, I have an issue integrating fullstory in my react app. This looks similar to #13 which I commented on.

I am using ThemeProvider component from react-jss. It's looks like it isn't happy with the new annotations. image

Is it possible to skip the annotations for this and other components? Perhaps as part of the babel plugin options?

Thanks

sabrina-li commented 3 years ago

Hi @omrivardi Thank you so much for your feedback and creating a new issue. We will look into this issue and see what we need to do to support this use case. I will mark this as an enhancement so we can investigate skipping annotations and/or workaround for this error

omrivardi commented 3 years ago

@sabrina-li Thank you, did you got to take a look?

sabrina-li commented 3 years ago

@omrivardi Thank you for following up with us! In order to understand what exactly is going on here, I've been trying to recreate the error that you are seeing when using ThemeProvider and the plugin.

I used create-react-app to create the boilerplates, added theming and prop-types, then created one <DemoBox> component to be rendered in app, within a <ThemeProvider>

The repro app is on the sabrina/theming-sample branch, in the samples folder here However I haven't been able to recreate the error in this toy project.

Would you be willing to take a look at the sample app linked above, and see if anything pops out that are obviously different than what you have in your project? Also it'd be immensely helpful if you have a sample app that consistently reproduces the error that maybe you can share with us so we can take a closer look to understand the issue.

omrivardi commented 3 years ago

@sabrina-li Thank you 😄

I am sorry for misguiding you in my previous comment. I was using @material-ui/core/styles

I modified your example to reproduce the error I am seeing here.

This should reproduce the following error: image

sabrina-li commented 3 years ago

Hi @omrivardi Thank you so much for the sample code!

I'm able to reproduce the warning above. And I did a little digging, looks like this warning is due to the material-ui package adding a specialProperty in it's exactProp.ts file. The special check throws the warning when it detects the data- props. The warning is showing only once during development.

We would like continue investigate further to see how we can improve and stop triggering this check with material ui. Thanks again for bring this to our attention and creating the replicable sample!

nateq314 commented 3 years ago

Any progress on this?

manzurola commented 2 years ago

Hi, I'm interested in this as well. Having issues with victory-native. My app crashes when loading a chart. Removing the babel react-annoate plugin solves it.

I dug a bit and it looks that VictoryPie has a property named dataComponent, which probably gets overwritten by fullstory and causes this issue.

rcmaples commented 2 years ago

Hi @nateq314 and @manzurola, thanks for checking in. I'm RC with the FullStory support engineering team. We're not really set up to provide support via GitHub issues. If you're having trouble with a React Native mobile app, reach out to mobile-support@fullstory.com. If you're running into an issue with a React web app you can reach out to support@fullstory.com and we'll be happy to help out.

Cheers!

manzurola commented 2 years ago

@nateq314 and anyone who needs a fix, you can exclude this module and relevant files via babel. As such:

overrides: [
    {
      include: './node_modules/victory-native',
      plugins: [['@fullstory/annotate-react', false]],
    },
],
RyanCommits commented 3 months ago

Please use the Ignore Components feature to avoid attribute conflicts.