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

Replaces the Fullstory Babel annotate plugin with our own version. See
https://github.com/getsentry/sentry-javascript-bundler-plugins/pull/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](https://www.npmjs.com/package/@sentry/component-annotate-plugin)
for more details on the plugin

babel.config.ts

@@ -44,12 +44,14 @@ const config: TransformOptions = {
           },
         ],
         ['babel-plugin-add-react-displayname'],
+        '@sentry/babel-plugin-component-annotate',
       ],
     },
     development: {
       plugins: [
         '@emotion/babel-plugin',
         '@babel/plugin-transform-react-jsx-source',
+        '@sentry/babel-plugin-component-annotate',
         ...(process.env.SENTRY_UI_HOT_RELOAD ? ['react-refresh/babel'] : []),
       ],
     },

package.json

@@ -54,6 +54,7 @@
     "@sentry-internal/rrweb": "2.9.0",
     "@sentry-internal/rrweb-player": "2.9.0",
     "@sentry-internal/rrweb-snapshot": "2.9.0",
+    "@sentry/babel-plugin-component-annotate": "^2.14.0",
     "@sentry/core": "^7.99.0",
     "@sentry/integrations": "^7.99.0",
     "@sentry/node": "^7.99.0",

static/app/utils/performanceForSentry/index.tsx

@@ -604,7 +604,9 @@ function getNearestElementName(node: HTMLElement | undefined | null): string | u
   let current: HTMLElement | null = node;
   while (current && current !== document.body) {
     const elementName =
-      current.dataset?.testId ?? current.dataset?.component ?? current.dataset?.element;
+      current.dataset?.testId ??
+      current.dataset?.sentryComponent ??
+      current.dataset?.element;
 
     if (elementName) {
       return elementName;

yarn.lock

@@ -2858,6 +2858,11 @@
     "@sentry/types" "7.99.0"
     "@sentry/utils" "7.99.0"
 
+"@sentry/babel-plugin-component-annotate@^2.14.0":
+  version "2.14.0"
+  resolved "https://registry.yarnpkg.com/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.14.0.tgz#e62f448dd3c922a6d32e9f1c0a5ae85fa6ec22c2"
+  integrity sha512-FWU4+Lx6fgxjAkwmc3S9j1Q/6pqKZyZzfi52B+8WMNw7a5QjGXgxc5ucBazZYgrcsJKCFBp4QG3PPxNAieFimQ==
+
 "@sentry/browser@7.99.0":
   version "7.99.0"
   resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.99.0.tgz#3e78beb490d141c988038ea902689a1e9171c6cf"