[smart-rename] Add support for `data-sentry-component` / `data-sentry-element` / `data-sentry-source-file` (from `@sentry/babel-plugin-component-annotate`)

Open 0xdevalias opened this issue 10 months ago • 0 comments

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
- https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/ee73414589a3341c4a4a8ec8efa3116d838e33f8/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

[smart-rename] Add support for `data-sentry-component` / `data-sentry-element` / `data-sentry-source-file` (from `@sentry/babel-plugin-component-annotate`)

See Also