Implement component stacks

This uses a reverse linked list in DEV-only to keep track of where we're
currently executing.

Author: sebmarkbage

packages/react-server/src/ReactFizzComponentStack.js

@@ -0,0 +1,61 @@
+/**
+ * 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 {
+  describeBuiltInComponentFrame,
+  describeFunctionComponentFrame,
+  describeClassComponentFrame,
+} from 'shared/ReactComponentStackFrame';
+
+// DEV-only reverse linked list representing the current component stack
+type BuiltInComponentStackNode = {
+  tag: 0,
+  parent: null | ComponentStackNode,
+  type: string,
+};
+type FunctionComponentStackNode = {
+  tag: 1,
+  parent: null | ComponentStackNode,
+  type: Function,
+};
+type ClassComponentStackNode = {
+  tag: 2,
+  parent: null | ComponentStackNode,
+  type: Function,
+};
+export type ComponentStackNode =
+  | BuiltInComponentStackNode
+  | FunctionComponentStackNode
+  | ClassComponentStackNode;
+
+export function getStackByComponentStackNode(
+  componentStack: ComponentStackNode,
+): string {
+  try {
+    let info = '';
+    let node = componentStack;
+    do {
+      switch (node.tag) {
+        case 0:
+          info += describeBuiltInComponentFrame(node.type, null, null);
+          break;
+        case 1:
+          info += describeFunctionComponentFrame(node.type, null, null);
+          break;
+        case 2:
+          info += describeClassComponentFrame(node.type, null, null);
+          break;
+      }
+      node = node.parent;
+    } while (node);
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}

packages/react-server/src/ReactFizzServer.js

@@ -24,6 +24,7 @@ import type {
   FormatContext,
 } from './ReactServerFormatConfig';
 import type {ContextSnapshot} from './ReactFizzNewContext';
+import type {ComponentStackNode} from './ReactFizzComponentStack';
 
 import {
   scheduleWork,
@@ -77,6 +78,7 @@ import {
   currentResponseState,
   setCurrentResponseState,
 } from './ReactFizzHooks';
+import {getStackByComponentStackNode} from './ReactFizzComponentStack';
 
 import {
   getIteratorFn,
@@ -110,6 +112,7 @@ import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
 type LegacyContext = {
   [key: string]: any,
@@ -135,6 +138,7 @@ type Task = {
   legacyContext: LegacyContext, // the current legacy context that this task is executing in
   context: ContextSnapshot, // the current new context that this task is executing in
   assignID: null | SuspenseBoundaryID, // id to assign to the content
+  componentStack: null | ComponentStackNode, // DEV-only component stack
 };
 
 const PENDING = 0;
@@ -299,7 +303,7 @@ function createTask(
   } else {
     blockedBoundary.pendingTasks++;
   }
-  const task = {
+  const task: Task = ({
     node,
     ping: () => pingTask(request, task),
     blockedBoundary,
@@ -308,7 +312,10 @@ function createTask(
     legacyContext,
     context,
     assignID,
-  };
+  }: any);
+  if (__DEV__) {
+    task.componentStack = currentTaskInDEV ? task.componentStack : null;
+  }
   abortSet.add(task);
   return task;
 }
@@ -331,6 +338,55 @@ function createPendingSegment(
   };
 }
 
+// DEV-only global reference to the currently executing task
+let currentTaskInDEV: null | Task = null;
+function getCurrentStackInDEV(): string {
+  if (__DEV__) {
+    if (currentTaskInDEV === null || currentTaskInDEV.componentStack === null) {
+      return '';
+    }
+    return getStackByComponentStackNode(currentTaskInDEV.componentStack);
+  }
+  return '';
+}
+
+function pushBuiltInComponentStackInDEV(task: Task, type: string): void {
+  if (__DEV__) {
+    task.componentStack = {
+      tag: 0,
+      parent: task.componentStack,
+      type,
+    };
+  }
+}
+function pushFunctionComponentStackInDEV(task: Task, type: Function): void {
+  if (__DEV__) {
+    task.componentStack = {
+      tag: 1,
+      parent: task.componentStack,
+      type,
+    };
+  }
+}
+function pushClassComponentStackInDEV(task: Task, type: Function): void {
+  if (__DEV__) {
+    task.componentStack = {
+      tag: 2,
+      parent: task.componentStack,
+      type,
+    };
+  }
+}
+function popComponentStackInDEV(task: Task): void {
+  if (__DEV__) {
+    invariant(
+      task.componentStack !== null,
+      'Unexpectedly popped too many stack frames. This is a bug in React.',
+    );
+    task.componentStack = task.componentStack.parent;
+  }
+}
+
 function reportError(request: Request, error: mixed): void {
   // If this callback errors, we intentionally let that error bubble up to become a fatal error
   // so that someone fixes the error reporting instead of hiding it.
@@ -351,6 +407,7 @@ function renderSuspenseBoundary(
   task: Task,
   props: Object,
 ): void {
+  pushBuiltInComponentStackInDEV(task, 'Suspense');
   const parentBoundary = task.blockedBoundary;
   const parentSegment = task.blockedSegment;
 
@@ -418,6 +475,7 @@ function renderSuspenseBoundary(
   } finally {
     task.blockedBoundary = parentBoundary;
     task.blockedSegment = parentSegment;
+    popComponentStackInDEV(task);
   }
 
   // This injects an extra segment just to contain an empty tag with an ID.
@@ -456,6 +514,7 @@ function renderHostElement(
   type: string,
   props: Object,
 ): void {
+  pushBuiltInComponentStackInDEV(task, type);
   const segment = task.blockedSegment;
   const children = pushStartInstance(
     segment.chunks,
@@ -476,6 +535,7 @@ function renderHostElement(
   // the correct context. Therefore this is not in a finally.
   segment.formatContext = prevContext;
   pushEndInstance(segment.chunks, type, props);
+  popComponentStackInDEV(task);
 }
 
 function shouldConstruct(Component) {
@@ -564,12 +624,14 @@ function renderClassComponent(
   Component: any,
   props: any,
 ): void {
+  pushClassComponentStackInDEV(task, Component);
   const maskedContext = !disableLegacyContext
     ? getMaskedContext(Component, task.legacyContext)
     : undefined;
   const instance = constructClassInstance(Component, props, maskedContext);
   mountClassInstance(instance, Component, props, maskedContext);
   finishClassComponent(request, task, instance, Component, props);
+  popComponentStackInDEV(task);
 }
 
 const didWarnAboutBadClass = {};
@@ -594,6 +656,7 @@ function renderIndeterminateComponent(
   if (!disableLegacyContext) {
     legacyContext = getMaskedContext(Component, task.legacyContext);
   }
+  pushFunctionComponentStackInDEV(task, Component);
 
   if (__DEV__) {
     if (
@@ -688,6 +751,7 @@ function renderIndeterminateComponent(
     // the previous task every again, so we can use the destructive recursive form.
     renderNodeDestructive(request, task, value);
   }
+  popComponentStackInDEV(task);
 }
 
 function validateFunctionComponentInDev(Component: any): void {
@@ -768,8 +832,10 @@ function renderForwardRef(
   props: Object,
   ref: any,
 ): void {
+  pushFunctionComponentStackInDEV(task, type.render);
   const children = renderWithHooks(request, task, type.render, props, ref);
   renderNodeDestructive(request, task, children);
+  popComponentStackInDEV(task);
 }
 
 function renderMemo(
@@ -866,11 +932,13 @@ function renderLazyComponent(
   props: Object,
   ref: any,
 ): void {
+  pushBuiltInComponentStackInDEV(task, 'Lazy');
   const payload = lazyComponent._payload;
   const init = lazyComponent._init;
   const Component = init(payload);
   const resolvedProps = resolveDefaultProps(Component, props);
-  return renderElement(request, task, Component, resolvedProps, ref);
+  renderElement(request, task, Component, resolvedProps, ref);
+  popComponentStackInDEV(task);
 }
 
 function renderElement(
@@ -907,11 +975,17 @@ function renderElement(
     case REACT_DEBUG_TRACING_MODE_TYPE:
     case REACT_STRICT_MODE_TYPE:
     case REACT_PROFILER_TYPE:
-    case REACT_SUSPENSE_LIST_TYPE: // TODO: SuspenseList should control the boundaries.
     case REACT_FRAGMENT_TYPE: {
       renderNodeDestructive(request, task, props.children);
       return;
     }
+    case REACT_SUSPENSE_LIST_TYPE: {
+      pushBuiltInComponentStackInDEV(task, 'SuspenseList');
+      // TODO: SuspenseList should control the boundaries.
+      renderNodeDestructive(request, task, props.children);
+      popComponentStackInDEV(task);
+      return;
+    }
     case REACT_SCOPE_TYPE: {
       if (enableScopeAPI) {
         renderNodeDestructive(request, task, props.children);
@@ -1174,6 +1248,10 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
   const previousFormatContext = task.blockedSegment.formatContext;
   const previousLegacyContext = task.legacyContext;
   const previousContext = task.context;
+  let previousComponentStack = null;
+  if (__DEV__) {
+    previousComponentStack = task.componentStack;
+  }
   try {
     return renderNodeDestructive(request, task, node);
   } catch (x) {
@@ -1187,6 +1265,9 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       task.context = previousContext;
       // Restore all active ReactContexts to what they were before.
       switchContext(previousContext);
+      if (__DEV__) {
+        task.componentStack = previousComponentStack;
+      }
     } else {
       // Restore the context. We assume that this will be restored by the inner
       // functions in case nothing throws so we don't use "finally" here.
@@ -1195,6 +1276,9 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       task.context = previousContext;
       // Restore all active ReactContexts to what they were before.
       switchContext(previousContext);
+      if (__DEV__) {
+        task.componentStack = previousComponentStack;
+      }
       // We assume that we don't need the correct context.
       // Let's terminate the rest of the tree and don't render any siblings.
       throw x;
@@ -1360,6 +1444,11 @@ function retryTask(request: Request, task: Task): void {
   // We don't restore it after we leave because it's likely that we'll end up
   // needing a very similar context soon again.
   switchContext(task.context);
+  let prevTaskInDEV = null;
+  if (__DEV__) {
+    prevTaskInDEV = currentTaskInDEV;
+    currentTaskInDEV = task;
+  }
   try {
     // We call the destructive form that mutates this task. That way if something
     // suspends again, we can reuse the same task instead of spawning a new one.
@@ -1379,6 +1468,10 @@ function retryTask(request: Request, task: Task): void {
       segment.status = ERRORED;
       erroredTask(request, task.blockedBoundary, segment, x);
     }
+  } finally {
+    if (__DEV__) {
+      currentTaskInDEV = prevTaskInDEV;
+    }
   }
 }
 
@@ -1389,6 +1482,11 @@ export function performWork(request: Request): void {
   const prevContext = getActiveContext();
   const prevDispatcher = ReactCurrentDispatcher.current;
   ReactCurrentDispatcher.current = Dispatcher;
+  let prevGetCurrentStackImpl;
+  if (__DEV__) {
+    prevGetCurrentStackImpl = ReactDebugCurrentFrame.getCurrentStack;
+    ReactDebugCurrentFrame.getCurrentStack = getCurrentStackInDEV;
+  }
   const prevResponseState = currentResponseState;
   setCurrentResponseState(request.responseState);
   try {
@@ -1408,6 +1506,9 @@ export function performWork(request: Request): void {
   } finally {
     setCurrentResponseState(prevResponseState);
     ReactCurrentDispatcher.current = prevDispatcher;
+    if (__DEV__) {
+      ReactDebugCurrentFrame.getCurrentStack = prevGetCurrentStackImpl;
+    }
     if (prevDispatcher === Dispatcher) {
       // This means that we were in a reentrant work loop. This could happen
       // in a renderer that supports synchronous work like renderToString,