Problem Statement

Hello, I am a software developer using @sentry/vite-plugin.

I am using reactComponentAnnotation in sentryVitePlugin.

I was thinking of injecting the corresponding value into html's attribute through babel.

However, I saw data-sentry-component and data-sentry-source-file in react component prop,
Because of this value I faced error.

I think this function interferes with the spread operation, which is a basic function of javascript.
Because of this, I argue that this feature should be changed.

---------------- Additional explanation ---------------------

I used sentry library in my project.

The packaged version of the library used in my project.

"vite": "^5.4.10",
"@sentry/react": "^8.35.0",
"@sentry/vite-plugin": "^2.22.6",
Sentry's reactComponentAnnotation feature injects properties like data-sentry-component and data-sentry-source-file into component props.

This can cause unintended errors when using methods like Object.keys() to process props, as unexpected keys are included.

For example, in logic where components are dynamically rendered based on specific keys, these additional properties can lead to unintended behavior.

const testObjValue = {
  a: ComponentA,
  b: ComponentB,
};

type ComponentType = {
  a: any;
  b: any;
};

const Component = (props: ComponentType) => {
  const keys = Object.keys(props) as ['a', 'b'];
  return (
    <ul>
      {keys.map((key) => {
        const ChildComponent = testObjValue[key];
        return <ChildComponent key={key} />; 
      })}
    </ul>
  );
};

Solution Brainstorm

The reactComponentAnnotation feature of Sentry should be modified to directly add attributes only to the HTML tags in JSX.
This approach avoids modifying the component's props and affects only the HTML DOM, effectively preventing unintended side effects.