Rethrow errors from form actions #26689
Merged
Conversation
This file contains 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
This sets up the initial writing for form actions. The idea is that form actions are implicitly wrapped with `startTransition`. This does not handle async actions yet, so error and pending states don't work. That will be added in later steps.
facebook-github-bot
added
CLA Signed
React Core Team
acdlite
force-pushed
the
form-action-error-handling
branch
from
a775e83
to
128404f
Compare
|
Comparing: cc93a85...87a2258 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
acdlite
force-pushed
the
form-action-error-handling
branch
2 times, most recently
from
aeb3e94
to
34003e2
Compare
sophiebits
reviewed
Apr 21, 2023
| next: null, | ||
| }; | ||
|
|
||
| stateHook.queue = queue; |
There was a problem hiding this comment.
good catch, it's superfluous
acdlite
force-pushed
the
form-action-error-handling
branch
from
34003e2
to
ce6c12f
Compare
sebmarkbage
approved these changes
Apr 21, 2023
There was a problem hiding this comment.
The flag should probably check both enableAsyncActions and enableFormActions where it's relevant.
In terms of the naming on the react-reconciler side. Maybe this should be named something about the HostComponent being Transition aware rather than about Forms specifically.
startFormAction -> startHostTransition
StatefulHostComponent -> TransitionAwareHostComponent
Want to update the Flight fixture to use this instead of console.error for error handling?
sebmarkbage
reviewed
Apr 21, 2023
| if (!enableFormActions) { | ||
| return false; | ||
| } | ||
| return renderWithHooks( |
There was a problem hiding this comment.
This overrides updateQueue to null. That field is fine to reuse after diffInCommitPhase and outside of legacy mode hydration I think.
But just setting it to null here is probably also fine, since it's only used to carry data from complete phase to commit phase.
There was a problem hiding this comment.
I wonder what the specialized form of this looks like for this use case when we can ignore all the user space stuff like multiple render passes, DEV warnings. We don't even have to set the ReactCurrentDispatcher.
There was a problem hiding this comment.
Yeah I explored during that in this diff but it started getting out of hand so I punted on that for now. Maybe once there's 2 cases.
This is the next step toward full support for async form actions. Errors thrown inside form actions should cause the form to re-render and throw the error so it can be captured by an error boundary. The behavior is the same if the <form /> had an internal useTransition hook, which is pretty much exactly how we implement it, too. The first time an action is called, the form's HostComponent is "upgraded" to become stateful, by lazily mounting a list of hooks. The rest of the implementation for function components can be shared. Because the error handling behavior added in this commit is just using useTransition under-the-hood, it also handles pending states, too. However, this pending state can't be observed until we add a new hook for that purpose. I'll add this next.
acdlite
force-pushed
the
form-action-error-handling
branch
from
ce6c12f
to
87a2258
Compare
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Apr 21, 2023
Errors in form actions are now rethrown during render (facebook#26689), so we can handle the using an error boundary.
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Apr 21, 2023
Errors in form actions are now rethrown during render (facebook#26689), so we can handle the using an error boundary.
acdlite
added a commit
to acdlite/react
that referenced
this pull request
Apr 21, 2023
Errors in form actions are now rethrown during render (facebook#26689), so we can handle the using an error boundary.
acdlite
added a commit
that referenced
this pull request
Apr 21, 2023
Errors in form actions are now rethrown during render (#26689), so we can handle them using an error boundary.
kassens
pushed a commit
that referenced
this pull request
Apr 21, 2023
This is the next step toward full support for async form actions. Errors thrown inside form actions should cause the form to re-render and throw the error so it can be captured by an error boundary. The behavior is the same if the `<form />` had an internal useTransition hook, which is pretty much exactly how we implement it, too. The first time an action is called, the form's HostComponent is "upgraded" to become stateful, by lazily mounting a list of hooks. The rest of the implementation for function components can be shared. Because the error handling behavior added in this commit is just using useTransition under-the-hood, it also handles pending states, too. However, this pending state can't be observed until we add a new hook for that purpose. I'll add this next.
kassens
pushed a commit
that referenced
this pull request
Apr 21, 2023
Errors in form actions are now rethrown during render (#26689), so we can handle them using an error boundary.
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
This is the next step toward full support for async form actions. Errors thrown inside form actions should cause the form to re-render and throw the error so it can be captured by an error boundary. The behavior is the same if the `<form />` had an internal useTransition hook, which is pretty much exactly how we implement it, too. The first time an action is called, the form's HostComponent is "upgraded" to become stateful, by lazily mounting a list of hooks. The rest of the implementation for function components can be shared. Because the error handling behavior added in this commit is just using useTransition under-the-hood, it also handles pending states, too. However, this pending state can't be observed until we add a new hook for that purpose. I'll add this next.
EdisonVan
pushed a commit
to EdisonVan/react
that referenced
this pull request
Apr 15, 2024
Errors in form actions are now rethrown during render (facebook#26689), so we can handle them using an error boundary.
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
This is the next step toward full support for async form actions. Errors thrown inside form actions should cause the form to re-render and throw the error so it can be captured by an error boundary. The behavior is the same if the `<form />` had an internal useTransition hook, which is pretty much exactly how we implement it, too. The first time an action is called, the form's HostComponent is "upgraded" to become stateful, by lazily mounting a list of hooks. The rest of the implementation for function components can be shared. Because the error handling behavior added in this commit is just using useTransition under-the-hood, it also handles pending states, too. However, this pending state can't be observed until we add a new hook for that purpose. I'll add this next. DiffTrain build for commit fd3fb8e.
bigfootjon
pushed a commit
that referenced
this pull request
Apr 18, 2024
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 is the next step toward full support for async form actions.
Errors thrown inside form actions should cause the form to re-render and throw the error so it can be captured by an error boundary. The behavior is the same if the
<form />had an internal useTransition hook, which is pretty much exactly how we implement it, too.The first time an action is called, the form's HostComponent is "upgraded" to become stateful, by lazily mounting a list of hooks. The rest of the implementation for function components can be shared.
Because the error handling behavior added in this commit is just using useTransition under-the-hood, it also handles pending states, too. However, this pending state can't be observed until we add a new hook for that purpose. I'll add this next.