Patch console to append component stacks

Author: Brian Vaughn

src/backend/console.js

@@ -0,0 +1,35 @@
+// @flow
+
+import type { ReactRenderer } from './types';
+
+let disabled: boolean = false;
+
+export function disable(): void {
+  disabled = true;
+}
+
+export function enable(): void {
+  disabled = false;
+}
+
+export function patch({ debugCurrentFrame }: ReactRenderer): void {
+  for (let method in console) {
+    const originalMethod = console[method];
+    const appendComponentStack =
+      debugCurrentFrame != null &&
+      (method === 'error' || method === 'warn' || method === 'trace');
+    try {
+      // $FlowFixMe property error|warn is not writable.
+      console[method] = (...args) => {
+        if (disabled) return;
+        if (appendComponentStack) {
+          const componentStack = debugCurrentFrame.getStackAddendum();
+          if (componentStack) {
+            args.push(componentStack);
+          }
+        }
+        originalMethod(...args);
+      };
+    } catch (error) {}
+  }
+}

src/backend/renderer.js

@@ -39,6 +39,11 @@ import {
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import { inspectHooksOfFiber } from './ReactDebugHooks';
+import {
+  disable as disableConsole,
+  enable as enableConsole,
+  patch as patchConsole,
+} from './console';
 
 import type {
   ChangeDescription,
@@ -267,6 +272,11 @@ export function attach(
     DEPRECATED_PLACEHOLDER_SYMBOL_STRING,
   } = ReactSymbols;
 
+  // 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)
+  patchConsole(renderer);
+
   const {
     overrideHookState,
     overrideProps,
@@ -2109,6 +2119,20 @@ export function attach(
       node = node.return;
     }
 
+    let hooks = null;
+    if (usesHooks) {
+      // Suppress console logging while re-rendering
+      try {
+        disableConsole();
+        hooks = inspectHooksOfFiber(
+          fiber,
+          (renderer.currentDispatcherRef: any)
+        );
+      } finally {
+        enableConsole();
+      }
+    }
+
     return {
       id,
 
@@ -2136,9 +2160,7 @@ export function attach(
       // TODO Review sanitization approach for the below inspectable values.
       context,
       events,
-      hooks: usesHooks
-        ? inspectHooksOfFiber(fiber, (renderer.currentDispatcherRef: any))
-        : null,
+      hooks,
       props: memoizedProps,
       state: usesHooks ? null : memoizedState,
 

src/backend/types.js

@@ -91,6 +91,12 @@ export type GetFiberIDForNative = (
 ) => number | null;
 export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
 
+type ReactDebugCurrentFrame = {|
+  // Stack implementation injected by the current renderer.
+  getCurrentStack: () => string,
+  getStackAddendum: () => string,
+|};
+
 export type ReactRenderer = {
   findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
   version: string,
@@ -118,6 +124,10 @@ export type ReactRenderer = {
   // Only injected by React v16.8+ in order to support hooks inspection.
   currentDispatcherRef?: {| current: null | Dispatcher |},
 
+  // Only injected by React v16.9+ in DEV mode.
+  // Enables DevTools to append component stack to error messages.
+  debugCurrentFrame: ReactDebugCurrentFrame,
+
   // <= 15
   Mount?: any,
 };