Add error boundary to Flight fixture

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

Author: acdlite

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,26 @@
 'use client';
 
 import * as React from 'react';
+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 => {
+          setIsPending(true);
+          try {
+            const result = await action(formData);
+            alert(result);
+          } finally {
+            setIsPending(false);
+          }
+        }}>
+        <input name="name" />
+        <button>Say Hi</button>
+      </form>
+    </ErrorBoundary>
   );
 }