React PropTypes errors

[scottcarol]

Hi there, thanks for writing this plugin and putting the examples together!

Our project uses React with Material UI and we're using FullStory. When I install this plugin, no matter whether I'm modifying my webpack config file or modifying my .babelrc file, I'm getting the correct data- annotations, but I'm seeing PropTypes errors in the console, which is surprising to me since I thought that these annotations would be added after any PropTypes checking would happen. When I tried babel-plugin-transform-react-qa-classes, which was listed as the source of much of the logic of this plugin, I didn't get any PropTypes errors. I really like the data-component and data-file-source annotations, but I'm not able to get this plugin working at present. Is this an issue you've heard of happening for any other users?

[patrick-fs]

Hi @scottcarol thanks for checking out the plugin. I see that React DevTools is logging prop type warnings. I'd like to zero in on how our plugin behaves while React DevTools is active - there may be some required changes. To be sure, are you explicitly setting propType declarations in your code?

[scottcarol]

Hi @patrick-fs thanks for the quick response! Yes, we import prop-types into each of our component files and then explicitly set PropTypes declarations - here's a sample:

MyComponent.propTypes = {
  firstName: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

[patrick-fs]

Thanks for the additional info, we'll check this out.

[scottcarol]

@patrick-fs Thanks so much for taking a look.

I have more question related to our use of this library. In our app, we frequently render many versions of the same component in a file. For example in Navigation.jsx we render a component MenuItem for each item in a sidebar. Using this plugin, all of the menu items would have the same data-component value (MenuItem) and data-file-source (Navigation.jsx). Is this correct? And if so, what do you recommend in terms of setting unique identifiers so our product team can set the correct alerts in FullStory?

[patrick-fs]

Hey @scottcarol. You also have the option of adding your own data-* attributes. You can find a list of attributes that we index out of the box here: https://help.fullstory.com/hc/en-us/articles/360044844553-How-to-search-on-data-attributes-in-FullStory-BETA-

I recommend adding one of those attributes to components that you'd like to uniquely identify in your navigation.

[patrick-fs]

cc @TrevorFSmith @JoshMiers-FS

[scottcarol]

@patrick-fs Thanks so much, will dig in to this. To confirm, setting our own data attributes would be separate from our use of this plugin, is that correct?

[patrick-fs]

@patrick-fs Thanks so much, will dig in to this. To confirm, setting our own data attributes would be separate from our use of this plugin, is that correct?

Correct.

[scottcarol]

Ok, thanks for the info @patrick-fs!

[TrevorFSmith]

@scottcarol Thank you for the bug report and helping us track down what's happening. I've created a quick test app in order to reproduce what you're seeing but I haven't been successful, yet. 😿

I took one of the basic "single-page-app" react templates and added a component that uses prop-types to require a prop to see if I could get this fullstory-babel-plugin-annotate-react plugin to cause trouble.

The repro app is in the tfs/prop-types-bug-repro branch under /samples/prop-types-app/: https://github.com/fullstorydev/fullstory-babel-plugin-annotate-react/tree/tfs/prop-types-bug-repro/samples/prop-types-app

The component that uses prop types is in /samples/prop-types-app/src/ShowTimeComponent.js and I've confirmed that if I use it incorrectly by not passing the time prop then prop-types complains about the missing prop.

Unfortunately, I must be using a different configuration or version of something because I haven't convinced prop-types to complain about the data-component and data-file-source properties added by this plugin.

Would you be willing to take a look at the sample app and see if anything pops out at your that I could try (a different version or config, for example) that would help me reproduce this bug?

[scottcarol]

Hey @TrevorFSmith, thanks so much for looking into this, appreciate the help from the FullStory team. I will take a look by end of the work day Friday (Pacific).

[omrivardi]

Hi, I am experiencing the same errors trying to add fullstory to a react app using material-ui. Is there an option to exclude some components from annotating? This can solve the problem and similar problems that may arise in other components.

[RyanCommits]

See this section for instructions on ignoring components.