Use SWC to automatically annotate React components with data attributes for component tracking
npm install swc-plugin-component-annotateA SWC plugin that automatically annotates React components with data attributes for component tracking and debugging.
This plugin transforms React components by adding data attributes that help with tracking and debugging. It automatically identifies React components (function components, arrow function components, and class components) and adds the following attributes:
- data-component: The component name (added to root elements)
- data-element: The element/component name (added to non-HTML elements)
- data-source-file: The source filename
- ✅ Function Components: function MyComponent() { ... }
- ✅ Arrow Function Components: const MyComponent = () => { ... }
- ✅ Class Components: class MyComponent extends Component { ... }
- ✅ React Fragments: Supports Fragment, React.Fragment, and <> syntax
- ✅ Nested Components: Properly handles component hierarchies
- ✅ React Native Support: Uses camelCase attributes when configured
- ✅ Configurable: Ignore specific components, annotate fragments, etc.
``bash`
npm install --save-dev swc-plugin-component-annotate
Add the plugin to your .swcrc configuration:
`json`
{
"jsc": {
"experimental": {
"plugins": [
["swc-plugin-component-annotate", {}]
]
}
}
}
`json`
{
"jsc": {
"experimental": {
"plugins": [
["swc-plugin-component-annotate", {
"native": false,
"ignored-components": ["MyIgnoredComponent"],
"component-attr": "data-sentry-component",
"element-attr": "data-sentry-element",
"source-file-attr": "data-sentry-source-file"
}]
]
}
}
}
#### Options
- native (boolean, default: false): Use React Native attribute names (camelCase)false
- : data-component, data-element, data-source-filetrue
- : dataComponent, dataElement, dataSourceFile
- ignored-components (array, default: []): List of component names to skip during annotation
- component-attr (string, optional): Custom component attribute name (overrides default and native setting)
- element-attr (string, optional): Custom element attribute name (overrides default and native setting)
- source-file-attr (string, optional): Custom source file attribute name (overrides default and native setting)
To use Sentry-specific attribute names for compatibility with Sentry's tracking:
`json`
{
"jsc": {
"experimental": {
"plugins": [
["swc-plugin-component-annotate", {
"component-attr": "data-sentry-component",
"element-attr": "data-sentry-element",
"source-file-attr": "data-sentry-source-file"
}]
]
}
}
}
This will generate attributes like:
`jsx`
Click me
`jsx
import React from 'react';
const MyComponent = () => {
return (
export default MyComponent;
`
`jsx
import React from 'react';
const MyComponent = () => {
return (
export default MyComponent;
`
`jsx
// Input
class MyClassComponent extends Component {
render() {
return ;Hello from class
}
}
// Output
class MyClassComponent extends Component {
render() {
return
$3
With
"native": true:`jsx
// Output
const MyComponent = () => {
return (
Hello World
);
};
``