OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Use the JSX of the ViewTransition as the Stack Trace of "Animating" Traces (#34539)

Browse Source 
Stacked on #34538.

Track the Task of the first ViewTransition that we detected as
animating. Use this as the Task as "Starting Animation", "Animating"
etc. That way you can see which ViewTransition spawned the Animation.
Although it's likely to be multiple.

<img width="757" height="393" alt="Screenshot 2025-09-19 at 10 19 18 PM"
src="https://github.com/user-attachments/assets/a6cdcb89-bd02-40ec-b3c3-11121c29e892"
/>
This commit is contained in:
Sebastian Markbåge 2025-09-20 11:11:27 -04:00 committed by GitHub
parent b4fe1e6c7e
commit d91d28c8ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/react-reconciler/src/ReactFiberCommitViewTransitions.js vendored
View File

@ -39,6 +39,11 @@ import {
getViewTransitionName,
getViewTransitionClassName,
} from './ReactFiberViewTransitionComponent';
import {trackAnimatingTask} from './ReactProfilerTimer';
import {
enableComponentPerformanceTrack,
enableProfilerTimer,
} from 'shared/ReactFeatureFlags';
export let shouldStartViewTransition: boolean = false;
@ -101,21 +106,27 @@ export function popViewTransitionCancelableScope(
let viewTransitionHostInstanceIdx = 0;
export function applyViewTransitionToHostInstances(
child: null | Fiber,
function applyViewTransitionToHostInstances(
fiber: Fiber,
name: string,
className: ?string,
collectMeasurements: null | Array<InstanceMeasurement>,
stopAtNestedViewTransitions: boolean,
): boolean {
viewTransitionHostInstanceIdx = 0;
return applyViewTransitionToHostInstancesRecursive(
child,
const inViewport = applyViewTransitionToHostInstancesRecursive(
fiber.child,
name,
className,
collectMeasurements,
stopAtNestedViewTransitions,
);
if (enableProfilerTimer && enableComponentPerformanceTrack && inViewport) {
if (fiber._debugTask != null) {
trackAnimatingTask(fiber._debugTask);
}
}
return inViewport;
}
function applyViewTransitionToHostInstancesRecursive(
@ -247,7 +258,7 @@ function commitAppearingPairViewTransitions(placement: Fiber): void {
// We found a new appearing view transition with the same name as this deletion.
// We'll transition between them.
const inViewport = applyViewTransitionToHostInstances(
child.child,
child,
name,
className,
null,
@ -284,7 +295,7 @@ export function commitEnterViewTransitions(
);
if (className !== 'none') {
const inViewport = applyViewTransitionToHostInstances(
placement.child,
placement,
name,
className,
null,
@ -355,7 +366,7 @@ function commitDeletedPairViewTransitions(deletion: Fiber): void {
if (className !== 'none') {
// We found a new appearing view transition with the same name as this deletion.
const inViewport = applyViewTransitionToHostInstances(
child.child,
child,
name,
className,
null,
@ -406,7 +417,7 @@ export function commitExitViewTransitions(deletion: Fiber): void {
);
if (className !== 'none') {
const inViewport = applyViewTransitionToHostInstances(
deletion.child,
deletion,
name,
className,
null,
@ -490,7 +501,7 @@ export function commitBeforeUpdateViewTransition(
return;
}
applyViewTransitionToHostInstances(
current.child,
current,
oldName,
className,
(current.memoizedState = []),
@ -518,7 +529,7 @@ export function commitNestedViewTransitions(changedParent: Fiber): void {
child.flags &= ~Update;
if (className !== 'none') {
applyViewTransitionToHostInstances(
child.child,
child,
name,
className,
(child.memoizedState = []),

32
packages/react-reconciler/src/ReactFiberWorkLoop.js vendored
View File

@ -324,6 +324,7 @@ import {
animatingLanes,
retryClampTime,
idleClampTime,
animatingTask,
} from './ReactProfilerTimer';
// DEV stuff
@ -1995,7 +1996,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
logAnimatingPhase(
blockingClampTime,
clampedRenderStartTime,
previousUpdateTask,
animatingTask,
);
}
logBlockingStart(
@ -2048,7 +2049,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
logAnimatingPhase(
transitionClampTime,
clampedRenderStartTime,
previousUpdateTask,
animatingTask,
);
}
logTransitionStart(
@ -2069,14 +2070,14 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
if (includesRetryLane(animatingLanes)) {
// If this lane is still animating, log the time from previous render finishing to now as animating.
setCurrentTrackFromLanes(SomeRetryLane);
logAnimatingPhase(retryClampTime, renderStartTime, previousUpdateTask);
logAnimatingPhase(retryClampTime, renderStartTime, animatingTask);
}
}
if (includesIdleGroupLanes(lanes)) {
if (includesIdleGroupLanes(animatingLanes)) {
// If this lane is still animating, log the time from previous render finishing to now as animating.
setCurrentTrackFromLanes(IdleLane);
logAnimatingPhase(idleClampTime, renderStartTime, previousUpdateTask);
logAnimatingPhase(idleClampTime, renderStartTime, animatingTask);
}
}
}
@ -3667,12 +3668,7 @@ function commitRoot(
enableProfilerTimer ? suspendedViewTransition : (null: any),
enableProfilerTimer
? // This callback fires after "pendingEffects" so we need to snapshot the arguments.
finishedViewTransition.bind(
null,
lanes,
// TODO: Use a ViewTransition Task
__DEV__ ? workInProgressUpdateTask : null,
)
finishedViewTransition.bind(null, lanes)
: (null: any),
);
} else {
@ -3712,15 +3708,13 @@ function suspendedViewTransition(reason: string): void {
}
}
function finishedViewTransition(
lanes: Lanes,
task: null | ConsoleTask, // DEV-only
): void {
function finishedViewTransition(lanes: Lanes): void {
if (enableProfilerTimer && enableComponentPerformanceTrack) {
if ((animatingLanes & lanes) === NoLanes) {
// Was already stopped by some other action or maybe other root.
return;
}
const task = animatingTask;
stopAnimating(lanes);
// If an affected track isn't in the middle of rendering or committing, log from the previous
// finished render until the end of the animation.
@ -3835,7 +3829,7 @@ function flushLayoutEffects(): void {
commitEndTime, // The start is the end of the first commit part.
commitStartTime, // The end is the start of the second commit part.
suspendedViewTransitionReason,
workInProgressUpdateTask, // TODO: Use a ViewTransition Task and this is not safe to read in this phase.
animatingTask,
);
}
}
@ -3938,7 +3932,7 @@ function flushSpawnedWork(): void {
startViewTransitionStartTime,
commitEndTime,
pendingDelayedCommitReason === ABORTED_VIEW_TRANSITION_COMMIT,
workInProgressUpdateTask, // TODO: Use a ViewTransition Task.
animatingTask,
);
if (pendingDelayedCommitReason !== ABORTED_VIEW_TRANSITION_COMMIT) {
pendingDelayedCommitReason = ANIMATION_STARTED_COMMIT;
@ -4440,11 +4434,7 @@ function flushPassiveEffectsImpl() {
passiveEffectStartTime = now();
if (pendingDelayedCommitReason === ANIMATION_STARTED_COMMIT) {
// The animation was started, so we've been animating since that happened.
logAnimatingPhase(
commitEndTime,
passiveEffectStartTime,
workInProgressUpdateTask, // TODO: Use a ViewTransition Task
);
logAnimatingPhase(commitEndTime, passiveEffectStartTime, animatingTask);
} else {
logPaintYieldPhase(
commitEndTime,

9
packages/react-reconciler/src/ReactProfilerTimer.js vendored
View File

@ -93,6 +93,7 @@ export let retryClampTime: number = -0;
export let idleClampTime: number = -0;
export let animatingLanes: Lanes = NoLanes;
export let animatingTask: null | ConsoleTask = null; // First ViewTransition applying an Animation.
export let yieldReason: SuspendedReason = (0: any);
export let yieldStartTime: number = -1.1; // The time when we yielded to the event loop
@ -601,8 +602,16 @@ export function transferActualDuration(fiber: Fiber): void {
export function startAnimating(lanes: Lanes): void {
animatingLanes |= lanes;
animatingTask = null;
}
export function stopAnimating(lanes: Lanes): void {
animatingLanes &= ~lanes;
animatingTask = null;
}
export function trackAnimatingTask(task: ConsoleTask): void {
if (animatingTask === null) {
animatingTask = task;
}
}