fix(react): Avoid String(key) to fix Symbol conversion error (#18982)

Resolves: #18966

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/react-19/src/pages/Index.jsx

@@ -1,4 +1,11 @@
 import * as React from 'react';
+import { withProfiler } from '@sentry/react';
+
+function ProfilerTestComponent() {
+  return <div id="profiler-test">withProfiler works</div>;
+}
+ProfilerTestComponent.customStaticMethod = () => 'static method works';
+const ProfiledComponent = withProfiler(ProfilerTestComponent);
 
 const Index = () => {
   const [caughtError, setCaughtError] = React.useState(false);
@@ -7,6 +14,7 @@ const Index = () => {
   return (
     <>
       <div>
+        <ProfiledComponent />
         <SampleErrorBoundary>
           <h1>React 19</h1>
           {caughtError && <Throw error="caught" />}

dev-packages/e2e-tests/test-applications/react-19/tests/hoist-non-react-statics.test.ts

@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+
+test('withProfiler does not throw Symbol conversion error when String() is patched to simulate minifier', async ({
+  page,
+}) => {
+  const errors: string[] = [];
+
+  // Listen for any page errors (including the Symbol conversion error)
+  page.on('pageerror', error => {
+    errors.push(error.message);
+  });
+
+  // Listen for console errors
+  page.on('console', msg => {
+    if (msg.type() === 'error') {
+      errors.push(msg.text());
+    }
+  });
+
+  await page.addInitScript(() => {
+    const OriginalString = String;
+    // @ts-expect-error - intentionally replacing String to simulate minifier behavior
+    window.String = function (value: unknown) {
+      if (typeof value === 'symbol') {
+        throw new TypeError('Cannot convert a Symbol value to a string');
+      }
+      return OriginalString(value);
+    } as StringConstructor;
+
+    Object.setPrototypeOf(window.String, OriginalString);
+    window.String.prototype = OriginalString.prototype;
+    window.String.fromCharCode = OriginalString.fromCharCode;
+    window.String.fromCodePoint = OriginalString.fromCodePoint;
+    window.String.raw = OriginalString.raw;
+  });
+
+  await page.goto('/');
+
+  const profilerTest = page.locator('#profiler-test');
+  await expect(profilerTest).toBeVisible();
+  await expect(profilerTest).toHaveText('withProfiler works');
+
+  const symbolErrors = errors.filter(e => e.includes('Cannot convert a Symbol value to a string'));
+  expect(symbolErrors).toHaveLength(0);
+});

packages/react/src/hoist-non-react-statics.ts

@@ -143,12 +143,12 @@ export function hoistNonReactStatics<
     const sourceStatics = getStatics(sourceComponent);
 
     for (const key of keys) {
-      const keyStr = String(key);
+      // Use key directly - String(key) throws for Symbols if minified to '' + key (#18966)
       if (
-        !KNOWN_STATICS[keyStr as keyof typeof KNOWN_STATICS] &&
-        !excludelist?.[keyStr] &&
-        !sourceStatics?.[keyStr] &&
-        !targetStatics?.[keyStr] &&
+        !KNOWN_STATICS[key as keyof typeof KNOWN_STATICS] &&
+        !(excludelist && excludelist[key as keyof C]) &&
+        !sourceStatics?.[key as string] &&
+        !targetStatics?.[key as string] &&
         !getOwnPropertyDescriptor(targetComponent, key) // Don't overwrite existing properties
       ) {
         const descriptor = getOwnPropertyDescriptor(sourceComponent, key);

packages/react/test/hoist-non-react-statics.test.tsx

@@ -290,4 +290,82 @@ describe('hoistNonReactStatics', () => {
     expect((Hoc2 as any).originalStatic).toBe('original');
     expect((Hoc2 as any).hoc1Static).toBe('hoc1');
   });
+
+  it('handles Symbol.hasInstance from Function.prototype without throwing', () => {
+    expect(Object.getOwnPropertySymbols(Function.prototype)).toContain(Symbol.hasInstance);
+
+    class Source extends React.Component {
+      static customStatic = 'value';
+    }
+    class Target extends React.Component {}
+
+    // This should not throw "Cannot convert a Symbol value to a string"
+    expect(() => hoistNonReactStatics(Target, Source)).not.toThrow();
+    expect((Target as any).customStatic).toBe('value');
+  });
+
+  it('handles components with Symbol.hasInstance defined', () => {
+    class Source extends React.Component {
+      static customStatic = 'value';
+      static [Symbol.hasInstance](instance: unknown) {
+        return instance instanceof Source;
+      }
+    }
+    class Target extends React.Component {}
+
+    // This should not throw
+    expect(() => hoistNonReactStatics(Target, Source)).not.toThrow();
+    expect((Target as any).customStatic).toBe('value');
+    // Symbol.hasInstance should be hoisted
+    expect(typeof (Target as any)[Symbol.hasInstance]).toBe('function');
+  });
+
+  it('does not rely on String() for symbol keys (simulating minifier transformation)', () => {
+    const sym = Symbol('test');
+    // eslint-disable-next-line prefer-template
+    expect(() => '' + (sym as any)).toThrow('Cannot convert a Symbol value to a string');
+
+    // But accessing an object with a symbol key should NOT throw
+    const obj: Record<string, boolean> = { name: true };
+    expect(obj[sym as any]).toBeUndefined(); // No error, just undefined
+
+    // Now test the actual function - it should work because it shouldn't
+    // need to convert symbols to strings
+    class Source extends React.Component {
+      static customStatic = 'value';
+    }
+    // Add a symbol property that will be iterated over
+    (Source as any)[Symbol.for('test.symbol')] = 'symbolValue';
+
+    class Target extends React.Component {}
+
+    expect(() => hoistNonReactStatics(Target, Source)).not.toThrow();
+    expect((Target as any).customStatic).toBe('value');
+    expect((Target as any)[Symbol.for('test.symbol')]).toBe('symbolValue');
+  });
+
+  it('works when String() throws for symbols (simulating aggressive minifier)', () => {
+    const OriginalString = globalThis.String;
+    globalThis.String = function (value: unknown) {
+      if (typeof value === 'symbol') {
+        throw new TypeError('Cannot convert a Symbol value to a string');
+      }
+      return OriginalString(value);
+    } as StringConstructor;
+
+    try {
+      class Source extends React.Component {
+        static customStatic = 'value';
+      }
+      (Source as any)[Symbol.for('test.symbol')] = 'symbolValue';
+
+      class Target extends React.Component {}
+
+      expect(() => hoistNonReactStatics(Target, Source)).not.toThrow();
+      expect((Target as any).customStatic).toBe('value');
+      expect((Target as any)[Symbol.for('test.symbol')]).toBe('symbolValue');
+    } finally {
+      globalThis.String = OriginalString;
+    }
+  });
 });