diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js index e7588dc12986f..64597597baefb 100644 --- a/packages/react-devtools-shared/src/__tests__/console-test.js +++ b/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(, document.createElement('div'))); + + expect(mockWarn).toHaveBeenCalledTimes(1); + expect(mockWarn.mock.calls[0][0]).toBe('Symbol:'); + }); }); diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index ee06d2173eabf..a4185193c4347 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/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. diff --git a/packages/react-devtools-shell/src/app/InlineWarnings/index.js b/packages/react-devtools-shell/src/app/InlineWarnings/index.js index 9aa681b29381d..964323a28a045 100644 --- a/packages/react-devtools-shell/src/app/InlineWarnings/index.js +++ b/packages/react-devtools-shell/src/app/InlineWarnings/index.js @@ -149,6 +149,12 @@ function ComponentWithMissingKey({children}) { return [
]; } +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() { + ); }