fix: better map error boundary (#271)

Closes #267

Author: gadomski

src/app.tsx

@@ -1,7 +1,18 @@
-import { Alert, Box, FileUpload } from "@chakra-ui/react";
+import {
+  AbsoluteCenter,
+  Alert,
+  Box,
+  Center,
+  FileUpload,
+  HStack,
+  Link,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
 import { useDuckDb } from "duckdb-wasm-kit";
 import { useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { LuGithub } from "react-icons/lu";
 import Footer from "./components/footer";
 import Map from "./components/map";
 import Overlay from "./components/overlay";
@@ -12,22 +23,31 @@ import { uploadFile } from "./utils/upload";
 function MapFallback({ error }: { error: unknown }) {
   const message = error instanceof Error ? error.message : String(error);
   return (
-    <Box
-      h="100%"
-      w="100%"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      bg="gray.100"
-    >
-      <Alert.Root status="error">
-        <Alert.Indicator />
-        <Alert.Content>
-          <Alert.Title>Map failed to load</Alert.Title>
-          <Alert.Description>{message}</Alert.Description>
-        </Alert.Content>
-      </Alert.Root>
-    </Box>
+    <AbsoluteCenter h="100dvh%" w="100dvw">
+      <Center maxW={"40%"}>
+        <Alert.Root status="error">
+          <Alert.Indicator />
+          <Alert.Content gap={4}>
+            <Alert.Title>
+              <HStack>We're really sorry!</HStack>
+            </Alert.Title>
+            <Alert.Description>
+              <Stack>
+                <HStack>Something went wrong in the map component</HStack>
+                <Text>The error message is "{message}"</Text>
+                <Text>
+                  Please{" "}
+                  <Link href="https://github.com/developmentseed/stac-map/issues/new?template=bug_report.md">
+                    open an issue <LuGithub />
+                  </Link>{" "}
+                  so we can fix it!
+                </Text>
+              </Stack>
+            </Alert.Description>
+          </Alert.Content>
+        </Alert.Root>
+      </Center>
+    </AbsoluteCenter>
   );
 }