DevTools: Add break-on-warn feature (#19048)

This commit adds a new tab to the Settings modal: Debugging

This new tab has the append component stacks feature and a new one: break on warn

This new feature adds a debugger statement into the console override

Author: Brian Vaughn

packages/react-devtools-core/src/standalone.js

@@ -17,8 +17,9 @@ import {
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {
-  getSavedComponentFilters,
   getAppendComponentStack,
+  getBreakOnConsoleErrors,
+  getSavedComponentFilters,
 } from 'react-devtools-shared/src/utils';
 import {Server} from 'ws';
 import {join} from 'path';
@@ -282,11 +283,14 @@ function startServer(port?: number = 8097) {
     // Because of this it relies on the extension to pass filters, so include them wth the response here.
     // This will ensure that saved filters are shared across different web pages.
     const savedPreferencesString = `
-      window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-        getSavedComponentFilters(),
-      )};
       window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
         getAppendComponentStack(),
+      )};
+      window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
+        getBreakOnConsoleErrors(),
+      )};
+      window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+        getSavedComponentFilters(),
       )};`;
 
     response.end(

packages/react-devtools-extensions/src/main.js

@@ -7,8 +7,9 @@ import Store from 'react-devtools-shared/src/devtools/store';
 import {getBrowserName, getBrowserTheme} from './utils';
 import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
 import {
-  getSavedComponentFilters,
   getAppendComponentStack,
+  getBreakOnConsoleErrors,
+  getSavedComponentFilters,
 } from 'react-devtools-shared/src/utils';
 import {
   localStorageGetItem,
@@ -28,17 +29,18 @@ let panelCreated = false;
 // because they are stored in localStorage within the context of the extension.
 // Instead it relies on the extension to pass filters through.
 function syncSavedPreferences() {
-  const componentFilters = getSavedComponentFilters();
-  chrome.devtools.inspectedWindow.eval(
-    `window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-      componentFilters,
-    )};`,
-  );
-
   const appendComponentStack = getAppendComponentStack();
+  const breakOnConsoleErrors = getBreakOnConsoleErrors();
+  const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
       appendComponentStack,
+    )};
+    window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
+      breakOnConsoleErrors,
+    )};
+    window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
+      componentFilters,
     )};`,
   );
 }

packages/react-devtools-extensions/webpack.backend.js

@@ -2,6 +2,7 @@
 
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 const {GITHUB_URL, getVersionString} = require('./utils');
 
 const NODE_ENV = process.env.NODE_ENV;
@@ -39,6 +40,16 @@ module.exports = {
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {drop_debugger: false},
+          output: {comments: true},
+        },
+      }),
+    ],
+  },
   plugins: [
     new DefinePlugin({
       __DEV__: true,

packages/react-devtools-inline/src/backend.js

@@ -20,9 +20,14 @@ function startActivation(contentWindow: window) {
         // so it's safe to cleanup after we've received it.
         contentWindow.removeEventListener('message', onMessage);
 
-        const {appendComponentStack, componentFilters} = data;
+        const {
+          appendComponentStack,
+          breakOnConsoleErrors,
+          componentFilters,
+        } = data;
 
         contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
+        contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
         contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
 
         // TRICKY
@@ -33,6 +38,7 @@ function startActivation(contentWindow: window) {
         // but it doesn't really hurt anything to store them there too.
         if (contentWindow !== window) {
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
+          window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
           window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
         }
 

packages/react-devtools-inline/src/frontend.js

@@ -6,8 +6,9 @@ import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {
-  getSavedComponentFilters,
   getAppendComponentStack,
+  getBreakOnConsoleErrors,
+  getSavedComponentFilters,
 } from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -38,6 +39,7 @@ export function initialize(
           {
             type: MESSAGE_TYPE_SAVED_PREFERENCES,
             appendComponentStack: getAppendComponentStack(),
+            breakOnConsoleErrors: getBreakOnConsoleErrors(),
             componentFilters: getSavedComponentFilters(),
           },
           '*',

packages/react-devtools-inline/webpack.config.js

@@ -1,5 +1,6 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
 const {
   GITHUB_URL,
   getVersionString,
@@ -36,6 +37,16 @@ module.exports = {
     'react-is': 'react-is',
     scheduler: 'scheduler',
   },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          compress: {drop_debugger: false},
+          output: {comments: true},
+        },
+      }),
+    ],
+  },
   plugins: [
     new DefinePlugin({
       __DEV__,

packages/react-devtools-shared/src/__tests__/console-test.js

@@ -44,7 +44,10 @@ describe('console', () => {
 
     // Note the Console module only patches once,
     // so it's important to patch the test console before injection.
-    patchConsole();
+    patchConsole({
+      appendComponentStack: true,
+      breakOnWarn: false,
+    });
 
     const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
@@ -79,7 +82,10 @@ describe('console', () => {
   it('should only patch the console once', () => {
     const {error, warn} = fakeConsole;
 
-    patchConsole();
+    patchConsole({
+      appendComponentStack: true,
+      breakOnWarn: false,
+    });
 
     expect(fakeConsole.error).toBe(error);
     expect(fakeConsole.warn).toBe(warn);
@@ -330,7 +336,10 @@ describe('console', () => {
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
 
-    patchConsole();
+    patchConsole({
+      appendComponentStack: true,
+      breakOnWarn: false,
+    });
     act(() => ReactDOM.render(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(2);

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

@@ -161,8 +161,8 @@ export default class Agent extends EventEmitter<{|
     );
     bridge.addListener('shutdown', this.shutdown);
     bridge.addListener(
-      'updateAppendComponentStack',
-      this.updateAppendComponentStack,
+      'updateConsolePatchSettings',
+      this.updateConsolePatchSettings,
     );
     bridge.addListener('updateComponentFilters', this.updateComponentFilters);
     bridge.addListener('viewAttributeSource', this.viewAttributeSource);
@@ -443,13 +443,19 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  updateAppendComponentStack = (appendComponentStack: boolean) => {
+  updateConsolePatchSettings = ({
+    appendComponentStack,
+    breakOnConsoleErrors,
+  }: {|
+    appendComponentStack: boolean,
+    breakOnConsoleErrors: boolean,
+  |}) => {
     // If the frontend preference has change,
     // 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) {
-      patchConsole();
+    if (appendComponentStack || breakOnConsoleErrors) {
+      patchConsole({appendComponentStack, breakOnConsoleErrors});
     } else {
       unpatchConsole();
     }

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

@@ -80,9 +80,25 @@ export function registerRenderer(renderer: ReactRenderer): void {
   }
 }
 
+const consoleSettingsRef = {
+  appendComponentStack: false,
+  breakOnConsoleErrors: false,
+};
+
 // Patches whitelisted console methods to append component stack for the current fiber.
 // Call unpatch() to remove the injected behavior.
-export function patch(): void {
+export function patch({
+  appendComponentStack,
+  breakOnConsoleErrors,
+}: {
+  appendComponentStack: boolean,
+  breakOnConsoleErrors: boolean,
+}): void {
+  // Settings may change after we've patched the console.
+  // Using a shared ref allows the patch function to read the latest values.
+  consoleSettingsRef.appendComponentStack = appendComponentStack;
+  consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors;
+
   if (unpatchFn !== null) {
     // Don't patch twice.
     return;
@@ -105,40 +121,56 @@ export function patch(): void {
         targetConsole[method]);
 
       const overrideMethod = (...args) => {
-        try {
-          // 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.
-          const lastArg = args.length > 0 ? args[args.length - 1] : null;
-          const alreadyHasComponentStack =
-            lastArg !== null &&
-            (PREFIX_REGEX.test(lastArg) ||
-              ROW_COLUMN_NUMBER_REGEX.test(lastArg));
-
-          if (!alreadyHasComponentStack) {
-            // If there's a component stack for at least one of the injected renderers, append it.
-            // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
-            // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-            for (const {
-              currentDispatcherRef,
-              getCurrentFiber,
-              workTagMap,
-            } of injectedRenderers.values()) {
-              const current: ?Fiber = getCurrentFiber();
-              if (current != null) {
-                const componentStack = getStackByFiberInDevAndProd(
-                  workTagMap,
-                  current,
-                  currentDispatcherRef,
-                );
-                if (componentStack !== '') {
-                  args.push(componentStack);
+        const latestAppendComponentStack =
+          consoleSettingsRef.appendComponentStack;
+        const latestBreakOnConsoleErrors =
+          consoleSettingsRef.breakOnConsoleErrors;
+
+        if (latestAppendComponentStack) {
+          try {
+            // 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.
+            const lastArg = args.length > 0 ? args[args.length - 1] : null;
+            const alreadyHasComponentStack =
+              lastArg !== null &&
+              (PREFIX_REGEX.test(lastArg) ||
+                ROW_COLUMN_NUMBER_REGEX.test(lastArg));
+
+            if (!alreadyHasComponentStack) {
+              // If there's a component stack for at least one of the injected renderers, append it.
+              // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+              // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+              for (const {
+                currentDispatcherRef,
+                getCurrentFiber,
+                workTagMap,
+              } of injectedRenderers.values()) {
+                const current: ?Fiber = getCurrentFiber();
+                if (current != null) {
+                  const componentStack = getStackByFiberInDevAndProd(
+                    workTagMap,
+                    current,
+                    currentDispatcherRef,
+                  );
+                  if (componentStack !== '') {
+                    args.push(componentStack);
+                  }
+                  break;
                 }
-                break;
               }
             }
+          } catch (error) {
+            // Don't let a DevTools or React internal error interfere with logging.
           }
-        } catch (error) {
-          // Don't let a DevTools or React internal error interfere with logging.
+        }
+
+        if (latestBreakOnConsoleErrors) {
+          // --- Welcome to debugging with React DevTools ---
+          // This debugger statement means that you've enabled the "break on warnings" feature.
+          // Use the browser's Call Stack panel to step out of this override function-
+          // to where the original warning or error was logged.
+          // eslint-disable-next-line no-debugger
+          debugger;
         }
 
         originalMethod(...args);

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

@@ -430,11 +430,18 @@ export function attach(
   if (process.env.NODE_ENV !== 'test') {
     registerRendererWithConsole(renderer);
 
-    // The renderer interface can't read this preference directly,
+    // The renderer interface can't read these preferences directly,
     // because it is stored in localStorage within the context of the extension.
     // It relies on the extension to pass the preference through via the global.
-    if (window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false) {
-      patchConsole();
+    const appendComponentStack =
+      window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
+    const breakOnConsoleErrors =
+      window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
+    if (appendComponentStack || breakOnConsoleErrors) {
+      patchConsole({
+        appendComponentStack,
+        breakOnConsoleErrors,
+      });
     }
   }