dillon1000/react

Commit

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

This tracks commit phase errors and marks the component that errored as
red. These also get the errors attached to the entry.

<img width="1505" alt="Screenshot 2024-12-20 at 2 40 14 PM"
src="https://github.com/user-attachments/assets/cac3ead7-a024-4e33-ab27-2e95293c4299"
/>

In the render phase I just mark the Error Boundary that caught the
error. We don't have access to the actual error since it's locked behind
closures in the update queue. We could probably expose that someway.

<img width="949" alt="Screenshot 2024-12-20 at 1 49 05 PM"
src="https://github.com/user-attachments/assets/3032455d-d9f2-462b-9c07-7be23663ecd3"
/>

Follow ups:

Since the Error Boundary doesn't commit its attempted render, we don't
log those. If we did then maybe we should just mark the errored
component like I do for the commit phase. We could potentially walk the
list of errors and log the captured fibers and just log their entries as
children.

We could also potentially walk the uncommitted Fiber tree by stashing it
somewhere or even getting it from the alternate. This could be done on
Suspense boundaries too to track failed hydrations.

---------

Co-authored-by: Ricky <[email protected]>
Browse files
Changed paths4 files
First-parent comparison
M packages/react-reconciler/src/ReactFiberCommitWork.js ModifiedM packages/react-reconciler/src/ReactFiberPerformanceTrack.js ModifiedM packages/react-reconciler/src/ReactFiberWorkLoop.js ModifiedM packages/react-reconciler/src/ReactProfilerTimer.js Modified
Patch

Files changed

Rendering syntax-highlighted changes…