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

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>
+  );
+}

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

@@ -17,9 +17,7 @@ import styles from './SettingsShared.css';
 
 export default function GeneralSettings(_: {||}) {
   const {
-    appendComponentStack,
     displayDensity,
-    setAppendComponentStack,
     setDisplayDensity,
     setTheme,
     setTraceUpdatesEnabled,
@@ -71,19 +69,6 @@ export default function GeneralSettings(_: {||}) {
         </div>
       )}
 
-      <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.ReleaseNotes}>
         <a
           className={styles.ReleaseNotesLink}

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

@@ -18,6 +18,7 @@ import {
 import {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
+  LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
 } from 'react-devtools-shared/src/constants';
@@ -40,6 +41,9 @@ type Context = {|
   appendComponentStack: boolean,
   setAppendComponentStack: (value: boolean) => void,
 
+  breakOnConsoleErrors: boolean,
+  setBreakOnConsoleErrors: (value: boolean) => void,
+
   theme: Theme,
   setTheme(value: Theme): void,
 
@@ -79,6 +83,13 @@ function SettingsContextController({
     appendComponentStack,
     setAppendComponentStack,
   ] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
+  const [
+    breakOnConsoleErrors,
+    setBreakOnConsoleErrors,
+  ] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
+    false,
+  );
   const [
     traceUpdatesEnabled,
     setTraceUpdatesEnabled,
@@ -133,8 +144,11 @@ function SettingsContextController({
   }, [browserTheme, theme, documentElements]);
 
   useEffect(() => {
-    bridge.send('updateAppendComponentStack', appendComponentStack);
-  }, [bridge, appendComponentStack]);
+    bridge.send('updateConsolePatchSettings', {
+      appendComponentStack,
+      breakOnConsoleErrors,
+    });
+  }, [bridge, appendComponentStack, breakOnConsoleErrors]);
 
   useEffect(() => {
     bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);
@@ -143,12 +157,14 @@ function SettingsContextController({
   const value = useMemo(
     () => ({
       appendComponentStack,
+      breakOnConsoleErrors,
       displayDensity,
       lineHeight:
         displayDensity === 'compact'
           ? COMPACT_LINE_HEIGHT
           : COMFORTABLE_LINE_HEIGHT,
       setAppendComponentStack,
+      setBreakOnConsoleErrors,
       setDisplayDensity,
       setTheme,
       setTraceUpdatesEnabled,
@@ -157,8 +173,10 @@ function SettingsContextController({
     }),
     [
       appendComponentStack,
+      breakOnConsoleErrors,
       displayDensity,
       setAppendComponentStack,
+      setBreakOnConsoleErrors,
       setDisplayDensity,
       setTheme,
       setTraceUpdatesEnabled,

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

@@ -20,6 +20,7 @@ import {
   useSubscription,
 } from '../hooks';
 import ComponentsSettings from './ComponentsSettings';
+import DebuggingSettings from './DebuggingSettings';
 import GeneralSettings from './GeneralSettings';
 import ProfilerSettings from './ProfilerSettings';
 
@@ -78,15 +79,18 @@ function SettingsModalImpl(_: {||}) {
 
   let view = null;
   switch (selectedTabID) {
+    case 'components':
+      view = <ComponentsSettings />;
+      break;
+    case 'debugging':
+      view = <DebuggingSettings />;
+      break;
     case 'general':
       view = <GeneralSettings />;
       break;
     case 'profiler':
       view = <ProfilerSettings />;
       break;
-    case 'components':
-      view = <ComponentsSettings />;
-      break;
     default:
       break;
   }
@@ -119,6 +123,11 @@ const tabs = [
     icon: 'settings',
     label: 'General',
   },
+  {
+    id: 'debugging',
+    icon: 'bug',
+    label: 'Debugging',
+  },
   {
     id: 'components',
     icon: 'components',