Fix Symbol to string conversion error when passing React nodes as props in docs

[Copilot]

The getReactSymbolName function in the React jsx decorator was causing "Cannot convert a Symbol value to a string" errors when React nodes were passed as props to components in Storybook v9 docs.

Problem

When users passed React elements as props (e.g., <Button label={<span>Icon</span>} />), the docs page would break with a Symbol conversion error. This occurred because the getReactSymbolName function was calling toString() on objects without proper error handling, leading to failures when:

• The element type was null or undefined
• Objects lacked a toString method (like Object.create(null))
• The $$typeof property contained corrupted values

Solution

Added robust error handling to the getReactSymbolName function:

export const getReactSymbolName = (elementType: any): string => {
  // Handle null/undefined inputs safely
  if (elementType == null) {
    return 'unknown';
  }
  
  const elementName = elementType.$$typeof || elementType;
  
  // Safe string conversion with fallback for objects without toString
  let symbolDescription: string;
  try {
    if (typeof elementName === 'symbol') {
      symbolDescription = elementName.toString().replace(/^Symbol\((.*)\)$/, '$1');
    } else if (elementName && typeof elementName.toString === 'function') {
      symbolDescription = elementName.toString().replace(/^Symbol\((.*)\)$/, '$1');
    } else {
      // Fallback for objects without toString method
      symbolDescription = String(elementName).replace(/^Symbol\((.*)\)$/, '$1');
    }
  } catch (error) {
    // Fallback to a safe string representation
    symbolDescription = 'unknown';
  }
  // ... rest of function unchanged
};

Changes Made

• Added null/undefined safety checks
• Added symbol type detection and appropriate handling
• Added toString method existence verification before calling
• Added safe fallbacks using String() for problematic objects
• Added comprehensive error recovery with 'unknown' fallback
• Added extensive test coverage for edge cases

Testing

Added test cases covering:

• Null and undefined inputs
• Objects without toString methods
• Objects with corrupted $$typeof properties
• React nodes as props (the original issue scenario)
• Primitive values and regular objects

The fix is minimal, backwards-compatible, and preserves all existing functionality while preventing the Symbol conversion errors.

Fixes #32183.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• cloud.nx.app
  • Triggering command: /usr/local/bin/node ./bin/post-install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[valentinpalkovic]

Superseded by #32220