Skip to content

Commit df21f8f

Browse files
committed
Implement debugInfo in Fizz
This lets us track Server Component parent stacks in Fizz which also lets us track the correct owner stack for lazy. In Fiber we're careful not to make any DEV only fibers but since the ReactFizzComponentStack data structures just exist for debug meta data anyway we can just expand on that.
1 parent 0db9d71 commit df21f8f

File tree

4 files changed

+186
-78
lines changed

4 files changed

+186
-78
lines changed

Diff for: packages/react-html/src/__tests__/ReactHTMLServer-test.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -244,17 +244,15 @@ if (!__EXPERIMENTAL__) {
244244
expect(caughtErrors.length).toBe(1);
245245
expect(caughtErrors[0].error).toBe(thrownError);
246246
expect(normalizeCodeLocInfo(caughtErrors[0].parentStack)).toBe(
247-
// TODO: Because Fizz doesn't yet implement debugInfo for parent stacks
248-
// it doesn't have the Server Components in the parent stacks.
249-
'\n in Lazy (at **)' +
247+
'\n in Baz (at **)' +
250248
'\n in div (at **)' +
249+
'\n in Bar (at **)' +
250+
'\n in Foo (at **)' +
251251
'\n in div (at **)',
252252
);
253253
expect(normalizeCodeLocInfo(caughtErrors[0].ownerStack)).toBe(
254254
__DEV__ && gate(flags => flags.enableOwnerStacks)
255-
? // TODO: Because Fizz doesn't yet implement debugInfo for parent stacks
256-
// it doesn't have the Server Components in the parent stacks.
257-
'\n in Lazy (at **)'
255+
? '\n in Bar (at **)' + '\n in Foo (at **)'
258256
: null,
259257
);
260258
});

Diff for: packages/react-reconciler/src/ReactFiberComponentStack.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -185,11 +185,11 @@ export function getOwnerStackByFiberInDev(
185185
// another code path anyway. I.e. this is likely NOT a V8 based browser.
186186
// This will cause some of the stack to have different formatting.
187187
// TODO: Normalize server component stacks to the client formatting.
188-
if (owner.stack !== '') {
189-
info += '\n' + owner.stack;
188+
const ownerStack: string = owner.stack;
189+
owner = owner.owner;
190+
if (owner && ownerStack !== '') {
191+
info += '\n' + ownerStack;
190192
}
191-
const componentInfo: ReactComponentInfo = (owner: any);
192-
owner = componentInfo.owner;
193193
} else {
194194
break;
195195
}

Diff for: packages/react-server/src/ReactFizzComponentStack.js

+22-5
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,19 @@ type ClassComponentStackNode = {
4141
owner?: null | ReactComponentInfo | ComponentStackNode, // DEV only
4242
stack?: null | string | Error, // DEV only
4343
};
44+
type ServerComponentStackNode = {
45+
// DEV only
46+
tag: 3,
47+
parent: null | ComponentStackNode,
48+
type: string, // name + env
49+
owner?: null | ReactComponentInfo | ComponentStackNode, // DEV only
50+
stack?: null | string | Error, // DEV only
51+
};
4452
export type ComponentStackNode =
4553
| BuiltInComponentStackNode
4654
| FunctionComponentStackNode
47-
| ClassComponentStackNode;
55+
| ClassComponentStackNode
56+
| ServerComponentStackNode;
4857

4958
export function getStackByComponentStackNode(
5059
componentStack: ComponentStackNode,
@@ -63,6 +72,9 @@ export function getStackByComponentStackNode(
6372
case 2:
6473
info += describeClassComponentFrame(node.type);
6574
break;
75+
case 3:
76+
info += describeBuiltInComponentFrame(node.type);
77+
break;
6678
}
6779
// $FlowFixMe[incompatible-type] we bail out when we get a null
6880
node = node.parent;
@@ -110,6 +122,11 @@ export function getOwnerStackByComponentStackNodeInDev(
110122
);
111123
}
112124
break;
125+
case 3:
126+
if (!componentStack.owner) {
127+
info += describeBuiltInComponentFrame(componentStack.type);
128+
}
129+
break;
113130
}
114131

115132
let owner: void | null | ComponentStackNode | ReactComponentInfo =
@@ -137,11 +154,11 @@ export function getOwnerStackByComponentStackNodeInDev(
137154
}
138155
} else if (typeof owner.stack === 'string') {
139156
// Server Component
140-
if (owner.stack !== '') {
141-
info += '\n' + owner.stack;
157+
const ownerStack: string = owner.stack;
158+
owner = owner.owner;
159+
if (owner && ownerStack !== '') {
160+
info += '\n' + ownerStack;
142161
}
143-
const componentInfo: ReactComponentInfo = (owner: any);
144-
owner = componentInfo.owner;
145162
} else {
146163
break;
147164
}

0 commit comments

Comments
 (0)