mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Sebastian Markbåge
f33a6b69c6
This implements the concept of a DEV-only "owner" for Server Components. The owner concept isn't really super useful. We barely use it anymore, but we do have it as a concept in DevTools in a couple of cases so this adds it for parity. However, this is mainly interesting because it could be used to wire up future owner-based stacks. I do this by outlining the DebugInfo for a Server Component (ReactComponentInfo). Then I just rely on Flight deduping to refer to that. I refer to the same thing by referential equality so that we can associate a Server Component parent in DebugInfo with an owner. If you suspend and replay a Server Component, we have to restore the same owner. To do that, I did a little ugly hack and stashed it on the thenable state object. Felt unnecessarily complicated to add a stateful wrapper for this one dev-only case. The owner could really be anything since it could be coming from a different implementation. Because this is the first time we have an owner other than Fiber, I have to fix up a bunch of places that assumes Fiber. I mainly did the `typeof owner.tag === 'number'` to assume it's a Fiber for now. This also doesn't actually add it to DevTools / RN Inspector yet. I just ignore them there for now. Because Server Components can be async the owner isn't tracked after an await. We need per-component AsyncLocalStorage for that. This can be done in a follow up.
101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
// This is a DevTools fork of ReactFiberComponentStack.
|
|
// This fork enables DevTools to use the same "native" component stack format,
|
|
// while still maintaining support for multiple renderer versions
|
|
// (which use different values for ReactTypeOfWork).
|
|
|
|
import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
|
|
import type {CurrentDispatcherRef, WorkTagMap} from './types';
|
|
|
|
import {
|
|
describeBuiltInComponentFrame,
|
|
describeFunctionComponentFrame,
|
|
describeClassComponentFrame,
|
|
describeDebugInfoFrame,
|
|
} from './DevToolsComponentStackFrame';
|
|
|
|
export function describeFiber(
|
|
workTagMap: WorkTagMap,
|
|
workInProgress: Fiber,
|
|
currentDispatcherRef: CurrentDispatcherRef,
|
|
): string {
|
|
const {
|
|
HostComponent,
|
|
LazyComponent,
|
|
SuspenseComponent,
|
|
SuspenseListComponent,
|
|
FunctionComponent,
|
|
IndeterminateComponent,
|
|
SimpleMemoComponent,
|
|
ForwardRef,
|
|
ClassComponent,
|
|
} = workTagMap;
|
|
|
|
switch (workInProgress.tag) {
|
|
case HostComponent:
|
|
return describeBuiltInComponentFrame(workInProgress.type);
|
|
case LazyComponent:
|
|
return describeBuiltInComponentFrame('Lazy');
|
|
case SuspenseComponent:
|
|
return describeBuiltInComponentFrame('Suspense');
|
|
case SuspenseListComponent:
|
|
return describeBuiltInComponentFrame('SuspenseList');
|
|
case FunctionComponent:
|
|
case IndeterminateComponent:
|
|
case SimpleMemoComponent:
|
|
return describeFunctionComponentFrame(
|
|
workInProgress.type,
|
|
currentDispatcherRef,
|
|
);
|
|
case ForwardRef:
|
|
return describeFunctionComponentFrame(
|
|
workInProgress.type.render,
|
|
currentDispatcherRef,
|
|
);
|
|
case ClassComponent:
|
|
return describeClassComponentFrame(
|
|
workInProgress.type,
|
|
currentDispatcherRef,
|
|
);
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
|
|
export function getStackByFiberInDevAndProd(
|
|
workTagMap: WorkTagMap,
|
|
workInProgress: Fiber,
|
|
currentDispatcherRef: CurrentDispatcherRef,
|
|
): string {
|
|
try {
|
|
let info = '';
|
|
let node: Fiber = workInProgress;
|
|
do {
|
|
info += describeFiber(workTagMap, node, currentDispatcherRef);
|
|
// Add any Server Component stack frames in reverse order.
|
|
const debugInfo = node._debugInfo;
|
|
if (debugInfo) {
|
|
for (let i = debugInfo.length - 1; i >= 0; i--) {
|
|
const entry = debugInfo[i];
|
|
if (typeof entry.name === 'string') {
|
|
info += describeDebugInfoFrame(entry.name, entry.env);
|
|
}
|
|
}
|
|
}
|
|
// $FlowFixMe[incompatible-type] we bail out when we get a null
|
|
node = node.return;
|
|
} while (node);
|
|
return info;
|
|
} catch (x) {
|
|
return '\nError generating stack: ' + x.message + '\n' + x.stack;
|
|
}
|
|
}
|