babel-plugin-component-annotate`) #69

New issue

Open

opened 2026-03-03 13:52:44 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 13:52:44 +03:00

Owner

Originally created by @0xdevalias on GitHub (Mar 1, 2025).
Original GitHub issue: https://github.com/jehna/humanify/issues/350

Sentry has a feature that allows it to annotate built React components with the component name and source filename it was built from, to help provide better error logs. If these are present in the built output, this could be leveraged to extract those details and assist in restoring the original component name and/or source file name:

https://docs.sentry.io/platforms/javascript/guides/react/features/component-names/
- Sentry helps you capture your React components and unlock additional insights in your application. You can set it up to use React component names instead of selectors.
- You can capture the names of React components in your application via a Babel plugin, which can unlock powerful workflows and decrease ambiguity.
- Please note that your Sentry browser SDK must be at version 7.91.0 or higher before you can use these features. Only React components in .jsx or .tsx files can be tracked.
- The Babel plugin parses your application's JSX source code at build time, and applies additional data attributes onto it. These attributes then appear on the DOM nodes of your application's built HTML,
- For example, if you had a component named MyAwesomeComponent in the file myAwesomeComponent.jsx:
```
function MyAwesomeComponent() {
  return <div>This is a really cool and awesome component!</div>;
}
```
  After your bundler applied the plugin and built your project, the resulting DOM node would look like this:
```
<div
  data-sentry-component="MyAwesomeComponent"
  data-sentry-source-file="myAwesomeComponent.jsx"

  This is a really cool and awesome component!
</div>
```

https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/babel-plugin-component-annotate

@sentry/babel-plugin-component-annotate

github.com/getsentry/sentry-javascript-bundler-plugins@ee73414589/packages/babel-plugin-component-annotate/src/index.ts (L40-L46)

const webComponentName = "data-sentry-component";
const webElementName = "data-sentry-element";
const webSourceFileName = "data-sentry-source-file";

const nativeComponentName = "dataSentryComponent";
const nativeElementName = "dataSentryElement";
const nativeSourceFileName = "dataSentrySourceFile";

https://github.com/search?type=code&q=%22data-sentry-source-file%22+OR+%22data-sentry-component%22

Originally created by @0xdevalias on GitHub (Mar 1, 2025). Original GitHub issue: https://github.com/jehna/humanify/issues/350 Sentry has a feature that allows it to annotate built React components with the component name and source filename it was built from, to help provide better error logs. If these are present in the built output, this could be leveraged to extract those details and assist in restoring the original component name and/or source file name: - https://docs.sentry.io/platforms/javascript/guides/react/features/component-names/ - > Sentry helps you capture your React components and unlock additional insights in your application. You can set it up to use React component names instead of selectors. - > You can capture the names of React components in your application via a [Babel plugin](https://www.npmjs.com/package/@sentry/babel-plugin-component-annotate), which can unlock powerful workflows and decrease ambiguity. - > Please note that your Sentry browser SDK must be at version `7.91.0` or higher before you can use these features. Only React components in `.jsx` or `.tsx` files can be tracked. - > The Babel plugin parses your application's JSX source code at build time, and applies additional data attributes onto it. These attributes then appear on the DOM nodes of your application's built HTML, - > For example, if you had a component named `MyAwesomeComponent` in the file `myAwesomeComponent.jsx`: > > ```js > function MyAwesomeComponent() { > return <div>This is a really cool and awesome component!</div>; > } > ``` > > After your bundler applied the plugin and built your project, the resulting DOM node would look like this: > > ```html > <div > data-sentry-component="MyAwesomeComponent" > data-sentry-source-file="myAwesomeComponent.jsx" > > This is a really cool and awesome component! > </div> > ``` - https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/babel-plugin-component-annotate - `@sentry/babel-plugin-component-annotate` - https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/ee73414589a3341c4a4a8ec8efa3116d838e33f8/packages/babel-plugin-component-annotate/src/index.ts#L40-L46 - ```js const webComponentName = "data-sentry-component"; const webElementName = "data-sentry-element"; const webSourceFileName = "data-sentry-source-file"; const nativeComponentName = "dataSentryComponent"; const nativeElementName = "dataSentryElement"; const nativeSourceFileName = "dataSentrySourceFile"; ``` - https://github.com/search?type=code&q=%22data-sentry-source-file%22+OR+%22data-sentry-component%22 ## See Also - https://github.com/pionxzh/wakaru/issues/140 - https://github.com/j4k0xb/webcrack/issues/143 --- **Edit:** Also captured on this gist for posterity: - https://gist.github.com/0xdevalias/d8b743efb82c0e9406fc69da0d6c6581#issue-140-smart-rename-add-support-for-data-sentry-component--data-sentry-element--data-sentry-source-file-from-sentrybabel-plugin-component-annotate