DevTools: Add break-on-warn feature

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-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-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__ !== false;
+    if (appendComponentStack || breakOnConsoleErrors) {
+      patchConsole({
+        appendComponentStack,
+        breakOnConsoleErrors,
+      });
     }
   }
 

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

@@ -85,6 +85,11 @@ type NativeStyleEditor_SetValueParams = {|
   value: string,
 |};
 
+type UpdateConsolePatchSettingsParams = {|
+  appendComponentStack: boolean,
+  breakOnConsoleErrors: boolean,
+|};
+
 type BackendEvents = {|
   extensionBackendInitialized: [],
   inspectedElement: [InspectedElementPayload],
@@ -133,8 +138,8 @@ type FrontendEvents = {|
   stopInspectingNative: [boolean],
   stopProfiling: [],
   storeAsGlobal: [StoreAsGlobalParams],
-  updateAppendComponentStack: [boolean],
   updateComponentFilters: [Array<ComponentFilter>],
+  updateConsolePatchSettings: [UpdateConsolePatchSettingsParams],
   viewAttributeSource: [ViewAttributeSourceParams],
   viewElementSource: [ElementAndRendererID],
 

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

@@ -27,6 +27,9 @@ export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
 export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
   'React::DevTools::reloadAndProfile';
 
+export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_WARNINGS =
+  'React::DevTools::breakOnConsoleErrors';
+
 export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
   'React::DevTools::appendComponentStack';
 

packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {useContext} from 'react';
+import {SettingsContext} from './SettingsContext';
+
+import styles from './SettingsShared.css';
+
+export default function DebuggingSettings(_: {||}) {
+  const {
+    appendComponentStack,
+    breakOnConsoleErrors,
+    setAppendComponentStack,
+    setBreakOnConsoleErrors,
+  } = useContext(SettingsContext);
+
+  return (
+    <div className={styles.Settings}>
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={appendComponentStack}
+            onChange={({currentTarget}) =>
+              setAppendComponentStack(currentTarget.checked)
+            }
+          />{' '}
+          Append component stacks to console warnings and errors.
+        </label>
+      </div>
+
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={breakOnConsoleErrors}
+            onChange={({currentTarget}) =>
+              setBreakOnConsoleErrors(currentTarget.checked)
+            }
+          />{' '}
+          Break on warnings
+        </label>
+      </div>
+    </div>
+  );
+}