Add error boundary and explanatory comment

Author: malwilley

static/app/components/workflowEngine/ui/formSection.tsx

@@ -4,6 +4,8 @@ import {Disclosure} from '@sentry/scraps/disclosure';
 import {Stack} from '@sentry/scraps/layout';
 import {Heading, Text} from '@sentry/scraps/text';
 
+import {ErrorBoundary} from 'sentry/components/errorBoundary';
+
 type FormSectionProps = {
   title: React.ReactNode;
   children?: React.ReactNode;
@@ -24,30 +26,32 @@ export function FormSection({
   defaultExpanded = true,
 }: FormSectionProps) {
   return (
-    <Disclosure
-      as="section"
-      size="md"
-      role="region"
-      defaultExpanded={defaultExpanded}
-      className={className}
-    >
-      <Disclosure.Title trailingItems={trailingItems}>
-        <Heading as="h3">
-          {step ? `${step}. ` : ''}
-          {title}
-        </Heading>
-      </Disclosure.Title>
-      <Disclosure.Content>
-        <Stack gap="lg">
-          {description && (
-            <FormSectionDescription as="p" variant="secondary">
-              {description}
-            </FormSectionDescription>
-          )}
-          <Stack gap="md">{children}</Stack>
-        </Stack>
-      </Disclosure.Content>
-    </Disclosure>
+    <ErrorBoundary mini>
+      <Disclosure
+        as="section"
+        size="md"
+        role="region"
+        defaultExpanded={defaultExpanded}
+        className={className}
+      >
+        <Disclosure.Title trailingItems={trailingItems}>
+          <Heading as="h3">
+            {step ? `${step}. ` : ''}
+            {title}
+          </Heading>
+        </Disclosure.Title>
+        <Disclosure.Content>
+          <Stack gap="lg">
+            {description && (
+              <FormSectionDescription as="p" variant="secondary">
+                {description}
+              </FormSectionDescription>
+            )}
+            <Stack gap="md">{children}</Stack>
+          </Stack>
+        </Disclosure.Content>
+      </Disclosure>
+    </ErrorBoundary>
   );
 }
 

static/app/views/detectors/components/forms/common/useDetectorFormProject.tsx

@@ -1,17 +1,18 @@
+import {useMemo} from 'react';
+
 import {useFormField} from 'sentry/components/workflowEngine/form/useFormField';
 import type {Project} from 'sentry/types/project';
 import {useProjects} from 'sentry/utils/useProjects';
 
-/**
- * Returns the current project based on the form's `projectId` field.
- * Reactively updates when the user changes the project in the form.
- *
- * Must be used within a Form that has a `projectId` field.
- */
 export function useDetectorFormProject(): Project {
   const projectId = useFormField<string>('projectId');
   const {projects} = useProjects();
-  const project = projects.find(p => p.id === projectId);
+  const project = useMemo(
+    () => projects.find(p => p.id === projectId),
+    [projects, projectId]
+  );
+  // There's a top-level spinner when projects are loading, and you can't select a
+  // project that's not in the ProjectStore, so this should never happen.
   if (!project) {
     throw new Error(
       `useDetectorFormProject: no project found for projectId "${projectId}"`