DevTools: Patch console methods even when only show-inline-warnings/e…

…rrors enabled (facebook#20688)
koto · Jun 15, 2021 · ce7ce9c · ce7ce9c
1 parent bd2b8cb
commit ce7ce9c
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 3 deletions.
diff --git 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(<Child />, document.createElement('div')));
 

diff --git 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
@@ -645,7 +645,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
@@ -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,