Skip to content

Commit ffc250e

Browse files
sebmarkbageAndyPengc12
authored andcommitted
[Fiber] Transfer _debugInfo from Arrays, Lazy, Thenables and Elements to the inner Fibers. (facebook#28286)
That way we can use it for debug information like component stacks and DevTools. I used an extra stack argument in Child Fiber to track this as it's flowing down since it's not just elements where we have this info readily available but parent arrays and lazy can merge this into the Fiber too. It's not great that this is a dev-only argument and I could track it globally but seems more likely to make mistakes. It is possible for the same debug info to appear for multiple child fibers like when it's attached to a fragment or a lazy that resolves to a fragment at the root. The object identity could be used in these scenarios to infer if that's really one server component that's a parent of all children or if each child has a server component with the same name. This is effectively a public API because you can use it to stash information on Promises from a third-party service - not just Server Components. I started outline the types for this for some things I was planning to add but it's not final. I was also planning on storing it from `use(thenable)` for when you suspend on a Promise. However, I realized that there's no Hook instance for those to stash it on. So it might need a separate data structure to stash the previous pass over of `use()` that resets each render. No tests yet since I didn't want to test internals but it'll be covered once we have debugging features like component stacks.
1 parent d96c091 commit ffc250e

File tree

8 files changed

+228
-29
lines changed

8 files changed

+228
-29
lines changed

packages/react-client/src/ReactFlightClient.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@
77
* @flow
88
*/
99

10-
import type {Thenable} from 'shared/ReactTypes';
10+
import type {
11+
Thenable,
12+
ReactDebugInfo,
13+
ReactComponentInfo,
14+
ReactAsyncInfo,
15+
} from 'shared/ReactTypes';
1116
import type {LazyComponent} from 'react/src/ReactLazy';
1217

1318
import type {
@@ -76,9 +81,6 @@ const RESOLVED_MODULE = 'resolved_module';
7681
const INITIALIZED = 'fulfilled';
7782
const ERRORED = 'rejected';
7883

79-
// Dev-only
80-
type ReactDebugInfo = Array<{+name?: string, +env?: string}>;
81-
8284
type PendingChunk<T> = {
8385
status: 'pending',
8486
value: null | Array<(T) => mixed>,
@@ -1014,7 +1016,7 @@ function resolveHint<Code: HintCode>(
10141016
function resolveDebugInfo(
10151017
response: Response,
10161018
id: number,
1017-
debugInfo: {name: string},
1019+
debugInfo: ReactComponentInfo | ReactAsyncInfo,
10181020
): void {
10191021
if (!__DEV__) {
10201022
// These errors should never make it into a build so we don't need to encode them in codes.json

0 commit comments

Comments
 (0)