Skip to content

[Fiber] Mark error boundaries and commit phases when an error is thrown #31876

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 5 commits into from
Jan 2, 2025
Merged

[Fiber] Mark error boundaries and commit phases when an error is thrown #31876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
262c163
Move logComponentRender into the branches
sebmarkbage Dec 20, 2024
aeb3c41
Mark error boundarys as errored when they catch an error
sebmarkbage Dec 20, 2024
ead40b2
Mark the component that errored during the commit phase
sebmarkbage Dec 20, 2024
9334142
Mark commit phase as errored if there were any errors within
sebmarkbage Dec 20, 2024
48f9d09
Life cycle to lifecycle
sebmarkbage Jan 2, 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
117 changes: 88 additions & 29 deletions packages/react-reconciler/src/ReactFiberCommitWork.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ import {
Cloned,
PerformedWork,
ForceClientRender,
DidCapture,
} from './ReactFiberFlags';
import {
commitStartTime,
Expand All @@ -107,14 +108,17 @@ import {
resetComponentEffectTimers,
pushComponentEffectStart,
popComponentEffectStart,
pushComponentEffectErrors,
popComponentEffectErrors,
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
} from './ReactProfilerTimer';
import {
logComponentRender,
logComponentErrored,
logComponentEffect,
logSuspenseBoundaryClientRendered,
} from './ReactFiberPerformanceTrack';
import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
import {deferHiddenCallbacks} from './ReactFiberClassUpdateQueue';
Expand Down Expand Up @@ -395,7 +399,7 @@ function commitLayoutEffectOnFiber(
committedLanes: Lanes,
): void {
const prevEffectStart = pushComponentEffectStart();

const prevEffectErrors = pushComponentEffectErrors();
// When updating this function, also update reappearLayoutEffects, which does
// most of the same things when an offscreen tree goes from hidden -> visible.
const flags = finishedWork.flags;
Expand Down Expand Up @@ -631,10 +635,12 @@ function commitLayoutEffectOnFiber(
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
);
}

popComponentEffectStart(prevEffectStart);
popComponentEffectErrors(prevEffectErrors);
}

function abortRootTransitions(
Expand Down Expand Up @@ -1627,7 +1633,7 @@ function commitMutationEffectsOnFiber(
lanes: Lanes,
) {
const prevEffectStart = pushComponentEffectStart();

const prevEffectErrors = pushComponentEffectErrors();
const current = finishedWork.alternate;
const flags = finishedWork.flags;

Expand Down Expand Up @@ -2136,10 +2142,12 @@ function commitMutationEffectsOnFiber(
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
);
}

popComponentEffectStart(prevEffectStart);
popComponentEffectErrors(prevEffectErrors);
}

function commitReconciliationEffects(finishedWork: Fiber) {
Expand Down Expand Up @@ -2212,7 +2220,7 @@ function recursivelyTraverseLayoutEffects(

export function disappearLayoutEffects(finishedWork: Fiber) {
const prevEffectStart = pushComponentEffectStart();

const prevEffectErrors = pushComponentEffectErrors();
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
Expand Down Expand Up @@ -2285,10 +2293,12 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
);
}

popComponentEffectStart(prevEffectStart);
popComponentEffectErrors(prevEffectErrors);
}

function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
Expand All @@ -2310,7 +2320,7 @@ export function reappearLayoutEffects(
includeWorkInProgressEffects: boolean,
) {
const prevEffectStart = pushComponentEffectStart();

const prevEffectErrors = pushComponentEffectErrors();
// Turn on layout effects in a tree that previously disappeared.
const flags = finishedWork.flags;
switch (finishedWork.tag) {
Expand Down Expand Up @@ -2461,10 +2471,12 @@ export function reappearLayoutEffects(
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
);
}

popComponentEffectStart(prevEffectStart);
popComponentEffectErrors(prevEffectErrors);
}

function recursivelyTraverseReappearLayoutEffects(
Expand Down Expand Up @@ -2701,26 +2713,7 @@ function commitPassiveMountOnFiber(
endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
): void {
const prevEffectStart = pushComponentEffectStart();

// If this component rendered in Profiling mode (DEV or in Profiler component) then log its
// render time. We do this after the fact in the passive effect to avoid the overhead of this
// getting in the way of the render characteristics and avoid the overhead of unwinding
// uncommitted renders.
if (
enableProfilerTimer &&
enableComponentPerformanceTrack &&
(finishedWork.mode & ProfileMode) !== NoMode &&
((finishedWork.actualStartTime: any): number) > 0 &&
(finishedWork.flags & PerformedWork) !== NoFlags
) {
logComponentRender(
finishedWork,
((finishedWork.actualStartTime: any): number),
endTime,
inHydratedSubtree,
);
}

const prevEffectErrors = pushComponentEffectErrors();
// When updating this function, also update reconnectPassiveEffects, which does
// most of the same things when an offscreen tree goes from hidden -> visible,
// or when toggling effects inside a hidden tree.
Expand All @@ -2729,6 +2722,25 @@ function commitPassiveMountOnFiber(
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: {
// If this component rendered in Profiling mode (DEV or in Profiler component) then log its
// render time. We do this after the fact in the passive effect to avoid the overhead of this
// getting in the way of the render characteristics and avoid the overhead of unwinding
// uncommitted renders.
if (
enableProfilerTimer &&
enableComponentPerformanceTrack &&
(finishedWork.mode & ProfileMode) !== NoMode &&
((finishedWork.actualStartTime: any): number) > 0 &&
(finishedWork.flags & PerformedWork) !== NoFlags
) {
logComponentRender(
finishedWork,
((finishedWork.actualStartTime: any): number),
endTime,
inHydratedSubtree,
);
}

recursivelyTraversePassiveMountEffects(
finishedRoot,
finishedWork,
Expand All @@ -2744,6 +2756,45 @@ function commitPassiveMountOnFiber(
}
break;
}
case ClassComponent: {
// If this component rendered in Profiling mode (DEV or in Profiler component) then log its
// render time. We do this after the fact in the passive effect to avoid the overhead of this
// getting in the way of the render characteristics and avoid the overhead of unwinding
// uncommitted renders.
if (
enableProfilerTimer &&
enableComponentPerformanceTrack &&
(finishedWork.mode & ProfileMode) !== NoMode &&
((finishedWork.actualStartTime: any): number) > 0
) {
if ((finishedWork.flags & DidCapture) !== NoFlags) {
logComponentErrored(
finishedWork,
((finishedWork.actualStartTime: any): number),
endTime,
// TODO: The captured values are all hidden inside the updater/callback closures so
// we can't get to the errors but they're there so we should be able to log them.
[],
);
} else if ((finishedWork.flags & PerformedWork) !== NoFlags) {
logComponentRender(
finishedWork,
((finishedWork.actualStartTime: any): number),
endTime,
inHydratedSubtree,
);
}
}

recursivelyTraversePassiveMountEffects(
finishedRoot,
finishedWork,
committedLanes,
committedTransitions,
endTime,
);
break;
}
case HostRoot: {
const prevEffectDuration = pushNestedEffectDurations();

Expand Down Expand Up @@ -2891,7 +2942,7 @@ function commitPassiveMountOnFiber(
// rendered boundary. Such as postpone.
if (hydrationErrors !== null) {
const startTime: number = (finishedWork.actualStartTime: any);
logSuspenseBoundaryClientRendered(
logComponentErrored(
finishedWork,
startTime,
endTime,
Expand Down Expand Up @@ -3074,10 +3125,12 @@ function commitPassiveMountOnFiber(
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
);
}

popComponentEffectStart(prevEffectStart);
popComponentEffectErrors(prevEffectErrors);
}

function recursivelyTraverseReconnectPassiveEffects(
Expand Down Expand Up @@ -3137,7 +3190,7 @@ export function reconnectPassiveEffects(
endTime: number, // Profiling-only. The start time of the next Fiber or root completion.
) {
const prevEffectStart = pushComponentEffectStart();

const prevEffectErrors = pushComponentEffectErrors();
// If this component rendered in Profiling mode (DEV or in Profiler component) then log its
// render time. We do this after the fact in the passive effect to avoid the overhead of this
// getting in the way of the render characteristics and avoid the overhead of unwinding
Expand Down Expand Up @@ -3331,10 +3384,12 @@ export function reconnectPassiveEffects(
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
);
}

popComponentEffectStart(prevEffectStart);
popComponentEffectErrors(prevEffectErrors);
}

function recursivelyTraverseAtomicPassiveEffects(
Expand Down Expand Up @@ -3611,7 +3666,7 @@ function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {

function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
const prevEffectStart = pushComponentEffectStart();

const prevEffectErrors = pushComponentEffectErrors();
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
Expand Down Expand Up @@ -3696,10 +3751,12 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
);
}

popComponentEffectStart(prevEffectStart);
popComponentEffectErrors(prevEffectErrors);
}

function recursivelyTraverseDisconnectPassiveEffects(parentFiber: Fiber): void {
Expand Down Expand Up @@ -3819,7 +3876,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
nearestMountedAncestor: Fiber | null,
): void {
const prevEffectStart = pushComponentEffectStart();

const prevEffectErrors = pushComponentEffectErrors();
switch (current.tag) {
case FunctionComponent:
case ForwardRef:
Expand Down Expand Up @@ -3946,10 +4003,12 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
componentEffectStartTime,
componentEffectEndTime,
componentEffectDuration,
componentEffectErrors,
);
}

popComponentEffectStart(prevEffectStart);
popComponentEffectErrors(prevEffectErrors);
}

export function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
Expand Down
Loading
Loading