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() {
+
);
}