feat(plugins): Add Sentry Babel plugin for React component annotation

[0Calories]

Replaces the Fullstory Babel annotate plugin with our own version. See getsentry/sentry-javascript-bundler-plugins#468 for more details

This plugin essentially does the same thing, but will annotate the DOM with data-sentry-component annotations instead, which is what our SDK looks for when sending component name data to Sentry. This will allow us to start dogfooding new features like span grouping by component names, breadcrumbs, and component names in Replays!

Check out the NPM Page for more details on the plugin

[JonasBa]

@0Calories we rely on these names in at least one place in the codebase so merging this will break that logic. I have one instance where I rely on the data attribute here, but there might be others. Can we grep the codebase and update anything that might rely on the old dataset attributes?

[0Calories]

Thanks for the heads up @JonasBa , I'll take a look

[0Calories]

I realized that babel plugins must be prefixed with babel in their package name, otherwise it can't resolve if you try to add it to your babel config via the package name. I'm working on updating this first before proceeding

[0Calories]

Update: It needs to be prefixed with babel-plugin, not babel 🤦

[billyvg]

Is it intentional to remove this?

[0Calories]

Whoops, forgot to put this one back in while I was experimenting. Not intentional

[billyvg]

This will need to be in dependencies since we require it to build in prod

[0Calories]

Currently failing in CI, as the getsentry PR needs to be merged first:

https://github.com/getsentry/getsentry/pull/12835