Expose DEV-mode warnings in devtools UI

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

@@ -37,7 +37,7 @@ import type {
   RendererID,
   RendererInterface,
 } from './types';
-import type {ComponentFilter} from '../types';
+import type {ComponentFilter, ErrorOrWarning} from '../types';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -613,6 +613,10 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
+  onErrorsAndWarnings = (errorsAndWarnings: Array<ErrorOrWarning>) => {
+    this._bridge.send('errorsAndWarnings', errorsAndWarnings);
+  };
+
   onTraceUpdates = (nodes: Set<NativeType>) => {
     this.emit('traceUpdates', nodes);
   };

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

@@ -22,11 +22,18 @@ const PREFIX_REGEX = /\s{4}(in|at)\s{1}/;
 // but we can fallback to looking for location info (e.g. "foo.js:12:345")
 const ROW_COLUMN_NUMBER_REGEX = /:\d+:\d+(\n|$)/;
 
+type OnErrorOrWarning = (
+  fiber: Fiber,
+  type: 'error' | 'warn',
+  args: Array<any>,
+) => void;
+
 const injectedRenderers: Map<
   ReactRenderer,
   {|
     currentDispatcherRef: CurrentDispatcherRef,
     getCurrentFiber: () => Fiber | null,
+    onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
   |},
 > = new Map();
@@ -54,7 +61,10 @@ export function dangerous_setTargetConsoleForTesting(
 // v16 renderers should use this method to inject internals necessary to generate a component stack.
 // These internals will be used if the console is patched.
 // Injecting them separately allows the console to easily be patched or un-patched later (at runtime).
-export function registerRenderer(renderer: ReactRenderer): void {
+export function registerRenderer(
+  renderer: ReactRenderer,
+  onErrorOrWarning?: OnErrorOrWarning,
+): void {
   const {
     currentDispatcherRef,
     getCurrentFiber,
@@ -76,6 +86,7 @@ export function registerRenderer(renderer: ReactRenderer): void {
       currentDispatcherRef,
       getCurrentFiber,
       workTagMap: ReactTypeOfWork,
+      onErrorOrWarning,
     });
   }
 }
@@ -143,10 +154,23 @@ export function patch({
               for (const {
                 currentDispatcherRef,
                 getCurrentFiber,
+                onErrorOrWarning,
                 workTagMap,
               } of injectedRenderers.values()) {
                 const current: ?Fiber = getCurrentFiber();
                 if (current != null) {
+                  if (method === 'error' || method === 'warn') {
+                    if (typeof onErrorOrWarning === 'function') {
+                      // TODO (inline errors) The renderer is injected in two places:
+                      // 1. First by "react-devtools-shared/src/hook" which isn't stateful and doesn't supply onErrorOrWarning()
+                      // 2. Second by "react-devtools-shared/src/backend/renderer" which is and does
+                      //
+                      // We should probably move the queueing+batching mechanism from backend/renderer to this file,
+                      // so that it handles warnings logged during initial mount (potentially before step 2 above).
+                      onErrorOrWarning(current, method, args);
+                    }
+                  }
+
                   const componentStack = getStackByFiberInDevAndProd(
                     workTagMap,
                     current,
@@ -177,6 +201,7 @@ export function patch({
       };
 
       overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+      originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
 
       // $FlowFixMe property error|warn is not writable.
       targetConsole[method] = overrideMethod;

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

@@ -48,6 +48,7 @@ export function initBackend(
       agent.onUnsupportedRenderer(id);
     }),
 
+    hook.sub('errorsAndWarnings', agent.onErrorsAndWarnings),
     hook.sub('operations', agent.onHookOperations),
     hook.sub('traceUpdates', agent.onTraceUpdates),
 

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

@@ -522,13 +522,82 @@ export function attach(
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
 
+  type PendingErrorOrWarning = {|
+    args: Array<any>,
+    fiber: Fiber,
+    type: 'error' | 'warn',
+  |};
+
+  let flushErrorOrWarningUpdatesTimoutID: TimeoutID | null = null;
+  const pendingErrorOrWarnings: Array<PendingErrorOrWarning> = [];
+
+  function onErrorOrWarning(
+    fiber: Fiber,
+    type: 'error' | 'warn',
+    args: Array<any>,
+  ): void {
+    // There are a few places that errors might be logged:
+    // 1. During render (either for initial mount or an update)
+    // 2. During commit effects (both active and passive)
+    // 3. During unmounts (or commit effect cleanup functions)
+    //
+    // Initial render presents a special challenge-
+    // since neither backend nor frontend Store know about a Fiber until it has mounted (and committed).
+    // In this case, we need to hold onto errors until the subsequent commit hook is called.
+    //
+    // Passive effects also present a special challenge-
+    // since the commit hook is called before passive effects, are run,
+    // meaning that we might not want to wait until the subsequent commit hook to notify the frontend.
+    //
+    // For this reason, warnings/errors are sent to the frontend periodically (on a timer).
+    // When processing errors, any Fiber that is not still registered is assumed to be unmounted.
+    pendingErrorOrWarnings.push({
+      fiber,
+      type,
+      // React pushes the component stack to the args later
+      // These are not interesting to the view in React devtools where we already have access to the component stack.
+      // TODO (inline errors) Should this actually be fixed when appending the component stack by not mutating the args?
+      args: args.slice(),
+    });
+
+    if (flushErrorOrWarningUpdatesTimoutID === null) {
+      flushErrorOrWarningUpdatesTimoutID = setTimeout(
+        flushErrorOrWarningUpdates,
+        1000,
+      );
+    }
+  }
+
+  function flushErrorOrWarningUpdates() {
+    flushErrorOrWarningUpdatesTimoutID = null;
+
+    const data = pendingErrorOrWarnings
+      .filter(({fiber}) => isFiberMounted(fiber))
+      .map(({args, fiber, type}) => {
+        return {
+          id: getFiberID(getPrimaryFiber(fiber)),
+          type,
+          args: args.map(arg => {
+            try {
+              return JSON.stringify(arg);
+            } catch (error) {
+              return null;
+            }
+          }),
+        };
+      });
+    hook.emit('errorsAndWarnings', data);
+
+    pendingErrorOrWarnings.splice(0);
+  }
+
   // Patching the console enables DevTools to do a few useful things:
   // * Append component stacks to warnings and error messages
   // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
   //
   // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
   if (process.env.NODE_ENV !== 'test') {
-    registerRendererWithConsole(renderer);
+    registerRendererWithConsole(renderer, onErrorOrWarning);
 
     // The renderer interface can't read these preferences directly,
     // because it is stored in localStorage within the context of the extension.
@@ -806,6 +875,17 @@ export function attach(
     return fiber;
   }
 
+  function isFiberMounted(fiber: Fiber): boolean {
+    if (primaryFibers.has(fiber)) {
+      return true;
+    }
+    const {alternate} = fiber;
+    if (alternate != null && primaryFibers.has(alternate)) {
+      return true;
+    }
+    return false;
+  }
+
   const fiberToIDMap: Map<Fiber, number> = new Map();
   const idToFiberMap: Map<number, Fiber> = new Map();
   const primaryFibers: Set<Fiber> = new Set();

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

@@ -9,7 +9,7 @@
 
 import EventEmitter from './events';
 
-import type {ComponentFilter, Wall} from './types';
+import type {ComponentFilter, ErrorOrWarning, Wall} from './types';
 import type {
   InspectedElementPayload,
   OwnersList,
@@ -117,6 +117,7 @@ type UpdateConsolePatchSettingsParams = {|
 |};
 
 type BackendEvents = {|
+  errorsAndWarnings: [Array<ErrorOrWarning>],
   extensionBackendInitialized: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],

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

@@ -29,7 +29,7 @@ import {printStore} from './utils';
 import ProfilerStore from './ProfilerStore';
 
 import type {Element} from './views/Components/types';
-import type {ComponentFilter, ElementType} from '../types';
+import type {ComponentFilter, ElementType, ErrorOrWarning} from '../types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 const debug = (methodName, ...args) => {
@@ -68,6 +68,10 @@ export type Capabilities = {|
 export default class Store extends EventEmitter<{|
   collapseNodesByDefault: [],
   componentFilters: [],
+  // TODO (inline errors) Do we even need the argument for subscriptions?
+  errorsAndWarnings: [
+    Map<number, {errors: ErrorOrWarning[], warnings: ErrorOrWarning[]}>,
+  ],
   mutated: [[Array<number>, Map<number, number>]],
   recordChangeDescriptions: [],
   roots: [],
@@ -83,6 +87,11 @@ export default class Store extends EventEmitter<{|
 
   _componentFilters: Array<ComponentFilter>;
 
+  _errorsAndWarnings: Map<
+    number,
+    {errors: ErrorOrWarning[], warnings: ErrorOrWarning[]},
+  > = new Map();
+
   // At least one of the injected renderers contains (DEV only) owner metadata.
   _hasOwnerMetadata: boolean = false;
 
@@ -174,6 +183,7 @@ export default class Store extends EventEmitter<{|
     }
 
     this._bridge = bridge;
+    bridge.addListener('errorsAndWarnings', this.onBridgeErrorsAndWarnings);
     bridge.addListener('operations', this.onBridgeOperations);
     bridge.addListener(
       'overrideComponentFilters',
@@ -289,6 +299,13 @@ export default class Store extends EventEmitter<{|
     this.emit('componentFilters');
   }
 
+  get errorsAndWarnings(): Map<
+    number,
+    {errors: ErrorOrWarning[], warnings: ErrorOrWarning[]},
+  > {
+    return this._errorsAndWarnings;
+  }
+
   get hasOwnerMetadata(): boolean {
     return this._hasOwnerMetadata;
   }
@@ -357,6 +374,41 @@ export default class Store extends EventEmitter<{|
     return this._unsupportedRendererVersionDetected;
   }
 
+  clearErrorsAndWarnings(): void {
+    this._errorsAndWarnings = new Map();
+    this.emit('errorsAndWarnings', this._errorsAndWarnings);
+  }
+
+  clearErrorsAndWarningsForElement(element: {id: number}): void {
+    this._errorsAndWarnings.delete(element.id);
+    this.emit('errorsAndWarnings', this._errorsAndWarnings);
+  }
+
+  clearErrorOrWarning(element: Element, errorOrWarning: ErrorOrWarning): void {
+    const errorsAndWarnings = this._errorsAndWarnings.get(element.id);
+    if (errorsAndWarnings === undefined) {
+      return;
+    }
+
+    const newErrorsAndWarnings = {...errorsAndWarnings};
+    if (errorOrWarning.type === 'warn') {
+      newErrorsAndWarnings.warnings = newErrorsAndWarnings.warnings.filter(
+        warning => {
+          return warning !== errorOrWarning;
+        },
+      );
+    } else if (errorOrWarning.type === 'error') {
+      newErrorsAndWarnings.errors = newErrorsAndWarnings.errors.filter(
+        error => {
+          return error !== errorOrWarning;
+        },
+      );
+    }
+
+    this._errorsAndWarnings.set(element.id, newErrorsAndWarnings);
+    this.emit('errorsAndWarnings', this._errorsAndWarnings);
+  }
+
   containsElement(id: number): boolean {
     return this._idToElement.get(id) != null;
   }
@@ -702,6 +754,29 @@ export default class Store extends EventEmitter<{|
     this.emit('supportsNativeStyleEditor');
   };
 
+  onBridgeErrorsAndWarnings = (errorsAndWarnings: Array<ErrorOrWarning>) => {
+    if (__DEBUG__) {
+      console.log('onBridgeErrorsAndWarnings', errorsAndWarnings);
+    }
+    errorsAndWarnings.forEach(errorOrWarning => {
+      const errorsAndWarningsForElement = this._errorsAndWarnings.get(
+        errorOrWarning.id,
+      ) || {errors: [], warnings: []};
+
+      if (errorOrWarning.type === 'error') {
+        errorsAndWarningsForElement.errors.push(errorOrWarning);
+      } else if (errorOrWarning.type === 'warn') {
+        errorsAndWarningsForElement.warnings.push(errorOrWarning);
+      }
+
+      this._errorsAndWarnings.set(errorOrWarning.id, {
+        ...errorsAndWarningsForElement,
+      });
+    });
+
+    this.emit('errorsAndWarnings', this._errorsAndWarnings);
+  };
+
   onBridgeOperations = (operations: Array<number>) => {
     if (__DEBUG__) {
       console.groupCollapsed('onBridgeOperations');

packages/react-devtools-shared/src/devtools/views/Components/Element.css

@@ -4,6 +4,11 @@
 .HoveredElement {
   color: var(--color-component-name);
 }
+.Element[data-errors="true"] {
+  background-color: var(--color-error-background-message);
+}
+.Element[data-warnings="true"] {
+  background-color: var(--color-warning-background);}
 .HoveredElement {
   background-color: var(--color-background-hover);
 }
@@ -73,3 +78,20 @@
 .Badge {
   margin-left: 0.25rem;
 }
+
+.Errors, .Warnings {
+  display: flex;
+}
+
+.Errors svg, .Warnings svg {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.Errors {
+  color: var(--color-error-text);
+}
+
+.Warnings {
+  color: var(--color-warning-text);
+}