reactComponentAnnotation. I use an unintended value for a prop.

[jin-Pro]

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.

[Lms24]

Hi @jin-Pro, thanks for writing in!

If you could provide a minimal reproducible example for the issue we'd greatly appreciate it! Also please feel free to propose a concrete solution.

Gonna tag @0Calories to take a look please, thx!

[mattleong]

I think this function interferes with the spread operation, which is a basic function of javascript.

Can confirm that is an issue using the webpack plugin as well. Specifically, we were unable to spread Sets. 🤷‍♂

Resolution is to not use reactComponentAnnotation in the mean time.

[chargome]

@mattleong could you specify what you are trying to do exactly, or better, provide a small reproducible example?

[getsantry[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[jin-Pro]

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>
  );
};

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.