DevTools console patching should handle Symbols without erroring (#21368)

Author: Brian Vaughn

packages/react-devtools-shared/src/__tests__/console-test.js

@@ -453,4 +453,16 @@ describe('console', () => {
       '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
   });
+
+  it('should correctly log Symbols', () => {
+    const Component = ({children}) => {
+      fakeConsole.warn('Symbol:', Symbol(''));
+      return null;
+    };
+
+    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');
+  });
 });

packages/react-devtools-shared/src/backend/console.js

@@ -144,7 +144,7 @@ export function patch({
         if (consoleSettingsRef.appendComponentStack) {
           const lastArg = args.length > 0 ? args[args.length - 1] : null;
           const alreadyHasComponentStack =
-            lastArg !== null && isStringComponentStack(lastArg);
+            typeof lastArg === 'string' && isStringComponentStack(lastArg);
 
           // If we are ever called with a string that already has a component stack,
           // e.g. a React error/warning, don't append a second stack.

packages/react-devtools-shell/src/app/InlineWarnings/index.js

@@ -149,6 +149,12 @@ function ComponentWithMissingKey({children}) {
   return [<div />];
 }
 
+function ComponentWithSymbolWarning() {
+  console.warn('this is a symbol', Symbol('foo'));
+  console.error('this is a symbol', Symbol.for('bar'));
+  return null;
+}
+
 export default function ErrorsAndWarnings() {
   const [count, setCount] = useState(0);
   const handleClick = () => setCount(count + 1);
@@ -176,6 +182,7 @@ export default function ErrorsAndWarnings() {
       <ReallyLongErrorMessageThatWillCauseTextToBeTruncated />
       <DuplicateWarningsAndErrors />
       <MultipleWarningsAndErrors />
+      <ComponentWithSymbolWarning />
     </Fragment>
   );
 }