Add consoleManagedByDevToolsDuringStrictMode feature flag in DevTools #22215

Author: lunaruan

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

@@ -14,6 +14,7 @@ import {format} from './utils';
 
 import {getInternalReactConstants} from './renderer';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
+import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';
 
 const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
 const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
@@ -240,7 +241,7 @@ export function patch({
           debugger;
         }
 
-        if (isInStrictMode) {
+        if (consoleManagedByDevToolsDuringStrictMode && isInStrictMode) {
           if (!consoleSettingsRef.hideConsoleLogsInStrictMode) {
             // Dim the text color of the double logs if we're not
             // hiding them.

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js

@@ -16,6 +16,8 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 
+export const consoleManagedByDevToolsDuringStrictMode = false;
+
 /************************************************************************
  * Do not edit the code below.
  * It ensures this fork exports the same types as the default flags file.

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js

@@ -16,6 +16,8 @@
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = false;
+
 /************************************************************************
  * Do not edit the code below.
  * It ensures this fork exports the same types as the default flags file.

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js

@@ -15,3 +15,5 @@
 
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
+
+export const consoleManagedByDevToolsDuringStrictMode = true;

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js

@@ -16,6 +16,8 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 /************************************************************************
  * Do not edit the code below.
  * It ensures this fork exports the same types as the default flags file.

packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js

@@ -16,6 +16,8 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 /************************************************************************
  * Do not edit the code below.
  * It ensures this fork exports the same types as the default flags file.

packages/react-devtools-shared/src/hook.js

@@ -16,6 +16,7 @@ import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
+import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';
 
 import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 
@@ -162,56 +163,60 @@ export function installHook(target: any): DevToolsHook | null {
     maybeMessage: any,
     ...inputArgs: $ReadOnlyArray<any>
   ): string {
-    const args = inputArgs.slice();
-
-    // Symbols cannot be concatenated with Strings.
-    let formatted: string =
-      typeof maybeMessage === 'symbol'
-        ? maybeMessage.toString()
-        : '' + maybeMessage;
+    if (consoleManagedByDevToolsDuringStrictMode) {
+      const args = inputArgs.slice();
+
+      // Symbols cannot be concatenated with Strings.
+      let formatted: string =
+        typeof maybeMessage === 'symbol'
+          ? maybeMessage.toString()
+          : '' + maybeMessage;
+
+      // If the first argument is a string, check for substitutions.
+      if (typeof maybeMessage === 'string') {
+        if (args.length) {
+          const REGEXP = /(%?)(%([jds]))/g;
+
+          formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
+            let arg = args.shift();
+            switch (flag) {
+              case 's':
+                arg += '';
+                break;
+              case 'd':
+              case 'i':
+                arg = parseInt(arg, 10).toString();
+                break;
+              case 'f':
+                arg = parseFloat(arg).toString();
+                break;
+            }
+            if (!escaped) {
+              return arg;
+            }
+            args.unshift(arg);
+            return match;
+          });
+        }
+      }
 
-    // If the first argument is a string, check for substitutions.
-    if (typeof maybeMessage === 'string') {
+      // Arguments that remain after formatting.
       if (args.length) {
-        const REGEXP = /(%?)(%([jds]))/g;
-
-        formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
-          let arg = args.shift();
-          switch (flag) {
-            case 's':
-              arg += '';
-              break;
-            case 'd':
-            case 'i':
-              arg = parseInt(arg, 10).toString();
-              break;
-            case 'f':
-              arg = parseFloat(arg).toString();
-              break;
-          }
-          if (!escaped) {
-            return arg;
-          }
-          args.unshift(arg);
-          return match;
-        });
+        for (let i = 0; i < args.length; i++) {
+          const arg = args[i];
+
+          // Symbols cannot be concatenated with Strings.
+          formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+        }
       }
-    }
 
-    // Arguments that remain after formatting.
-    if (args.length) {
-      for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
+      // Update escaped %% values.
+      formatted = formatted.replace(/%{2,2}/g, '%');
 
-        // Symbols cannot be concatenated with Strings.
-        formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
-      }
+      return '' + formatted;
     }
 
-    // Update escaped %% values.
-    formatted = formatted.replace(/%{2,2}/g, '%');
-
-    return '' + formatted;
+    return '';
   }
 
   // NOTE: KEEP IN SYNC with src/backend/console.js:patch
@@ -222,90 +227,92 @@ export function installHook(target: any): DevToolsHook | null {
       browserTheme,
     }: {hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme},
   ): void {
-    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
-
-    if (__EXTENSION__) {
-      const targetConsole = console;
-
-      const originalConsoleMethods = {};
-
-      overrideConsoleMethods.forEach(method => {
-        try {
-          const originalMethod = (originalConsoleMethods[
-            method
-          ] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
-            ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
-            : targetConsole[method]);
-
-          const overrideMethod = (...args) => {
-            let isInStrictMode = false;
-
-            // Search for the first renderer that has a current Fiber.
-            // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
-            const {getCurrentFiber, getIsStrictMode} = renderer;
-            if (typeof getCurrentFiber !== 'function') {
-              return;
-            }
-
-            const current: ?Fiber = getCurrentFiber();
-            if (current != null) {
-              try {
-                if (
-                  typeof getIsStrictMode === 'function' &&
-                  getIsStrictMode()
-                ) {
-                  isInStrictMode = true;
-                }
-              } catch (error) {
-                // Don't let a DevTools or React internal error interfere with logging.
+    if (consoleManagedByDevToolsDuringStrictMode) {
+      const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+
+      if (__EXTENSION__) {
+        const targetConsole = console;
+
+        const originalConsoleMethods = {};
+
+        overrideConsoleMethods.forEach(method => {
+          try {
+            const originalMethod = (originalConsoleMethods[
+              method
+            ] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+              ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+              : targetConsole[method]);
+
+            const overrideMethod = (...args) => {
+              let isInStrictMode = false;
+
+              // Search for the first renderer that has a current Fiber.
+              // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+              const {getCurrentFiber, getIsStrictMode} = renderer;
+              if (typeof getCurrentFiber !== 'function') {
+                return;
               }
-            }
 
-            if (isInStrictMode) {
-              if (!hideConsoleLogsInStrictMode) {
-                // Dim the text color of the double logs if we're not
-                // hiding them.
-                let color;
-                switch (method) {
-                  case 'warn':
-                    color =
-                      browserTheme === 'light'
-                        ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
-                        : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
-                    break;
-                  case 'error':
-                    color =
-                      browserTheme === 'light'
-                        ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
-                        : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
-                    break;
-                  case 'log':
-                  default:
-                    color =
-                      browserTheme === 'light'
-                        ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
-                        : process.env.DARK_MODE_DIMMED_LOG_COLOR;
-                    break;
+              const current: ?Fiber = getCurrentFiber();
+              if (current != null) {
+                try {
+                  if (
+                    typeof getIsStrictMode === 'function' &&
+                    getIsStrictMode()
+                  ) {
+                    isInStrictMode = true;
+                  }
+                } catch (error) {
+                  // Don't let a DevTools or React internal error interfere with logging.
                 }
+              }
 
-                if (color) {
-                  originalMethod(`%c${format(...args)}`, `color: ${color}`);
-                } else {
-                  throw Error('Console color is not defined');
+              if (isInStrictMode) {
+                if (!hideConsoleLogsInStrictMode) {
+                  // Dim the text color of the double logs if we're not
+                  // hiding them.
+                  let color;
+                  switch (method) {
+                    case 'warn':
+                      color =
+                        browserTheme === 'light'
+                          ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                          : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
+                      break;
+                    case 'error':
+                      color =
+                        browserTheme === 'light'
+                          ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                          : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
+                      break;
+                    case 'log':
+                    default:
+                      color =
+                        browserTheme === 'light'
+                          ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                          : process.env.DARK_MODE_DIMMED_LOG_COLOR;
+                      break;
+                  }
+
+                  if (color) {
+                    originalMethod(`%c${format(...args)}`, `color: ${color}`);
+                  } else {
+                    throw Error('Console color is not defined');
+                  }
                 }
+              } else {
+                originalMethod(...args);
               }
-            } else {
-              originalMethod(...args);
-            }
-          };
+            };
 
-          overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
-          originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
+            overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+            originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
 
-          // $FlowFixMe property error|warn is not writable.
-          targetConsole[method] = overrideMethod;
-        } catch (error) {}
-      });
+            // $FlowFixMe property error|warn is not writable.
+            targetConsole[method] = overrideMethod;
+          } catch (error) {}
+        });
+      }
     }
   }
 
@@ -365,10 +372,12 @@ export function installHook(target: any): DevToolsHook | null {
             browserTheme,
           });
         } else {
-          patchConsoleForInitialRenderInExtension(renderer, {
-            hideConsoleLogsInStrictMode,
-            browserTheme,
-          });
+          if (consoleManagedByDevToolsDuringStrictMode) {
+            patchConsoleForInitialRenderInExtension(renderer, {
+              hideConsoleLogsInStrictMode,
+              browserTheme,
+            });
+          }
         }
       } catch (error) {}
     }