Skip to content

Commit d8e167a

Browse files
sebmarkbagesebmarkbage
committed
Since debugOwner can now be a non-Fiber, fix up places that assumes it is
I left DevTools and ReactNativeFiberInspector to ignore them for now.
1 parent b44d302 commit d8e167a

12 files changed

+119
-125
lines changed

‎packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,7 @@ import {
3333
import {disableLogs, reenableLogs} from './DevToolsConsolePatching';
3434

3535
let prefix;
36-
export function describeBuiltInComponentFrame(
37-
name: string,
38-
ownerFn: void | null | Function,
39-
): string {
36+
export function describeBuiltInComponentFrame(name: string): string {
4037
if (prefix === undefined) {
4138
// Extract the VM specific prefix used by each line.
4239
try {
@@ -51,10 +48,7 @@ export function describeBuiltInComponentFrame(
5148
}
5249

5350
export function describeDebugInfoFrame(name: string, env: ?string): string {
54-
return describeBuiltInComponentFrame(
55-
name + (env ? ' (' + env + ')' : ''),
56-
null,
57-
);
51+
return describeBuiltInComponentFrame(name + (env ? ' (' + env + ')' : ''));
5852
}
5953

6054
let reentry = false;
@@ -292,15 +286,13 @@ export function describeNativeComponentFrame(
292286

293287
export function describeClassComponentFrame(
294288
ctor: Function,
295-
ownerFn: void | null | Function,
296289
currentDispatcherRef: CurrentDispatcherRef,
297290
): string {
298291
return describeNativeComponentFrame(ctor, true, currentDispatcherRef);
299292
}
300293

301294
export function describeFunctionComponentFrame(
302295
fn: Function,
303-
ownerFn: void | null | Function,
304296
currentDispatcherRef: CurrentDispatcherRef,
305297
): string {
306298
return describeNativeComponentFrame(fn, false, currentDispatcherRef);
@@ -313,7 +305,6 @@ function shouldConstruct(Component: Function) {
313305

314306
export function describeUnknownElementTypeFrameInDEV(
315307
type: any,
316-
ownerFn: void | null | Function,
317308
currentDispatcherRef: CurrentDispatcherRef,
318309
): string {
319310
if (!__DEV__) {
@@ -330,31 +321,29 @@ export function describeUnknownElementTypeFrameInDEV(
330321
);
331322
}
332323
if (typeof type === 'string') {
333-
return describeBuiltInComponentFrame(type, ownerFn);
324+
return describeBuiltInComponentFrame(type);
334325
}
335326
switch (type) {
336327
case SUSPENSE_NUMBER:
337328
case SUSPENSE_SYMBOL_STRING:
338-
return describeBuiltInComponentFrame('Suspense', ownerFn);
329+
return describeBuiltInComponentFrame('Suspense');
339330
case SUSPENSE_LIST_NUMBER:
340331
case SUSPENSE_LIST_SYMBOL_STRING:
341-
return describeBuiltInComponentFrame('SuspenseList', ownerFn);
332+
return describeBuiltInComponentFrame('SuspenseList');
342333
}
343334
if (typeof type === 'object') {
344335
switch (type.$$typeof) {
345336
case FORWARD_REF_NUMBER:
346337
case FORWARD_REF_SYMBOL_STRING:
347338
return describeFunctionComponentFrame(
348339
type.render,
349-
ownerFn,
350340
currentDispatcherRef,
351341
);
352342
case MEMO_NUMBER:
353343
case MEMO_SYMBOL_STRING:
354344
// Memo may contain any component type so we recursively resolve it.
355345
return describeUnknownElementTypeFrameInDEV(
356346
type.type,
357-
ownerFn,
358347
currentDispatcherRef,
359348
);
360349
case LAZY_NUMBER:
@@ -366,7 +355,6 @@ export function describeUnknownElementTypeFrameInDEV(
366355
// Lazy may contain any component type so we recursively resolve it.
367356
return describeUnknownElementTypeFrameInDEV(
368357
init(payload),
369-
ownerFn,
370358
currentDispatcherRef,
371359
);
372360
} catch (x) {}

‎packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -39,38 +39,30 @@ export function describeFiber(
3939
ClassComponent,
4040
} = workTagMap;
4141

42-
const owner: null | Function = __DEV__
43-
? workInProgress._debugOwner
44-
? workInProgress._debugOwner.type
45-
: null
46-
: null;
4742
switch (workInProgress.tag) {
4843
case HostComponent:
49-
return describeBuiltInComponentFrame(workInProgress.type, owner);
44+
return describeBuiltInComponentFrame(workInProgress.type);
5045
case LazyComponent:
51-
return describeBuiltInComponentFrame('Lazy', owner);
46+
return describeBuiltInComponentFrame('Lazy');
5247
case SuspenseComponent:
53-
return describeBuiltInComponentFrame('Suspense', owner);
48+
return describeBuiltInComponentFrame('Suspense');
5449
case SuspenseListComponent:
55-
return describeBuiltInComponentFrame('SuspenseList', owner);
50+
return describeBuiltInComponentFrame('SuspenseList');
5651
case FunctionComponent:
5752
case IndeterminateComponent:
5853
case SimpleMemoComponent:
5954
return describeFunctionComponentFrame(
6055
workInProgress.type,
61-
owner,
6256
currentDispatcherRef,
6357
);
6458
case ForwardRef:
6559
return describeFunctionComponentFrame(
6660
workInProgress.type.render,
67-
owner,
6861
currentDispatcherRef,
6962
);
7063
case ClassComponent:
7164
return describeClassComponentFrame(
7265
workInProgress.type,
73-
owner,
7466
currentDispatcherRef,
7567
);
7668
default:

‎packages/react-devtools-shared/src/backend/renderer.js

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1952,15 +1952,24 @@ export function attach(
19521952
const {key} = fiber;
19531953
const displayName = getDisplayNameForFiber(fiber);
19541954
const elementType = getElementTypeForFiber(fiber);
1955-
const {_debugOwner} = fiber;
1955+
const debugOwner = fiber._debugOwner;
19561956

19571957
// Ideally we should call getFiberIDThrows() for _debugOwner,
19581958
// since owners are almost always higher in the tree (and so have already been processed),
19591959
// but in some (rare) instances reported in open source, a descendant mounts before an owner.
19601960
// Since this is a DEV only field it's probably okay to also just lazily generate and ID here if needed.
19611961
// See https://github.com/facebook/react/issues/21445
1962-
const ownerID =
1963-
_debugOwner != null ? getOrGenerateFiberID(_debugOwner) : 0;
1962+
let ownerID: number;
1963+
if (debugOwner != null) {
1964+
if (typeof debugOwner.tag === 'number') {
1965+
ownerID = getOrGenerateFiberID((debugOwner: any));
1966+
} else {
1967+
// TODO: Track Server Component Owners.
1968+
ownerID = 0;
1969+
}
1970+
} else {
1971+
ownerID = 0;
1972+
}
19641973
const parentID = parentFiber ? getFiberIDThrows(parentFiber) : 0;
19651974

19661975
const displayNameStringID = getStringID(displayName);
@@ -3104,15 +3113,17 @@ export function attach(
31043113
return null;
31053114
}
31063115

3107-
const {_debugOwner} = fiber;
3108-
31093116
const owners: Array<SerializedElement> = [fiberToSerializedElement(fiber)];
31103117

3111-
if (_debugOwner) {
3112-
let owner: null | Fiber = _debugOwner;
3113-
while (owner !== null) {
3114-
owners.unshift(fiberToSerializedElement(owner));
3115-
owner = owner._debugOwner || null;
3118+
let owner = fiber._debugOwner;
3119+
while (owner != null) {
3120+
if (typeof owner.tag === 'number') {
3121+
const ownerFiber: Fiber = (owner: any); // Refined
3122+
owners.unshift(fiberToSerializedElement(ownerFiber));
3123+
owner = ownerFiber._debugOwner;
3124+
} else {
3125+
// TODO: Track Server Component Owners.
3126+
break;
31163127
}
31173128
}
31183129

@@ -3173,7 +3184,7 @@ export function attach(
31733184
}
31743185

31753186
const {
3176-
_debugOwner,
3187+
_debugOwner: debugOwner,
31773188
stateNode,
31783189
key,
31793190
memoizedProps,
@@ -3300,13 +3311,19 @@ export function attach(
33003311
context = {value: context};
33013312
}
33023313

3303-
let owners = null;
3304-
if (_debugOwner) {
3305-
owners = ([]: Array<SerializedElement>);
3306-
let owner: null | Fiber = _debugOwner;
3307-
while (owner !== null) {
3308-
owners.push(fiberToSerializedElement(owner));
3309-
owner = owner._debugOwner || null;
3314+
let owners: null | Array<SerializedElement> = null;
3315+
let owner = debugOwner;
3316+
while (owner != null) {
3317+
if (typeof owner.tag === 'number') {
3318+
const ownerFiber: Fiber = (owner: any); // Refined
3319+
if (owners === null) {
3320+
owners = [];
3321+
}
3322+
owners.push(fiberToSerializedElement(ownerFiber));
3323+
owner = ownerFiber._debugOwner;
3324+
} else {
3325+
// TODO: Track Server Component Owners.
3326+
break;
33103327
}
33113328
}
33123329

‎packages/react-native-renderer/src/ReactNativeFiberInspector.js

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -103,13 +103,21 @@ function getInspectorDataForInstance(
103103
}
104104

105105
const fiber = findCurrentFiberUsingSlowPath(closestInstance);
106+
if (fiber === null) {
107+
// Might not be currently mounted.
108+
return {
109+
hierarchy: [],
110+
props: emptyObject,
111+
selectedIndex: null,
112+
componentStack: '',
113+
};
114+
}
106115
const fiberHierarchy = getOwnerHierarchy(fiber);
107116
const instance = lastNonHostInstance(fiberHierarchy);
108117
const hierarchy = createHierarchy(fiberHierarchy);
109118
const props = getHostProps(instance);
110119
const selectedIndex = fiberHierarchy.indexOf(instance);
111-
const componentStack =
112-
fiber !== null ? getStackByFiberInDevAndProd(fiber) : '';
120+
const componentStack = getStackByFiberInDevAndProd(fiber);
113121

114122
return {
115123
closestInstance: instance,
@@ -125,7 +133,7 @@ function getInspectorDataForInstance(
125133
);
126134
}
127135

128-
function getOwnerHierarchy(instance: any) {
136+
function getOwnerHierarchy(instance: Fiber) {
129137
const hierarchy: Array<$FlowFixMe> = [];
130138
traverseOwnerTreeUp(hierarchy, instance);
131139
return hierarchy;
@@ -143,15 +151,17 @@ function lastNonHostInstance(hierarchy) {
143151
return hierarchy[0];
144152
}
145153

146-
// $FlowFixMe[missing-local-annot]
147154
function traverseOwnerTreeUp(
148155
hierarchy: Array<$FlowFixMe>,
149-
instance: any,
156+
instance: Fiber,
150157
): void {
151158
if (__DEV__ || enableGetInspectorDataForInstanceInProduction) {
152-
if (instance) {
153-
hierarchy.unshift(instance);
154-
traverseOwnerTreeUp(hierarchy, instance._debugOwner);
159+
hierarchy.unshift(instance);
160+
const owner = instance._debugOwner;
161+
if (owner != null && typeof owner.tag === 'number') {
162+
traverseOwnerTreeUp(hierarchy, (owner: any));
163+
} else {
164+
// TODO: Traverse Server Components owners.
155165
}
156166
}
157167
}

‎packages/react-reconciler/src/ReactCurrentFiber.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactInternalTypes';
1111

1212
import ReactSharedInternals from 'shared/ReactSharedInternals';
1313
import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
14-
import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
14+
import {getComponentNameFromOwner} from 'react-reconciler/src/getComponentNameFromFiber';
1515

1616
const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
1717

@@ -24,8 +24,8 @@ export function getCurrentFiberOwnerNameInDevOrNull(): string | null {
2424
return null;
2525
}
2626
const owner = current._debugOwner;
27-
if (owner !== null && typeof owner !== 'undefined') {
28-
return getComponentNameFromFiber(owner);
27+
if (owner != null) {
28+
return getComponentNameFromOwner(owner);
2929
}
3030
}
3131
return null;

‎packages/react-reconciler/src/ReactFiber.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ import {
6868
TracingMarkerComponent,
6969
} from './ReactWorkTags';
7070
import {OffscreenVisible} from './ReactFiberActivityComponent';
71-
import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
71+
import {getComponentNameFromOwner} from 'react-reconciler/src/getComponentNameFromFiber';
7272
import {isDevToolsPresent} from './ReactFiberDevToolsHook';
7373
import {
7474
resolveClassForHotReloading,
@@ -110,6 +110,7 @@ import {
110110
attachOffscreenInstance,
111111
} from './ReactFiberCommitWork';
112112
import {getHostContext} from './ReactFiberHostContext';
113+
import type {ReactComponentInfo} from '../../shared/ReactTypes';
113114

114115
export type {Fiber};
115116

@@ -475,7 +476,7 @@ export function createFiberFromTypeAndProps(
475476
type: any, // React$ElementType
476477
key: null | string,
477478
pendingProps: any,
478-
owner: null | Fiber,
479+
owner: null | ReactComponentInfo | Fiber,
479480
mode: TypeOfMode,
480481
lanes: Lanes,
481482
): Fiber {
@@ -610,7 +611,7 @@ export function createFiberFromTypeAndProps(
610611
"it's defined in, or you might have mixed up default and " +
611612
'named imports.';
612613
}
613-
const ownerName = owner ? getComponentNameFromFiber(owner) : null;
614+
const ownerName = owner ? getComponentNameFromOwner(owner) : null;
614615
if (ownerName) {
615616
info += '\n\nCheck the render method of `' + ownerName + '`.';
616617
}

‎packages/react-reconciler/src/ReactFiberComponentStack.js

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,29 +29,24 @@ import {
2929
} from 'shared/ReactComponentStackFrame';
3030

3131
function describeFiber(fiber: Fiber): string {
32-
const owner: null | Function = __DEV__
33-
? fiber._debugOwner
34-
? fiber._debugOwner.type
35-
: null
36-
: null;
3732
switch (fiber.tag) {
3833
case HostHoistable:
3934
case HostSingleton:
4035
case HostComponent:
41-
return describeBuiltInComponentFrame(fiber.type, owner);
36+
return describeBuiltInComponentFrame(fiber.type);
4237
case LazyComponent:
43-
return describeBuiltInComponentFrame('Lazy', owner);
38+
return describeBuiltInComponentFrame('Lazy');
4439
case SuspenseComponent:
45-
return describeBuiltInComponentFrame('Suspense', owner);
40+
return describeBuiltInComponentFrame('Suspense');
4641
case SuspenseListComponent:
47-
return describeBuiltInComponentFrame('SuspenseList', owner);
42+
return describeBuiltInComponentFrame('SuspenseList');
4843
case FunctionComponent:
4944
case SimpleMemoComponent:
50-
return describeFunctionComponentFrame(fiber.type, owner);
45+
return describeFunctionComponentFrame(fiber.type);
5146
case ForwardRef:
52-
return describeFunctionComponentFrame(fiber.type.render, owner);
47+
return describeFunctionComponentFrame(fiber.type.render);
5348
case ClassComponent:
54-
return describeClassComponentFrame(fiber.type, owner);
49+
return describeClassComponentFrame(fiber.type);
5550
default:
5651
return '';
5752
}

‎packages/react-reconciler/src/ReactInternalTypes.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type {
1515
Usable,
1616
ReactFormState,
1717
Awaited,
18+
ReactComponentInfo,
1819
ReactDebugInfo,
1920
} from 'shared/ReactTypes';
2021
import type {WorkTag} from './ReactWorkTags';
@@ -193,7 +194,7 @@ export type Fiber = {
193194
// __DEV__ only
194195

195196
_debugInfo?: ReactDebugInfo | null,
196-
_debugOwner?: Fiber | null,
197+
_debugOwner?: ReactComponentInfo | Fiber | null,
197198
_debugIsCurrentlyTiming?: boolean,
198199
_debugNeedsRemount?: boolean,
199200

0 commit comments

Comments
 (0)