Rethrow errors from form actions

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.

Author: acdlite

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -25,7 +25,7 @@ import {SyntheticEvent} from '../SyntheticEvent';
 function extractEvents(
   dispatchQueue: DispatchQueue,
   domEventName: DOMEventName,
-  targetInst: null | Fiber,
+  maybeTargetInst: null | Fiber,
   nativeEvent: AnyNativeEvent,
   nativeEventTarget: null | EventTarget,
   eventSystemFlags: EventSystemFlags,
@@ -34,11 +34,12 @@ function extractEvents(
   if (domEventName !== 'submit') {
     return;
   }
-  if (!targetInst || targetInst.stateNode !== nativeEventTarget) {
+  if (!maybeTargetInst || maybeTargetInst.stateNode !== nativeEventTarget) {
     // If we're inside a parent root that itself is a parent of this root, then
     // its deepest target won't be the actual form that's being submitted.
     return;
   }
+  const formInst = maybeTargetInst;
   const form: HTMLFormElement = (nativeEventTarget: any);
   let action = (getFiberCurrentPropsFromNode(form): any).action;
   const submitter: null | HTMLInputElement | HTMLButtonElement =
@@ -96,7 +97,7 @@ function extractEvents(
       formData = new FormData(form);
     }
 
-    startFormAction(action, formData);
+    startFormAction(formInst, action, formData);
   }
 
   dispatchQueue.push({

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -37,6 +37,7 @@ describe('ReactDOMForm', () => {
   let assertLog;
   let useState;
   let Suspense;
+  let startTransition;
   let textCache;
 
   beforeEach(() => {
@@ -49,6 +50,7 @@ describe('ReactDOMForm', () => {
     assertLog = require('internal-test-utils').assertLog;
     useState = React.useState;
     Suspense = React.Suspense;
+    startTransition = React.startTransition;
     container = document.createElement('div');
     document.body.appendChild(container);
 
@@ -121,6 +123,37 @@ describe('ReactDOMForm', () => {
     }
   }
 
+  function getText(text) {
+    const record = textCache.get(text);
+    if (record === undefined) {
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
+      };
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+      return thenable;
+    } else {
+      switch (record.status) {
+        case 'pending':
+          return record.value;
+        case 'rejected':
+          return Promise.reject(record.value);
+        case 'resolved':
+          return Promise.resolve(record.value);
+      }
+    }
+  }
+
   function Text({text}) {
     Scheduler.log(text);
     return text;
@@ -138,24 +171,24 @@ describe('ReactDOMForm', () => {
 
   async function submit(submitter) {
     await act(() => {
-    const form = submitter.form || submitter;
-    if (!submitter.form) {
-      submitter = undefined;
-    }
+      const form = submitter.form || submitter;
+      if (!submitter.form) {
+        submitter = undefined;
+      }
       const submitEvent = new Event('submit', {
         bubbles: true,
         cancelable: true,
       });
-    submitEvent.submitter = submitter;
-    const returnValue = form.dispatchEvent(submitEvent);
-    if (!returnValue) {
-      return;
-    }
-    const action =
-      (submitter && submitter.getAttribute('formaction')) || form.action;
-    if (!/\s*javascript:/i.test(action)) {
-      throw new Error('Navigate to: ' + action);
-    }
+      submitEvent.submitter = submitter;
+      const returnValue = form.dispatchEvent(submitEvent);
+      if (!returnValue) {
+        return;
+      }
+      const action =
+        (submitter && submitter.getAttribute('formaction')) || form.action;
+      if (!/\s*javascript:/i.test(action)) {
+        throw new Error('Navigate to: ' + action);
+      }
     });
   }
 
@@ -577,4 +610,127 @@ describe('ReactDOMForm', () => {
     assertLog(['Updated']);
     expect(container.textContent).toBe('Updated');
   });
+
+  // @gate enableFormActions
+  it('form actions can be asynchronous', async () => {
+    const formRef = React.createRef();
+
+    function App() {
+      const [state, setState] = useState('Initial');
+      return (
+        <form
+          action={async () => {
+            Scheduler.log('Async action started');
+            await getText('Wait');
+            startTransition(() => setState('Updated'));
+          }}
+          ref={formRef}>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={state} />
+          </Suspense>
+        </form>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await resolveText('Initial');
+    await act(() => root.render(<App />));
+    assertLog(['Initial']);
+    expect(container.textContent).toBe('Initial');
+
+    await submit(formRef.current);
+    assertLog(['Async action started']);
+
+    await act(() => resolveText('Wait'));
+    assertLog(['Suspend! [Updated]', 'Loading...']);
+    expect(container.textContent).toBe('Initial');
+  });
+
+  // @gate enableFormActions
+  it('sync errors in form actions can be captured by an error boundary', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    const formRef = React.createRef();
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <form
+            action={() => {
+              throw new Error('Oh no!');
+            }}
+            ref={formRef}>
+            <Text text="Everything is fine" />
+          </form>
+        </ErrorBoundary>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog(['Everything is fine']);
+    expect(container.textContent).toBe('Everything is fine');
+
+    await submit(formRef.current);
+    assertLog(['Oh no!', 'Oh no!']);
+    expect(container.textContent).toBe('Oh no!');
+  });
+
+  // @gate enableFormActions
+  it('async errors in form actions can be captured by an error boundary', async () => {
+    class ErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+      render() {
+        if (this.state.error !== null) {
+          return <Text text={this.state.error.message} />;
+        }
+        return this.props.children;
+      }
+    }
+
+    const formRef = React.createRef();
+
+    function App() {
+      return (
+        <ErrorBoundary>
+          <form
+            action={async () => {
+              Scheduler.log('Async action started');
+              await getText('Wait');
+              throw new Error('Oh no!');
+            }}
+            ref={formRef}>
+            <Text text="Everything is fine" />
+          </form>
+        </ErrorBoundary>
+      );
+    }
+
+    const root = ReactDOMClient.createRoot(container);
+    await act(() => root.render(<App />));
+    assertLog(['Everything is fine']);
+    expect(container.textContent).toBe('Everything is fine');
+
+    await submit(formRef.current);
+    assertLog(['Async action started']);
+    expect(container.textContent).toBe('Everything is fine');
+
+    await act(() => resolveText('Wait'));
+    assertLog(['Oh no!', 'Oh no!']);
+    expect(container.textContent).toBe('Oh no!');
+  });
 });

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -107,6 +107,7 @@ import {
   enableUseMutableSource,
   enableFloat,
   enableHostSingletons,
+  enableFormActions,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -208,6 +209,7 @@ import {
   checkDidRenderIdHook,
   bailoutHooks,
   replaySuspendedComponentWithHooks,
+  renderStatefulHostComponentWithHooks,
 } from './ReactFiberHooks';
 import {stopProfilerTimerIfRunning} from './ReactProfilerTimer';
 import {
@@ -1620,6 +1622,23 @@ function updateHostComponent(
     workInProgress.flags |= ContentReset;
   }
 
+  if (!enableFormActions) {
+    const memoizedState = workInProgress.memoizedState;
+    if (memoizedState !== null) {
+      // This fiber has been upgraded to a stateful component. The only way
+      // happens currently is for form actions. We use hooks to track the pending
+      // and error state of the form.
+      //
+      // Once a fiber is upgraded to be stateful, it remains stateful for the rest
+      // of its lifetime.
+      renderStatefulHostComponentWithHooks(
+        current,
+        workInProgress,
+        renderLanes,
+      );
+    }
+  }
+
   markRef(current, workInProgress);
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;