Disable CSS class names obfuscation and add data attributes to help Sentry pickup components names

babel.config.js

@@ -67,7 +67,15 @@ module.exports = function (api) {
         env: {
             browser: browserEnv,
             'browser-development': browserEnv,
-            'browser-production': browserEnv,
+            'browser-production': {
+                ...browserEnv,
+                // Adds data-sentry-component/data-sentry-element attributes, so Sentry's ui.click breadcrumbs
+                // contain React component names instead of hashed CSS classes.
+                // Don't use the reactComponentAnnotation option of @sentry/webpack-plugin instead: it runs its own
+                // Babel transform that picks up this config without the browser env, so preset-env converts
+                // modules into commonjs, which breaks code splitting and tree shaking
+                plugins: [...browserEnv.plugins, '@sentry/bundler-plugins/babel-plugin'],
+            },
         },
     };
 };

package.json

@@ -92,6 +92,7 @@
         "@babel/preset-react": "^7",
         "@babel/preset-typescript": "^7",
         "@babel/runtime-corejs3": "^7",
+        "@sentry/bundler-plugins": "^10.76.0",
         "@sentry/webpack-plugin": "^5.4.0",
         "@storybook/addon-actions": "^8.2.9",
         "@storybook/addon-links": "^8.2.9",

webpack.config.js

@@ -151,7 +151,8 @@ const webpackConfig = {
                         loader: 'css-loader',
                         options: {
                             modules: {
-                                localIdentName: isProduction ? '[hash:base64:5]' : '[path][name]-[local]',
+                                // Keep readable names in production, so CSS classes in Sentry's breadcrumbs are meaningful
+                                localIdentName: isProduction ? '[name]__[local]--[hash:base64:5]' : '[path][name]-[local]',
                                 // css-loader v7 changed the default to 'camel-case-only', which broke
                                 // composes: some-dashed-class from '...', restore the v3 behaviour
                                 exportLocalsConvention: 'as-is',

yarn.lock

@@ -2173,7 +2173,7 @@
     "@sentry/replay" "11.4.0"
     "@sentry/replay-canvas" "11.4.0"
 
-"@sentry/bundler-plugins@^10.64.0":
+"@sentry/bundler-plugins@^10.64.0", "@sentry/bundler-plugins@^10.76.0":
   version "10.76.0"
   resolved "https://registry.yarnpkg.com/@sentry/bundler-plugins/-/bundler-plugins-10.76.0.tgz#056aa7c4804ea2ad1d07b5dfbbfd4dd37ffac70a"
   integrity sha512-xDcvwDk3WlvK67wtuHzNdaJit7z9dmp5urftgAtH2sIt8YmpdV68J8crFh6W4TEulYdhJHvSogLEnX+UoFl01A==