feat: add error boundary for map (#109)

Author: gadomski

package.json

@@ -49,6 +49,7 @@
     "next-themes": "^0.4.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-error-boundary": "^6.0.0",
     "react-icons": "^5.5.0",
     "react-map-gl": "^7.1.7",
     "react-markdown": "^10.1.0",

src/app.tsx

@@ -1,5 +1,13 @@
-import { Box, Container, GridItem, SimpleGrid } from "@chakra-ui/react";
+import {
+  Alert,
+  Box,
+  Container,
+  Flex,
+  GridItem,
+  SimpleGrid,
+} from "@chakra-ui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ErrorBoundary } from "react-error-boundary";
 import { MapProvider } from "react-map-gl/dist/esm/exports-maplibre";
 import Header from "./components/header";
 import Map from "./components/map";
@@ -15,7 +23,9 @@ export default function App() {
       <MapProvider>
         <StacMapProvider>
           <Box zIndex={0} position={"absolute"} top={0} left={0}>
-            <Map></Map>
+            <ErrorBoundary FallbackComponent={MapFallback}>
+              <Map></Map>
+            </ErrorBoundary>
           </Box>
           <Container zIndex={1} fluid h={"dvh"} py={4} pointerEvents={"none"}>
             <SimpleGrid columns={{ base: 1, md: 3 }} gap={4}>
@@ -36,3 +46,19 @@ export default function App() {
     </QueryClientProvider>
   );
 }
+
+function MapFallback({ error }: { error: Error }) {
+  return (
+    <Flex h={"100dvh"} w={"100dvw"} alignItems="center" justifyContent="center">
+      <Box>
+        <Alert.Root status="error">
+          <Alert.Indicator />
+          <Alert.Content>
+            <Alert.Title>Error while rendering the map</Alert.Title>
+            <Alert.Description>{error.message}</Alert.Description>
+          </Alert.Content>
+        </Alert.Root>
+      </Box>
+    </Flex>
+  );
+}

src/components/navigation-breadcrumbs.tsx

@@ -108,7 +108,7 @@ function BreadcrumbItem({
       {(current && (
         <Breadcrumb.CurrentLink>
           <HStack>
-            {getValueIcon(value)({})}
+            {getValueIcon(value)}
             {text}
           </HStack>
         </Breadcrumb.CurrentLink>
@@ -124,7 +124,7 @@ function BreadcrumbItem({
             }
           }}
         >
-          {getValueIcon(value)({})}
+          {getValueIcon(value)}
           {text}
         </Breadcrumb.Link>
       )}
@@ -135,13 +135,13 @@ function BreadcrumbItem({
 function getValueIcon(value: StacValue) {
   switch (value.type) {
     case "Catalog":
-      return LuFolder;
+      return <LuFolder></LuFolder>;
     case "Collection":
-      return LuFolderPlus;
+      return <LuFolderPlus></LuFolderPlus>;
     case "Feature":
-      return LuFile;
+      return <LuFile></LuFile>;
     case "FeatureCollection":
-      return LuFiles;
+      return <LuFiles></LuFiles>;
   }
 }
 

src/components/panel.tsx

@@ -54,10 +54,30 @@ function ValueContent({ value }: { value: StacValue }) {
       return <Item item={value}></Item>;
     case "FeatureCollection":
       return <ItemCollection itemCollection={value}></ItemCollection>;
+    case undefined:
+      return (
+        <Alert.Root status="error">
+          <Alert.Indicator />
+          <Alert.Content>
+            <Alert.Title>Value does not have a "type" field</Alert.Title>
+          </Alert.Content>
+        </Alert.Root>
+      );
     default:
       return (
-        // @ts-expect-error Fallback for unknown types
-        <Alert.Root status="error">Unknown STAC type: {value.type}</Alert.Root>
+        <Alert.Root status="error">
+          <Alert.Indicator />
+          <Alert.Content>
+            <Alert.Title>Unknown "type" field</Alert.Title>
+            <Alert.Description>
+              {
+                // @ts-expect-error Fallback for unknown types
+                value.type
+              }{" "}
+              is not a valid STAC type
+            </Alert.Description>
+          </Alert.Content>
+        </Alert.Root>
       );
   }
 }

yarn.lock

@@ -5041,6 +5041,13 @@ react-dom@^19.1.0:
   dependencies:
     scheduler "^0.26.0"
 
+react-error-boundary@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-6.0.0.tgz#a9e552146958fa77d873b587aa6a5e97544ee954"
+  integrity sha512-gdlJjD7NWr0IfkPlaREN2d9uUZUlksrfOx7SX62VRerwXbMY6ftGCIZua1VG1aXFNOimhISsTq+Owp725b9SiA==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-icons@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.5.0.tgz#8aa25d3543ff84231685d3331164c00299cdfaf2"