Skip to content

Log Performance Track Entries for View Transitions #34510

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Sep 17, 2025
Merged

Log Performance Track Entries for View Transitions #34510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e69baba
Clamp start times to simplify logic
sebmarkbage Sep 17, 2025
13d7460
Update clamp time when logging the event start time
sebmarkbage Sep 17, 2025
747deef
Update test
sebmarkbage Sep 17, 2025
8e25919
Move commit phase logging to end of layout effects
sebmarkbage Sep 16, 2025
a10c239
Log the time from when we commit to when the startViewTransition is r…
sebmarkbage Sep 16, 2025
7f6330d
Track state for whether a flush was due to aborting a view transition…
sebmarkbage Sep 16, 2025
c89d004
Log interrupted commit when we haven't reached the flushSpawnedWork b…
sebmarkbage Sep 16, 2025
c9a7932
Stash
sebmarkbage Sep 16, 2025
9eb4842
Log the gap before the passive effects as animating
sebmarkbage Sep 16, 2025
7cc3919
Don't mark as delayed if we started or aborted an animation
sebmarkbage Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 137 additions & 25 deletions packages/react-reconciler/src/ReactFiberPerformanceTrack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -636,38 +636,52 @@ export function logBlockingStart(
): void {
if (supportsUserTiming) {
currentTrack = 'Blocking';
// Clamp start times
if (updateTime > 0) {
if (updateTime > renderStartTime) {
updateTime = renderStartTime;
}
} else {
updateTime = renderStartTime;
}
if (eventTime > 0) {
if (eventTime > updateTime) {
eventTime = updateTime;
}
} else {
eventTime = updateTime;
}
// If a blocking update was spawned within render or an effect, that's considered a cascading render.
// If you have a second blocking update within the same event, that suggests multiple flushSync or
// setState in a microtask which is also considered a cascade.
const eventEndTime = updateTime > 0 ? updateTime : renderStartTime;
if (eventTime > 0 && eventType !== null && eventEndTime > eventTime) {
if (eventType !== null && updateTime > eventTime) {
// Log the time from the event timeStamp until we called setState.
const color = eventIsRepeat ? 'secondary-light' : 'warning';
if (__DEV__ && debugTask) {
debugTask.run(
// $FlowFixMe[method-unbinding]
console.timeStamp.bind(
console,
eventIsRepeat ? '' : 'Event: ' + eventType,
eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
eventTime,
eventEndTime,
updateTime,
currentTrack,
LANES_TRACK_GROUP,
color,
),
);
} else {
console.timeStamp(
eventIsRepeat ? '' : 'Event: ' + eventType,
eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
eventTime,
eventEndTime,
updateTime,
currentTrack,
LANES_TRACK_GROUP,
color,
);
}
}
if (updateTime > 0 && renderStartTime > updateTime) {
if (renderStartTime > updateTime) {
// Log the time from when we called setState until we started rendering.
const color = isSpawnedUpdate
? 'error'
Expand Down Expand Up @@ -739,36 +753,56 @@ export function logTransitionStart(
): void {
if (supportsUserTiming) {
currentTrack = 'Transition';
const eventEndTime =
startTime > 0 ? startTime : updateTime > 0 ? updateTime : renderStartTime;
if (eventTime > 0 && eventEndTime > eventTime && eventType !== null) {
// Clamp start times
if (updateTime > 0) {
if (updateTime > renderStartTime) {
updateTime = renderStartTime;
}
} else {
updateTime = renderStartTime;
}
if (startTime > 0) {
if (startTime > updateTime) {
startTime = updateTime;
}
} else {
startTime = updateTime;
}
if (eventTime > 0) {
if (eventTime > startTime) {
eventTime = startTime;
}
} else {
eventTime = startTime;
}

if (startTime > eventTime && eventType !== null) {
// Log the time from the event timeStamp until we started a transition.
const color = eventIsRepeat ? 'secondary-light' : 'warning';
if (__DEV__ && debugTask) {
debugTask.run(
console.timeStamp.bind(
console,
eventIsRepeat ? '' : 'Event: ' + eventType,
eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
eventTime,
eventEndTime,
startTime,
currentTrack,
LANES_TRACK_GROUP,
color,
),
);
} else {
console.timeStamp(
eventIsRepeat ? '' : 'Event: ' + eventType,
eventIsRepeat ? 'Consecutive' : 'Event: ' + eventType,
eventTime,
eventEndTime,
startTime,
currentTrack,
LANES_TRACK_GROUP,
color,
);
}
}
const startEndTime = updateTime > 0 ? updateTime : renderStartTime;
if (startTime > 0 && startEndTime > startTime) {
if (updateTime > startTime) {
// Log the time from when we started an async transition until we called setState or started rendering.
// TODO: Ideally this would use the debugTask of the startTransition call perhaps.
if (__DEV__ && debugTask) {
Expand All @@ -778,7 +812,7 @@ export function logTransitionStart(
console,
'Action',
startTime,
startEndTime,
updateTime,
currentTrack,
LANES_TRACK_GROUP,
'primary-dark',
Expand All @@ -788,14 +822,14 @@ export function logTransitionStart(
console.timeStamp(
'Action',
startTime,
startEndTime,
updateTime,
currentTrack,
LANES_TRACK_GROUP,
'primary-dark',
);
}
}
if (updateTime > 0 && renderStartTime > updateTime) {
if (renderStartTime > updateTime) {
// Log the time from when we called setState until we started rendering.
const label = isPingedUpdate
? 'Promise Resolved'
Expand Down Expand Up @@ -1286,6 +1320,7 @@ export function logCommitPhase(
startTime: number,
endTime: number,
errors: null | Array<CapturedValue<mixed>>,
abortedViewTransition: boolean,
debugTask: null | ConsoleTask,
): void {
if (errors !== null) {
Expand All @@ -1301,22 +1336,24 @@ export function logCommitPhase(
// $FlowFixMe[method-unbinding]
console.timeStamp.bind(
console,
'Commit',
abortedViewTransition
? 'Commit Interrupted View Transition'
: 'Commit',
startTime,
endTime,
currentTrack,
LANES_TRACK_GROUP,
'secondary-dark',
abortedViewTransition ? 'error' : 'secondary-dark',
),
);
} else {
console.timeStamp(
'Commit',
abortedViewTransition ? 'Commit Interrupted View Transition' : 'Commit',
startTime,
endTime,
currentTrack,
LANES_TRACK_GROUP,
'secondary-dark',
abortedViewTransition ? 'error' : 'secondary-dark',
);
}
}
Expand All @@ -1337,7 +1374,7 @@ export function logPaintYieldPhase(
// $FlowFixMe[method-unbinding]
console.timeStamp.bind(
console,
delayedUntilPaint ? 'Waiting for Paint' : '',
delayedUntilPaint ? 'Waiting for Paint' : 'Waiting',
startTime,
endTime,
currentTrack,
Expand All @@ -1347,7 +1384,7 @@ export function logPaintYieldPhase(
);
} else {
console.timeStamp(
delayedUntilPaint ? 'Waiting for Paint' : '',
delayedUntilPaint ? 'Waiting for Paint' : 'Waiting',
startTime,
endTime,
currentTrack,
Expand All @@ -1358,6 +1395,81 @@ export function logPaintYieldPhase(
}
}

export function logStartViewTransitionYieldPhase(
startTime: number,
endTime: number,
abortedViewTransition: boolean,
debugTask: null | ConsoleTask,
): void {
if (supportsUserTiming) {
if (endTime <= startTime) {
return;
}
if (__DEV__ && debugTask) {
debugTask.run(
// $FlowFixMe[method-unbinding]
console.timeStamp.bind(
console,
abortedViewTransition
? 'Interrupted View Transition'
: 'Starting Animation',
startTime,
endTime,
currentTrack,
LANES_TRACK_GROUP,
abortedViewTransition ? 'error' : 'secondary-light',
),
);
} else {
console.timeStamp(
abortedViewTransition
? 'Interrupted View Transition'
: 'Starting Animation',
startTime,
endTime,
currentTrack,
LANES_TRACK_GROUP,
abortedViewTransition ? ' error' : 'secondary-light',
);
}
}
}

export function logAnimatingPhase(
startTime: number,
endTime: number,
debugTask: null | ConsoleTask,
): void {
if (supportsUserTiming) {
if (endTime <= startTime) {
return;
}
if (__DEV__ && debugTask) {
debugTask.run(
// $FlowFixMe[method-unbinding]
console.timeStamp.bind(
console,
'Animating',
startTime,
endTime,
currentTrack,
LANES_TRACK_GROUP,
'secondary',
),
);
} else {
console.timeStamp(
'Animating',
startTime,
endTime,
currentTrack,
LANES_TRACK_GROUP,
'secondary',
);
}
}
}

export function logPassiveCommitPhase(
startTime: number,
endTime: number,
Expand Down
3 changes: 2 additions & 1 deletion packages/react-reconciler/src/ReactFiberRootScheduler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import {
NoContext,
RenderContext,
flushPendingEffects,
flushPendingEffectsDelayed,
getExecutionContext,
getWorkInProgressRoot,
getWorkInProgressRootRenderLanes,
Expand Down Expand Up @@ -542,7 +543,7 @@ function performWorkOnRootViaSchedulerTask(
// Flush any pending passive effects before deciding which lanes to work on,
// in case they schedule additional work.
const originalCallbackNode = root.callbackNode;
const didFlushPassiveEffects = flushPendingEffects(true);
const didFlushPassiveEffects = flushPendingEffectsDelayed();
if (didFlushPassiveEffects) {
// Something in the passive effect phase may have canceled the current task.
// Check if the task node for this root was changed.
Expand Down
Loading
Loading