diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js index f5e2ff65eaea8..e7588dc12986f 100644 --- a/packages/react-devtools-shared/src/__tests__/console-test.js +++ b/packages/react-devtools-shared/src/__tests__/console-test.js @@ -47,6 +47,7 @@ describe('console', () => { patchConsole({ appendComponentStack: true, breakOnWarn: false, + showInlineWarningsAndErrors: false, }); const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject; @@ -79,12 +80,61 @@ describe('console', () => { expect(fakeConsole.warn).not.toBe(mockWarn); }); + it('should patch the console when appendComponentStack is enabled', () => { + unpatchConsole(); + + expect(fakeConsole.error).toBe(mockError); + expect(fakeConsole.warn).toBe(mockWarn); + + patchConsole({ + appendComponentStack: true, + breakOnWarn: false, + showInlineWarningsAndErrors: false, + }); + + expect(fakeConsole.error).not.toBe(mockError); + expect(fakeConsole.warn).not.toBe(mockWarn); + }); + + it('should patch the console when breakOnWarn is enabled', () => { + unpatchConsole(); + + expect(fakeConsole.error).toBe(mockError); + expect(fakeConsole.warn).toBe(mockWarn); + + patchConsole({ + appendComponentStack: false, + breakOnWarn: true, + showInlineWarningsAndErrors: false, + }); + + expect(fakeConsole.error).not.toBe(mockError); + expect(fakeConsole.warn).not.toBe(mockWarn); + }); + + it('should patch the console when showInlineWarningsAndErrors is enabled', () => { + unpatchConsole(); + + expect(fakeConsole.error).toBe(mockError); + expect(fakeConsole.warn).toBe(mockWarn); + + patchConsole({ + appendComponentStack: false, + breakOnWarn: false, + showInlineWarningsAndErrors: true, + }); + + expect(fakeConsole.error).not.toBe(mockError); + expect(fakeConsole.warn).not.toBe(mockWarn); + }); + it('should only patch the console once', () => { const {error, warn} = fakeConsole; patchConsole({ appendComponentStack: true, breakOnWarn: false, + showInlineWarningsAndErrors: false, }); expect(fakeConsole.error).toBe(error); @@ -339,6 +389,7 @@ describe('console', () => { patchConsole({ appendComponentStack: true, breakOnWarn: false, + showInlineWarningsAndErrors: false, }); act(() => ReactDOM.render(, document.createElement('div'))); diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index e570febf5d67e..68c1fa70ba401 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -622,7 +622,11 @@ export default class Agent extends EventEmitter<{| // or in the case of React Native- if the backend is just finding out the preference- // then install or uninstall the console overrides. // It's safe to call these methods multiple times, so we don't need to worry about that. - if (appendComponentStack || breakOnConsoleErrors) { + if ( + appendComponentStack || + breakOnConsoleErrors || + showInlineWarningsAndErrors + ) { patchConsole({ appendComponentStack, breakOnConsoleErrors, diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index cc82fda74cdb1..f322c10aa8f70 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -644,7 +644,11 @@ export function attach( window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true; const showInlineWarningsAndErrors = window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false; - if (appendComponentStack || breakOnConsoleErrors) { + if ( + appendComponentStack || + breakOnConsoleErrors || + showInlineWarningsAndErrors + ) { patchConsole({ appendComponentStack, breakOnConsoleErrors, diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index 3bb2eb23115ab..e29ad7abe956d 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -192,7 +192,11 @@ export function installHook(target: any): DevToolsHook | null { // but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__) // and the object itself will be undefined as well for the reasons mentioned above, // so we use try/catch instead. - if (appendComponentStack || breakOnConsoleErrors) { + if ( + appendComponentStack || + breakOnConsoleErrors || + showInlineWarningsAndErrors + ) { registerRendererWithConsole(renderer); patchConsole({ appendComponentStack,