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

Disable for production? #169

Closed rushi closed 1 month ago

rushi commented 7 months ago

Your Questions My goal is to only run this in dev & test environments so we can easily debug and track down problems to the right component.

Context In production I don't want our customers to see filenames, component names etc. However I wouldn't mind sending the info to FS - Just don't want component and filenames being seen by customers via view-source

Attempts I tried to add a selective export using process.env.NODE_ENV in my babel export and it didn't seem to work.

1etoy commented 5 months ago

Hi @rushi! thanks for the question here and sorry we didn't get back to you sooner—we try to keep an eye out here for questions, but in the future if you contact FullStory Support (support@fullstory.com / help.fullstory.com/hc/requests/new) we'll be able to get back to you much quicker. 🙂

We've had a similar question come up before and here's some code we've suggested for running it only in production, which you could modify to suit your use case / environments you wish to apply the plugin in. Hope this helps!

module.exports = function(api) {
  api.cache(true);

  const plugins = ['@fullstory/react-native'];

  // Check if NODE_ENV is set to 'production'
  if (process.env.NODE_ENV === 'production') {
    // Add the @fullstory/annotate-react plugin only in production
    plugins.push(["@fullstory/annotate-react", {
      native: true,
      setFSTagName: true,
    }]);
  }

  return {
    // Other Babel config options like presets
    presets: ['module:metro-react-native-babel-preset'],
    plugins: plugins,
  };
};
RyanCommits commented 1 month ago

Closing. @rushi Let us know if this doesn't work for you.