feat(plugins): Add Sentry Babel plugin for React component annotation#64439
feat(plugins): Add Sentry Babel plugin for React component annotation#64439
Conversation
github-actions
bot
added
the
Scope: Frontend
0Calories
changed the title
|
@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? |
|
Thanks for the heads up @JonasBa , I'll take a look |
|
I realized that babel plugins must be prefixed with |
|
Update: It needs to be prefixed with |
| plugins: [ | ||
| '@emotion/babel-plugin', | ||
| '@babel/plugin-transform-runtime', | ||
| '@babel/plugin-transform-class-properties', |
There was a problem hiding this comment.
Is it intentional to remove this?
There was a problem hiding this comment.
Whoops, forgot to put this one back in while I was experimenting. Not intentional
package.json
Outdated
| "devDependencies": { | ||
| "@biomejs/biome": "^1.5.3", | ||
| "@pmmmwh/react-refresh-webpack-plugin": "0.5.10", | ||
| "@sentry/babel-plugin-component-annotate": "^2.13.0", |
There was a problem hiding this comment.
This will need to be in dependencies since we require it to build in prod
|
Currently failing in CI, as the |
0Calories
added
the
Trigger: getsentry tests
3 participants
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-componentannotations 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