Add error boundary to Flight fixture (facebook#26695)

Errors in form actions are now rethrown during render (facebook#26689), so we
can handle them using an error boundary.

Author: acdlite

fixtures/flight/src/Button.js

@@ -1,27 +1,30 @@
 'use client';
 
 import * as React from 'react';
+import {flushSync} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary.js';
 
 export default function Button({action, children}) {
   const [isPending, setIsPending] = React.useState(false);
 
   return (
-    <form>
-      <button
-        disabled={isPending}
-        formAction={async () => {
-          setIsPending(true);
-          try {
-            const result = await action();
-            console.log(result);
-          } catch (error) {
-            console.error(error);
-          } finally {
-            setIsPending(false);
-          }
-        }}>
-        {children}
-      </button>
-    </form>
+    <ErrorBoundary>
+      <form>
+        <button
+          disabled={isPending}
+          formAction={async () => {
+            // TODO: Migrate to useFormPending once that exists
+            flushSync(() => setIsPending(true));
+            try {
+              const result = await action();
+              console.log(result);
+            } finally {
+              React.startTransition(() => setIsPending(false));
+            }
+          }}>
+          {children}
+        </button>
+      </form>
+    </ErrorBoundary>
   );
 }

fixtures/flight/src/ErrorBoundary.js

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+
+export default class ErrorBoundary extends React.Component {
+  state = {error: null};
+  static getDerivedStateFromError(error) {
+    return {error};
+  }
+  render() {
+    if (this.state.error) {
+      return <div>Caught an error: {this.state.error.message}</div>;
+    }
+    return this.props.children;
+  }
+}

fixtures/flight/src/Form.js

@@ -1,25 +1,28 @@
 'use client';
 
 import * as React from 'react';
+import {flushSync} from 'react-dom';
+import ErrorBoundary from './ErrorBoundary.js';
 
 export default function Form({action, children}) {
   const [isPending, setIsPending] = React.useState(false);
 
   return (
-    <form
-      action={async formData => {
-        setIsPending(true);
-        try {
-          const result = await action(formData);
-          alert(result);
-        } catch (error) {
-          console.error(error);
-        } finally {
-          setIsPending(false);
-        }
-      }}>
-      <input name="name" />
-      <button>Say Hi</button>
-    </form>
+    <ErrorBoundary>
+      <form
+        action={async formData => {
+          // TODO: Migrate to useFormPending once that exists
+          flushSync(() => setIsPending(true));
+          try {
+            const result = await action(formData);
+            alert(result);
+          } finally {
+            React.startTransition(() => setIsPending(false));
+          }
+        }}>
+        <input name="name" />
+        <button>Say Hi</button>
+      </form>
+    </ErrorBoundary>
   );
 }