Skip to content

Commit e11bdcc

Browse files
author
Brian Vaughn
committed
Add Lane labels to scheduling profiler marks
This commit changes scheduling profiler marks from a format like "--schedule-render-1" to "--schedule-render-1-Sync" (where 1 is the numeric value of the Sync lane). This will enable the profiler itself to show more meaningful labels for updates and render work.
1 parent e2fd460 commit e11bdcc

File tree

5 files changed

+395
-70
lines changed

5 files changed

+395
-70
lines changed

‎packages/react-reconciler/src/ReactFiberLane.new.js‎

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import invariant from 'shared/invariant';
3939
import {
4040
enableCache,
4141
enableNonInterruptingNormalPri,
42+
enableSchedulingProfiler,
4243
} from 'shared/ReactFeatureFlags';
4344

4445
import {
@@ -85,10 +86,10 @@ export const SyncLane: Lane = /* */ 0b0000000000000000000
8586
export const SyncBatchedLane: Lane = /* */ 0b0000000000000000000000000000010;
8687

8788
export const InputDiscreteHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
88-
const InputDiscreteLane: Lanes = /* */ 0b0000000000000000000000000001000;
89+
export const InputDiscreteLane: Lanes = /* */ 0b0000000000000000000000000001000;
8990

9091
const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
91-
const InputContinuousLane: Lanes = /* */ 0b0000000000000000000000000100000;
92+
export const InputContinuousLane: Lanes = /* */ 0b0000000000000000000000000100000;
9293

9394
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
9495
export const DefaultLane: Lanes = /* */ 0b0000000000000000000000010000000;
@@ -127,6 +128,60 @@ const IdleLane: Lanes = /* */ 0b0100000000000000000
127128

128129
export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
129130

131+
// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
132+
// It should be kept in sync with the Lanes values above.
133+
export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
134+
if (enableSchedulingProfiler) {
135+
const labels = [];
136+
if (lanes & SyncLane) {
137+
labels.push('Sync');
138+
}
139+
if (lanes & SyncBatchedLane) {
140+
labels.push('SyncBatched');
141+
}
142+
if (lanes & InputDiscreteHydrationLane) {
143+
labels.push('InputDiscreteHydration');
144+
}
145+
if (lanes & InputDiscreteLane) {
146+
labels.push('InputDiscrete');
147+
}
148+
if (lanes & InputContinuousHydrationLane) {
149+
labels.push('InputContinuousHydration');
150+
}
151+
if (lanes & InputContinuousLane) {
152+
labels.push('InputContinuous');
153+
}
154+
if (lanes & DefaultHydrationLane) {
155+
labels.push('DefaultHydration');
156+
}
157+
if (lanes & DefaultLane) {
158+
labels.push('Default');
159+
}
160+
if (lanes & TransitionHydrationLane) {
161+
labels.push('TransitionHydration');
162+
}
163+
if (lanes & TransitionLanes) {
164+
labels.push('Transition(s)');
165+
}
166+
if (lanes & RetryLanes) {
167+
labels.push('Retry(s)');
168+
}
169+
if (lanes & SelectiveHydrationLane) {
170+
labels.push('SelectiveHydration');
171+
}
172+
if (lanes & IdleHydrationLane) {
173+
labels.push('IdleHydration');
174+
}
175+
if (lanes & IdleLane) {
176+
labels.push('Idle');
177+
}
178+
if (lanes & OffscreenLane) {
179+
labels.push('Offscreen');
180+
}
181+
return labels;
182+
}
183+
}
184+
130185
export const NoTimestamp = -1;
131186

132187
let currentUpdateLanePriority: LanePriority = NoLanePriority;

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

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import invariant from 'shared/invariant';
3939
import {
4040
enableCache,
4141
enableNonInterruptingNormalPri,
42+
enableSchedulingProfiler,
4243
} from 'shared/ReactFeatureFlags';
4344

4445
import {
@@ -85,10 +86,10 @@ export const SyncLane: Lane = /* */ 0b0000000000000000000
8586
export const SyncBatchedLane: Lane = /* */ 0b0000000000000000000000000000010;
8687

8788
export const InputDiscreteHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
88-
const InputDiscreteLane: Lanes = /* */ 0b0000000000000000000000000001000;
89+
export const InputDiscreteLane: Lanes = /* */ 0b0000000000000000000000000001000;
8990

9091
const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
91-
const InputContinuousLane: Lanes = /* */ 0b0000000000000000000000000100000;
92+
export const InputContinuousLane: Lanes = /* */ 0b0000000000000000000000000100000;
9293

9394
export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
9495
export const DefaultLane: Lanes = /* */ 0b0000000000000000000000010000000;
@@ -127,6 +128,60 @@ const IdleLane: Lanes = /* */ 0b0100000000000000000
127128

128129
export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
129130

131+
// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
132+
// It should be kept in sync with the Lanes values above.
133+
export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
134+
if (enableSchedulingProfiler) {
135+
const labels = [];
136+
if (lanes & SyncLane) {
137+
labels.push('Sync');
138+
}
139+
if (lanes & SyncBatchedLane) {
140+
labels.push('SyncBatched');
141+
}
142+
if (lanes & InputDiscreteHydrationLane) {
143+
labels.push('InputDiscreteHydration');
144+
}
145+
if (lanes & InputDiscreteLane) {
146+
labels.push('InputDiscrete');
147+
}
148+
if (lanes & InputContinuousHydrationLane) {
149+
labels.push('InputContinuousHydration');
150+
}
151+
if (lanes & InputContinuousLane) {
152+
labels.push('InputContinuous');
153+
}
154+
if (lanes & DefaultHydrationLane) {
155+
labels.push('DefaultHydration');
156+
}
157+
if (lanes & DefaultLane) {
158+
labels.push('Default');
159+
}
160+
if (lanes & TransitionHydrationLane) {
161+
labels.push('TransitionHydration');
162+
}
163+
if (lanes & TransitionLanes) {
164+
labels.push('Transition(s)');
165+
}
166+
if (lanes & RetryLanes) {
167+
labels.push('Retry(s)');
168+
}
169+
if (lanes & SelectiveHydrationLane) {
170+
labels.push('SelectiveHydration');
171+
}
172+
if (lanes & IdleHydrationLane) {
173+
labels.push('IdleHydration');
174+
}
175+
if (lanes & IdleLane) {
176+
labels.push('Idle');
177+
}
178+
if (lanes & OffscreenLane) {
179+
labels.push('Offscreen');
180+
}
181+
return labels;
182+
}
183+
}
184+
130185
export const NoTimestamp = -1;
131186

132187
let currentUpdateLanePriority: LanePriority = NoLanePriority;

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,20 @@ import type {Lane, Lanes} from './ReactFiberLane.old';
1111
import type {Fiber} from './ReactInternalTypes';
1212
import type {Wakeable} from 'shared/ReactTypes';
1313

14-
import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
14+
import {
15+
enableNewReconciler,
16+
enableSchedulingProfiler,
17+
} from 'shared/ReactFeatureFlags';
1518
import ReactVersion from 'shared/ReactVersion';
1619
import getComponentName from 'shared/getComponentName';
1720

21+
import {getLabelsForLanes as getLabelsForLanes_old} from 'react-reconciler/src/ReactFiberLane.old';
22+
import {getLabelsForLanes as getLabelsForLanes_new} from 'react-reconciler/src/ReactFiberLane.new';
23+
24+
const getLabelsForLanes = enableNewReconciler
25+
? getLabelsForLanes_new
26+
: getLabelsForLanes_old;
27+
1828
/**
1929
* If performance exists and supports the subset of the User Timing API that we
2030
* require.
@@ -49,8 +59,14 @@ if (enableSchedulingProfiler) {
4959
}
5060
}
5161

52-
function formatLanes(laneOrLanes: Lane | Lanes): string {
53-
return ((laneOrLanes: any): number).toString();
62+
export function formatLanes(laneOrLanes: Lane | Lanes): string {
63+
let labels = getLabelsForLanes(laneOrLanes);
64+
if (labels != null) {
65+
labels = labels.sort().join(',');
66+
} else {
67+
labels = '';
68+
}
69+
return `${laneOrLanes}-${labels}`;
5470
}
5571

5672
function markAndClear(name) {

0 commit comments

Comments
 (0)