Refactor Component Stack Traces (#18495)

* Add feature flag

* Split stack from current fiber

You can get stack from any fiber, not just current.

* Refactor description of component frames

These should use fiber tags for switching. This also puts the relevant code
behind DEV flags.

* We no longer expose StrictMode in component stacks

They're not super useful and will go away later anyway.

* Update tests

Context is no longer part of SSR stacks. This was already the case on the
client.

forwardRef no longer is wrapped on the stack. It's still in getComponentName
but it's probably just noise in stacks. Eventually we'll remove the wrapper
so it'll go away anyway. If we use native stack frames they won't have this
extra wrapper.

It also doesn't pick up displayName from the outer wrapper. We could maybe
transfer it but this will also be fixed by removing the wrapper.

* Forward displayName onto the inner function for forwardRef and memo in DEV

This allows them to show up in stack traces.

I'm not doing this for lazy because lazy is supposed to be called on the
consuming side so you shouldn't assign it a name on that end. Especially
not one that mutates the inner.

* Use multiple instances of the fake component

We mutate the inner component for its name so we need multiple copies.

Author: sebmarkbage

packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap

@@ -619,11 +619,11 @@ exports[`Store should show the right display names for special component types 1
       <MyComponent>
       <MyComponent> [ForwardRef]
     ▾ <Anonymous> [ForwardRef]
-        <MyComponent>
+        <MyComponent2>
       <Custom> [ForwardRef]
-      <MyComponent> [Memo]
+      <MyComponent4> [Memo]
     ▾ <MyComponent> [Memo]
         <MyComponent> [ForwardRef]
     ▾ <Suspense>
-        <MyComponent>
+        <MyComponent5>
 `;

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

@@ -856,16 +856,20 @@ describe('Store', () => {
 
     const MyComponent = (props, ref) => null;
     const FowardRefComponent = React.forwardRef(MyComponent);
+    const MyComponent2 = (props, ref) => null;
     const FowardRefComponentWithAnonymousFunction = React.forwardRef(() => (
-      <MyComponent />
+      <MyComponent2 />
     ));
+    const MyComponent3 = (props, ref) => null;
     const FowardRefComponentWithCustomDisplayName = React.forwardRef(
-      MyComponent,
+      MyComponent3,
     );
     FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
-    const MemoComponent = React.memo(MyComponent);
+    const MyComponent4 = (props, ref) => null;
+    const MemoComponent = React.memo(MyComponent4);
     const MemoForwardRefComponent = React.memo(FowardRefComponent);
-    const LazyComponent = React.lazy(() => fakeImport(MyComponent));
+    const MyComponent5 = (props, ref) => null;
+    const LazyComponent = React.lazy(() => fakeImport(MyComponent5));
 
     const App = () => (
       <React.Fragment>

packages/react-dom/src/__tests__/findDOMNode-test.js

@@ -124,7 +124,6 @@ describe('findDOMNode', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in div (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child);
@@ -154,8 +153,7 @@ describe('findDOMNode', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in div (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child);
   });

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -15,7 +15,7 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 import * as React from 'react';
 import invariant from 'shared/invariant';
 import getComponentName from 'shared/getComponentName';
-import describeComponentFrame from 'shared/describeComponentFrame';
+import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   warnAboutDeprecatedLifecycles,
@@ -112,11 +112,11 @@ if (__DEV__) {
   };
 
   describeStackFrame = function(element): string {
-    const source = element._source;
-    const type = element.type;
-    const name = getComponentName(type);
-    const ownerName = null;
-    return describeComponentFrame(name, source, ownerName);
+    return describeUnknownElementTypeFrameInDEV(
+      element.type,
+      element._source,
+      null,
+    );
   };
 
   pushCurrentDebugStack = function(stack: Array<Frame>) {

packages/react-native-renderer/src/ReactNativeRenderer.js

@@ -25,7 +25,7 @@ import {
   getPublicRootInstance,
 } from 'react-reconciler/src/ReactFiberReconciler';
 // TODO: direct imports like some-package/src/* are bad. Fix me.
-import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactFiberComponentStack';
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {
   setBatchingImplementation,

packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js

@@ -773,7 +773,6 @@ describe('ReactFabric', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child);
@@ -811,8 +810,7 @@ describe('ReactFabric', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child);
   });
@@ -846,7 +844,6 @@ describe('ReactFabric', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
@@ -882,8 +879,7 @@ describe('ReactFabric', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
   });

packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js

@@ -483,7 +483,6 @@ describe('ReactNative', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child);
@@ -521,8 +520,7 @@ describe('ReactNative', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child);
   });
@@ -556,7 +554,6 @@ describe('ReactNative', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
@@ -592,8 +589,7 @@ describe('ReactNative', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
   });

packages/react-reconciler/src/ReactCapturedValue.js

@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactFiber';
 
-import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 
 export type CapturedValue<T> = {|
   value: T,

packages/react-reconciler/src/ReactChildFiber.js

@@ -44,10 +44,8 @@ import {
   createFiberFromPortal,
 } from './ReactFiber';
 import {emptyRefsObject} from './ReactFiberClassComponent';
-import {
-  getCurrentFiberStackInDev,
-  getStackByFiberInDevAndProd,
-} from './ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
+import {getCurrentFiberStackInDev} from './ReactCurrentFiber';
 import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading';
 import {StrictMode} from './ReactTypeOfMode';
 

packages/react-reconciler/src/ReactCurrentFiber.js

@@ -10,50 +10,11 @@
 import type {Fiber} from './ReactFiber';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {
-  HostRoot,
-  HostPortal,
-  HostText,
-  Fragment,
-  ContextProvider,
-  ContextConsumer,
-} from './ReactWorkTags';
-import describeComponentFrame from 'shared/describeComponentFrame';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 import getComponentName from 'shared/getComponentName';
 
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
-function describeFiber(fiber: Fiber): string {
-  switch (fiber.tag) {
-    case HostRoot:
-    case HostPortal:
-    case HostText:
-    case Fragment:
-    case ContextProvider:
-    case ContextConsumer:
-      return '';
-    default:
-      const owner = fiber._debugOwner;
-      const source = fiber._debugSource;
-      const name = getComponentName(fiber.type);
-      let ownerName = null;
-      if (owner) {
-        ownerName = getComponentName(owner.type);
-      }
-      return describeComponentFrame(name, source, ownerName);
-  }
-}
-
-export function getStackByFiberInDevAndProd(workInProgress: Fiber): string {
-  let info = '';
-  let node = workInProgress;
-  do {
-    info += describeFiber(node);
-    node = node.return;
-  } while (node);
-  return info;
-}
-
 export let current: Fiber | null = null;
 export let isRendering: boolean = false;