Skip to content

Commit 1425fcb

Browse files
author
Brian Vaughn
authored
Re-enabled DebugTracing feature for old reconciler fork (facebook#19161)
* Re-enabled DebugTracing feature for old reconciler fork It was temporarily removed by @sebmarkbage via PR facebook#18697. Newly re-added tracing is simplified, since the lane(s) data type does not require the (lossy) conversion between priority and expiration time values. @sebmarkbage mentioned that he removed this because it might get in the way of his planned discrete/sync refactor. I'm not sure if that concern still applies, but just in case- I have only re-added it to the old reconciler fork for now. * Force Code Sandbox CI to re-run
1 parent 0836f62 commit 1425fcb

File tree

7 files changed

+187
-45
lines changed

7 files changed

+187
-45
lines changed

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

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

10+
import type {Lane, Lanes} from './ReactFiberLane';
1011
import type {Wakeable} from 'shared/ReactTypes';
1112

1213
import {enableDebugTracing} from 'shared/ReactFeatureFlags';
@@ -17,6 +18,10 @@ let nativeConsoleLog: null | Function = null;
1718
const pendingGroupArgs: Array<any> = [];
1819
let printedGroupIndex: number = -1;
1920

21+
function formatLanes(laneOrLanes: Lane | Lanes): string {
22+
return '0b' + (laneOrLanes: any).toString(2).padStart(31, '0');
23+
}
24+
2025
function group(...groupArgs): void {
2126
pendingGroupArgs.push(groupArgs);
2227

@@ -57,11 +62,11 @@ function log(...logArgs): void {
5762
const REACT_LOGO_STYLE =
5863
'background-color: #20232a; color: #61dafb; padding: 0 2px;';
5964

60-
export function logCommitStarted(priorityLabel: string): void {
65+
export function logCommitStarted(lanes: Lanes): void {
6166
if (__DEV__) {
6267
if (enableDebugTracing) {
6368
group(
64-
`%c⚛️%c commit%c (priority: ${priorityLabel})`,
69+
`%c⚛️%c commit%c (${formatLanes(lanes)})`,
6570
REACT_LOGO_STYLE,
6671
'',
6772
'font-weight: normal;',
@@ -128,11 +133,11 @@ export function logComponentSuspended(
128133
}
129134
}
130135

131-
export function logLayoutEffectsStarted(priorityLabel: string): void {
136+
export function logLayoutEffectsStarted(lanes: Lanes): void {
132137
if (__DEV__) {
133138
if (enableDebugTracing) {
134139
group(
135-
`%c⚛️%c layout effects%c (priority: ${priorityLabel})`,
140+
`%c⚛️%c layout effects%c (${formatLanes(lanes)})`,
136141
REACT_LOGO_STYLE,
137142
'',
138143
'font-weight: normal;',
@@ -149,11 +154,11 @@ export function logLayoutEffectsStopped(): void {
149154
}
150155
}
151156

152-
export function logPassiveEffectsStarted(priorityLabel: string): void {
157+
export function logPassiveEffectsStarted(lanes: Lanes): void {
153158
if (__DEV__) {
154159
if (enableDebugTracing) {
155160
group(
156-
`%c⚛️%c passive effects%c (priority: ${priorityLabel})`,
161+
`%c⚛️%c passive effects%c (${formatLanes(lanes)})`,
157162
REACT_LOGO_STYLE,
158163
'',
159164
'font-weight: normal;',
@@ -170,11 +175,11 @@ export function logPassiveEffectsStopped(): void {
170175
}
171176
}
172177

173-
export function logRenderStarted(priorityLabel: string): void {
178+
export function logRenderStarted(lanes: Lanes): void {
174179
if (__DEV__) {
175180
if (enableDebugTracing) {
176181
group(
177-
`%c⚛️%c render%c (priority: ${priorityLabel})`,
182+
`%c⚛️%c render%c (${formatLanes(lanes)})`,
178183
REACT_LOGO_STYLE,
179184
'',
180185
'font-weight: normal;',
@@ -193,12 +198,12 @@ export function logRenderStopped(): void {
193198

194199
export function logForceUpdateScheduled(
195200
componentName: string,
196-
priorityLabel: string,
201+
lane: Lane,
197202
): void {
198203
if (__DEV__) {
199204
if (enableDebugTracing) {
200205
log(
201-
`%c⚛️%c ${componentName} forced update %c(priority: ${priorityLabel})`,
206+
`%c⚛️%c ${componentName} forced update %c(${formatLanes(lane)})`,
202207
REACT_LOGO_STYLE,
203208
'color: #db2e1f; font-weight: bold;',
204209
'',
@@ -209,13 +214,13 @@ export function logForceUpdateScheduled(
209214

210215
export function logStateUpdateScheduled(
211216
componentName: string,
212-
priorityLabel: string,
217+
lane: Lane,
213218
payloadOrAction: any,
214219
): void {
215220
if (__DEV__) {
216221
if (enableDebugTracing) {
217222
log(
218-
`%c⚛️%c ${componentName} updated state %c(priority: ${priorityLabel})`,
223+
`%c⚛️%c ${componentName} updated state %c(${formatLanes(lane)})`,
219224
REACT_LOGO_STYLE,
220225
'color: #01a252; font-weight: bold;',
221226
'',

‎packages/react-reconciler/src/ReactFiberClassComponent.old.js

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {Update, Snapshot} from './ReactSideEffectTags';
1616
import {
1717
debugRenderPhaseSideEffectsForStrictMode,
1818
disableLegacyContext,
19+
enableDebugTracing,
1920
warnAboutDeprecatedLifecycles,
2021
} from 'shared/ReactFeatureFlags';
2122
import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
@@ -27,7 +28,7 @@ import invariant from 'shared/invariant';
2728
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
2829

2930
import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
30-
import {StrictMode} from './ReactTypeOfMode';
31+
import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
3132

3233
import {
3334
enqueueUpdate,
@@ -55,6 +56,7 @@ import {
5556
scheduleUpdateOnFiber,
5657
} from './ReactFiberWorkLoop.old';
5758
import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
59+
import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
5860

5961
import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
6062

@@ -203,6 +205,15 @@ const classComponentUpdater = {
203205

204206
enqueueUpdate(fiber, update);
205207
scheduleUpdateOnFiber(fiber, lane, eventTime);
208+
209+
if (__DEV__) {
210+
if (enableDebugTracing) {
211+
if (fiber.mode & DebugTracingMode) {
212+
const name = getComponentName(fiber.type) || 'Unknown';
213+
logStateUpdateScheduled(name, lane, payload);
214+
}
215+
}
216+
}
206217
},
207218
enqueueReplaceState(inst, payload, callback) {
208219
const fiber = getInstance(inst);
@@ -223,6 +234,15 @@ const classComponentUpdater = {
223234

224235
enqueueUpdate(fiber, update);
225236
scheduleUpdateOnFiber(fiber, lane, eventTime);
237+
238+
if (__DEV__) {
239+
if (enableDebugTracing) {
240+
if (fiber.mode & DebugTracingMode) {
241+
const name = getComponentName(fiber.type) || 'Unknown';
242+
logStateUpdateScheduled(name, lane, payload);
243+
}
244+
}
245+
}
226246
},
227247
enqueueForceUpdate(inst, callback) {
228248
const fiber = getInstance(inst);
@@ -242,6 +262,15 @@ const classComponentUpdater = {
242262

243263
enqueueUpdate(fiber, update);
244264
scheduleUpdateOnFiber(fiber, lane, eventTime);
265+
266+
if (__DEV__) {
267+
if (enableDebugTracing) {
268+
if (fiber.mode & DebugTracingMode) {
269+
const name = getComponentName(fiber.type) || 'Unknown';
270+
logForceUpdateScheduled(name, lane);
271+
}
272+
}
273+
}
245274
},
246275
};
247276

‎packages/react-reconciler/src/ReactFiberHooks.old.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,12 @@ import type {FiberRoot} from './ReactInternalTypes';
2424
import type {OpaqueIDType} from './ReactFiberHostConfig';
2525

2626
import ReactSharedInternals from 'shared/ReactSharedInternals';
27-
import {enableNewReconciler} from 'shared/ReactFeatureFlags';
27+
import {
28+
enableDebugTracing,
29+
enableNewReconciler,
30+
} from 'shared/ReactFeatureFlags';
2831

29-
import {NoMode, BlockingMode} from './ReactTypeOfMode';
32+
import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
3033
import {
3134
NoLane,
3235
NoLanes,
@@ -83,6 +86,7 @@ import {
8386
warnAboutMultipleRenderersDEV,
8487
} from './ReactMutableSource.old';
8588
import {getIsRendering} from './ReactCurrentFiber';
89+
import {logStateUpdateScheduled} from './DebugTracing';
8690

8791
const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
8892

@@ -1737,6 +1741,15 @@ function dispatchAction<S, A>(
17371741
}
17381742
scheduleUpdateOnFiber(fiber, lane, eventTime);
17391743
}
1744+
1745+
if (__DEV__) {
1746+
if (enableDebugTracing) {
1747+
if (fiber.mode & DebugTracingMode) {
1748+
const name = getComponentName(fiber.type) || 'Unknown';
1749+
logStateUpdateScheduled(name, lane, action);
1750+
}
1751+
}
1752+
}
17401753
}
17411754

17421755
export const ContextOnlyDispatcher: Dispatcher = {

‎packages/react-reconciler/src/ReactFiberThrow.old.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ import {
3030
LifecycleEffectMask,
3131
} from './ReactSideEffectTags';
3232
import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
33-
import {NoMode, BlockingMode} from './ReactTypeOfMode';
33+
import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
34+
import {enableDebugTracing} from 'shared/ReactFeatureFlags';
3435
import {createCapturedValue} from './ReactCapturedValue';
3536
import {
3637
enqueueCapturedUpdate,
@@ -53,6 +54,7 @@ import {
5354
pingSuspendedRoot,
5455
} from './ReactFiberWorkLoop.old';
5556
import {logCapturedError} from './ReactFiberErrorLogger';
57+
import {logComponentSuspended} from './DebugTracing';
5658

5759
import {
5860
SyncLane,
@@ -189,6 +191,15 @@ function throwException(
189191
// This is a wakeable.
190192
const wakeable: Wakeable = (value: any);
191193

194+
if (__DEV__) {
195+
if (enableDebugTracing) {
196+
if (sourceFiber.mode & DebugTracingMode) {
197+
const name = getComponentName(sourceFiber.type) || 'Unknown';
198+
logComponentSuspended(name, wakeable);
199+
}
200+
}
201+
}
202+
192203
if ((sourceFiber.mode & BlockingMode) === NoMode) {
193204
// Reset the memoizedState to what it was before we attempted
194205
// to render it.

0 commit comments

Comments
 (0)