fix: add an error boundary for each section (#176)

This is a guardrail to keep a bad section from crashing the whole app.
It's a bit of a hack until I can figure out what's going on with
#174

I intentionally broke that section to check how it worked, this is what
it looks like:

<img width="821" height="341" alt="image"
src="https://github.com/user-attachments/assets/1ecaf662-de94-4eff-b5e5-7fbe7a549266"
/>



## Checklist

- [x] Code is formatted (`yarn format`)
- [x] Code is linted (`yarn lint`)
- [x] Code builds (`yarn build`)
- [x] Tests pass (`yarn test`)
- [x] Commit messages and/or this PR's title are formatted per
[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)

Author: gadomski

src/components/section.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 import { type IconType } from "react-icons/lib";
-import { Accordion, HStack, Icon } from "@chakra-ui/react";
+import { Accordion, Alert, HStack, Icon } from "@chakra-ui/react";
 
 export default function Section({
   title,
@@ -25,8 +26,24 @@ export default function Section({
         <Accordion.ItemIndicator />
       </Accordion.ItemTrigger>
       <Accordion.ItemContent>
-        <Accordion.ItemBody>{children}</Accordion.ItemBody>
+        <Accordion.ItemBody>
+          <ErrorBoundary FallbackComponent={FallbackComponent}>
+            {children}
+          </ErrorBoundary>
+        </Accordion.ItemBody>
       </Accordion.ItemContent>
     </Accordion.Item>
   );
 }
+
+function FallbackComponent({ error }: { error: Error }) {
+  return (
+    <Alert.Root status={"error"}>
+      <Alert.Indicator />
+      <Alert.Content>
+        <Alert.Title>An error occurred during rendering</Alert.Title>
+        <Alert.Description>{error.message}</Alert.Description>
+      </Alert.Content>
+    </Alert.Root>
+  );
+}