reactComponentAnnotation passes props to `Fragment`

[richardasymmetric]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

9.2.0

Framework Version

react@npm:19.0.0-rc-66855b96-20241106 next@npm:15.1.7 [1ff14]

Link to Sentry event

https://flowtax.sentry.io/issues/6331780118/events/99036a9409274672af8e72c6295349ba/

Reproduction Example/SDK Setup

I'm going to have a hard time creating a minimal reproduction since I'm still not entirely sure what's causing it, but I have narrowed it down. However, he's my sentry configs:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  poweredByHeader: false,

  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "x-content-type-options",
            value: "nosniff",
          },
          {
            key: "X-Frame-Options",
            value: "SAMEORIGIN",
          },
        ],
      },
    ];
  },

  serverExternalPackages: [
    "@prisma",
    "knex",
    "@aws-sdk/client-s3",
    "@aws-sdk/s3-request-presigner",
  ],

  compiler: {
    removeConsole:
      process.env.NODE_ENV === "production"
        ? {
            exclude: ["error", "warn"],
          }
        : false,
  },
};

// Injected content via Sentry wizard below

import { withSentryConfig } from "@sentry/nextjs";

function wrapper(nextConfig, sentryConfig) {
  if (process.env.TURBOPACK && !process.env.VERCEL_ENV) {
    console.info("Skipping Sentry setup while TurboPack is in use in development");
    return nextConfig;
  }
  return withSentryConfig(nextConfig, sentryConfig);
}

export default wrapper(nextConfig, {

  org: org here,
  project: project here,
  sentryUrl: "https://sentry.io/",

  silent: !process.env.CI,

  widenClientFileUpload: true,

  reactComponentAnnotation: {
    enabled: true,
  },

  tunnelRoute: "/monitoring",

  hideSourceMaps: true,

  disableLogger: true,

  automaticVercelMonitors: true,
});

// sentry.client.config.ts (and .server.config)
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "my dsn here",

  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  debug: false,
});

Steps to Reproduce

I'm using catalyst ui from tailwind, which in turn uses headlessui. In my code I'm using the <Listbox> componented from catalyst:

import { Listbox, ListboxOption } from "@/components/listbox";

export function SomeOptionsMenu({value}) {
    return (
    	<Listbox
    		name="optionMenu"
    		defaultValue={value}
    		onChange={(value)=>alert(value)}
    	>
    		<ListboxOption value="opt1">Option 1</ListboxOption>
    		<ListboxOption value="opt2">Option 2</ListboxOption>
    	</Listbox>
    );
}

// And the basic Listbox/ListboxOption definitions:

// Listbox

export function Listbox<T>({
  className,
  placeholder,
  autoFocus,
  "aria-label": ariaLabel,
  "children": options,
  ...props
}: {
  "className"?: string;
  "placeholder"?: React.ReactNode;
  "autoFocus"?: boolean;
  "aria-label"?: string;
  "children"?: React.ReactNode;
} & Omit<Headless.ListboxProps<typeof Fragment, T>, "as" | "multiple">) {
  return (
    <Headless.Listbox {...props} multiple={false}>
    // ...
    </Headless.Listbox>
  )
}

export function ListboxOption<T>({
  children,
  className,
  ...props
}: { className?: string; children?: React.ReactNode } & Omit<
  Headless.ListboxOptionProps<"div", T>,
  "as" | "className"
>) {
     return (
	    <Headless.ListboxOption as={Fragment} {...props}>
	    // ...
	    </Headless.ListboxOption>
    );
}

As you can see ListboxOption is rendered as a Fragment and passes through the props, however, when reactComponentAnnotation is enabled, sentry will add data-sentry-element, data-sentry-source-file, data-sentry-component properties which seem to fail.

Expected Result

It should render without errors.

Actual Result

Error: Passing props on "Fragment"!

The current component <Listbox /> is rendering a "Fragment".
However we need to passthrough the following props:
  - data-sentry-element
  - data-sentry-source-file
  - data-sentry-component
  - data-headlessui-state

Yo...
  File "we render an actual element instead of a "Fragment"."
  File "we can forward the props onto that element."
  File "client-portal/./node_modules/@headlessui/react/dist/utils/render.js", line 1, in F
    {snip} ngth>0)throw new Error(['Passing props on "Fragment"!',"",`The current component <${a} /> is rendering a "Fragment".`,"However we need to pa {snip}
  File "client-portal/./node_modules/@headlessui/react/dist/utils/render.js", line 1, in children
    {snip} o,e,a,l,i);let y=s!=null?s:0;if(y&2){let{static:f=!1,...u}=o;if(f)return F(u,e,a,l,i)}if(y&1){let{unmount:f=!0,...u}=o;return M(f?0:1,{[0]() {snip}
  File "client-portal/./node_modules/@headlessui/react/dist/utils/render.js", line 1, in F
    {snip} })}return F(o,e,a,l,i)}function F(n,r={},e,a,s){let{as:t=e,children:l,refName:i="ref",...o}=h(n,["unmount","static"]),y=n.ref!==void 0?{[i]: {snip}
...
(7 additional frame(s) were not displayed)

[richardasymmetric]

I forgot to mention, if I disable the reactComponentAnnotation it appears to work again.

[lforst]

Hi, we will change so that Fragment is excluded from being annotated. For now please disable reacComponentAnnotation or do

  reactComponentAnnotation: {
    enabled: true,
    ignoredComponents: ['Fragment']
  }

[btpnlsl]

I am also seeing the same issue when trying to using the Vite plugin to enable reactComponentAnnotation with Headless UI, however adding 'Fragment' or 'Tab.Group' to the list of ignoredComponents does not seem to solve the problem.

How do you use Sentry?
Sentry Saas (sentry.io)

Which SDK are you using?
@sentry/react

SDK Version
9.2.0

Framework Version
react - 18.3.1
react-bootstrap - 2.10.4
@headlessui/react - 1.7.19

In my particular case I get the following error when rendering:

Error: Passing props on "Fragment"!

The current component <Tabs /> is rendering a "Fragment".
However we need to passthrough the following props:
  - data-sentry-element
  - data-sentry-component
  - data-sentry-source-file
  - ref

You can apply a few solutions:
  - Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".
  - Render a single element as the child so that we can forward the props onto that element.

My vite.config.ts file has the sentryVitePlugin configured like this:

    sentryVitePlugin({
      ...
      reactComponentAnnotation: {
        enabled: true,
        ignoredComponents: ['Fragment', 'Tab.Group', 'Portal'],
      },
    })

The list of ignoredComponents includes 'Portal' because I saw a similar message for that component when rendering, and adding it to the list of ignoredComponents seemed to fix the issue.

However, adding 'Fragment' or 'Tab.Group' doesn't seem to fix the problem with rendering. I've attempted to add both 'Fragment' & 'Tabs' as the sole element in the list of ignoredComponents or together with no change. Only disabling reactComponentAnnotation will stop the error in rendering.

The documentation for the particular component which is causing the error is here

[btpnlsl]

I did a little debugging I have updated my comment above and might have some more useful information. The error when rendering in the HeadlessUI is caused by attributes on a Tag.Group element.

I'm not sure that the proposed fix will solve this problem because it looks like there is already some code in isReactFragment that would cause the component attributes plugin to ignore elements that are named 'Fragment'.

The attributes are applied in the applyAttributes method here with the elementName of 'unknown'.

Prior in the applyAttributes method there is a call to isReactFragment for the openingElement which returns false because:

• the element is not a JSXFragment
• the result of getPathName is not 'Fragment' or 'React.Fragment'
• though the opening element's node.name.type is a JSXMemberExpression, the combo of the objectName & propertyName are not 'React' and 'Fragment' respectively (they are 'Tab' & 'Group').

getPathName is not able to return a name for the openingElement because openingElement.node.name is a JSXMemberExpression and not a string, identifier, JSXIdentifier, JSXNamespaceName. Instead it returns 'unknown'.

So applyAttributes doesn't recognize the openingElement as a React Fragment and then continues on to see if the element should be ignored. To do so it is calling getPathName here and then using the result to see if the name is in the list of ignored components. getPathName returns 'unknown' (as it does in isReactFragment) which means that the element can't be ignored, even if it is in ignoredComponents.

I think it might be possible to fix the issue of applyAttributes not being able to ignore elements with a JSXMemberExpression name by moving some of the code in isReactFragment dealing with JSXMemberExpressions into getPathName so that getPathName can return a concatenation of objectName + '.' + propertyName.

As for recognizing React fragments, it seems like the checks in isReactFragment don't align with the checks which are happening in Headless UI.