[Fiber] Mark error boundaries and commit phases when an error is thrown #31876
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
These are the only ones marked with PerformedWork atm anyway. This lets us customize the logging for each branch.
Ideally we'd be able to mark the component that errored but we don't commit the failed tree. In principle we could maybe walk the work in progress.
We also keep track of the errors and log those.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
facebook-github-bot
added
CLA Signed
React Core Team
sebmarkbage
force-pushed
the
markerrorboundaries
branch
from
7974bbc to
79621b3
Compare
sebmarkbage
force-pushed
the
markerrorboundaries
branch
from
79621b3 to
9334142
Compare
sebmarkbage
added a commit
that referenced
this pull request
Dec 28, 2024
This is similar to #31876 but for Server Components. It marks them as errored and puts the error message in the Summary properties. <img width="1511" alt="Screenshot 2024-12-20 at 5 05 35 PM" src="https://github.com/user-attachments/assets/92f11e42-0e23-41c7-bfd4-09effb25e024" /> This only looks at the current chunk for rejections. That means that there might still be promises deeper that rejected but it's only the immediate return value of the Server Component that's considered a rejection of the component itself.
rickhanlonii
approved these changes
Jan 2, 2025
| const name = getComponentNameFromFiber(fiber); | ||
| if (name === null) { | ||
| // Skip | ||
| return; |
There was a problem hiding this comment.
Might be good to include why we can skip this in the comment, seems like it should only be know for the Throw case?
There was a problem hiding this comment.
This is the same the render pass but I don't love this technique. It's just a way for things like internal Fibers to be excluded from DevTools. Like the HostRoot. We use this elsewhere for things like stack frames. It doesn't really actually make sense because like the internal Offscreen component can now sometimes be visible and they should probably have the name Activity at least the way the layering is set up now. We should figure out something more explicit.
| @@ -404,6 +429,24 @@ export function recordEffectDuration(fiber: Fiber): void { | |||
| } | |||
| } | |||
|
|
|||
| export function recordEffectError(errorInfo: CapturedValue<mixed>): void { | |||
| if (!enableProfilerTimer || !enableProfilerCommitHooks) { | |||
There was a problem hiding this comment.
Should this have a check for enableComponentPerformanceTrack? I don't know what all these flags do, but the calls above are flagged behind that and not enableProfilerCommitHooks
There was a problem hiding this comment.
It's a little unclear but if the other DevTools profiler wanted to use this information it could as long as enableProfilerCommitHooks was enabled. It's just not used today.
We should really probably just make sure that the enableProfilerCommitHooks flag is always gated by enableProfilerTimer. That way it can be always true. Since it's always true we can just remove and ship the enableProfilerCommitHooks flag to simplify things a bit.
Co-authored-by: Ricky <[email protected]>
github-actions bot
pushed a commit
that referenced
this pull request
Jan 2, 2025
…wn (#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]> DiffTrain build for [0de1233](0de1233)
github-actions bot
pushed a commit
that referenced
this pull request
Jan 2, 2025
…wn (#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]> DiffTrain build for [0de1233](0de1233)
github-actions bot
pushed a commit
to code/lib-react
that referenced
this pull request
Jan 2, 2025
…wn (facebook#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]> DiffTrain build for [0de1233](facebook@0de1233)
github-actions bot
pushed a commit
to code/lib-react
that referenced
this pull request
Jan 2, 2025
…wn (facebook#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]> DiffTrain build for [0de1233](facebook@0de1233)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This tracks commit phase errors and marks the component that errored as red. These also get the errors attached to the entry.
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.
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.