Updated auto-appended component stack to be owners-only

Author: Brian Vaughn

src/backend/console.js

@@ -1,6 +1,6 @@
 // @flow
 
-import type { ReactRenderer } from './types';
+import type { Fiber, ReactRenderer } from './types';
 
 let disabled: boolean = false;
 
@@ -12,24 +12,79 @@ export function enable(): void {
   disabled = false;
 }
 
-export function patch({ debugCurrentFrame }: ReactRenderer): void {
+export function patch(
+  { getCurrentFiber }: ReactRenderer,
+  getDisplayNameForFiber: (fiber: Fiber) => string | null
+): void {
   for (let method in console) {
     const originalMethod = console[method];
     const appendComponentStack =
-      debugCurrentFrame != null &&
+      typeof getCurrentFiber === 'function' &&
       (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);
+          // $FlowFixMe We know getCurrentFiber() is a function if appendComponentStack is true.
+          let current: ?Fiber = getCurrentFiber();
+          let ownerStack: string = '';
+          while (current != null) {
+            const name = getDisplayNameForFiber(current);
+            const owner = current._debugOwner;
+            const ownerName =
+              owner != null ? getDisplayNameForFiber(owner) : null;
+
+            ownerStack += describeComponentFrame(
+              name,
+              current._debugSource,
+              ownerName
+            );
+
+            current = owner;
+          }
+
+          if (ownerStack !== '') {
+            args.push(ownerStack);
           }
         }
         originalMethod(...args);
       };
     } catch (error) {}
   }
 }
+
+const BEFORE_SLASH_RE = /^(.*)[\\/]/;
+
+// Copied from React repo:
+// https://github.com/facebook/react/blob/master/packages/shared/describeComponentFrame.js
+function describeComponentFrame(
+  name: null | string,
+  source: any,
+  ownerName: null | string
+) {
+  let sourceInfo = '';
+  if (source) {
+    let path = source.fileName;
+    let fileName = path.replace(BEFORE_SLASH_RE, '');
+    if (__DEV__) {
+      // In DEV, include code for a common special case:
+      // prefer "folder/index.js" instead of just "index.js".
+      if (/^index\./.test(fileName)) {
+        const match = path.match(BEFORE_SLASH_RE);
+        if (match) {
+          const pathBeforeSlash = match[1];
+          if (pathBeforeSlash) {
+            const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+            fileName = folderName + '/' + fileName;
+          }
+        }
+      }
+    }
+    sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
+  } else if (ownerName) {
+    sourceInfo = ' (created by ' + ownerName + ')';
+  }
+  return '\n    in ' + (name || 'Unknown') + sourceInfo;
+}

src/backend/renderer.js

@@ -275,7 +275,7 @@ export function attach(
   // 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);
+  patchConsole(renderer, getDisplayNameForFiber);
 
   const {
     overrideHookState,

src/backend/types.js

@@ -91,12 +91,6 @@ 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,
@@ -125,8 +119,8 @@ export type ReactRenderer = {
   currentDispatcherRef?: {| current: null | Dispatcher |},
 
   // Only injected by React v16.9+ in DEV mode.
-  // Enables DevTools to append component stack to error messages.
-  debugCurrentFrame: ReactDebugCurrentFrame,
+  // Enables DevTools to append owners-only component stack to error messages.
+  getCurrentFiber?: () => Fiber | null,
 
   // <= 15
   Mount?: any,