feat: add ErrorBoundary popup, handle missing parent

toumorokoshi · toumorokoshi · commit 815bde08bd2a · 2026-02-11T22:40:28.000-08:00
Adding custom ErrorBoundaries to make errors a bit more aesthetic,
and to enable dialogs to navigate to corrective actions.

Use this to handle a missing parent. 

Since missing parents will appear in multiple contexts, introduce
a pattern for typed error messages to reliabily re-use.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,7 @@
+# Contributing
+
+## Development Overview
+
+- The repository uses [vite](vite.dev) as a build system.
+- [Radix-UI](https://www.radix-ui.com/) is the component library used.
+- [Tailwind is used for styling](https://tailwindcss.com/)
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,5 @@
 import { ResourceSchema } from "./state/openapi";
+import { RouteErrorBoundary } from "./components/error_boundary";
 import SpecSpecifierPage from "./app/spec_specifier/page";
 import { createBrowserRouter, RouteObject, RouterProvider } from "react-router-dom";
 import Layout from "./app/explorer/page";
@@ -20,6 +21,7 @@ function createRoutes(resources: ResourceSchema[]): RouteObject[] {
   const routes = [{
     path: "/",
     element: <Layout />,
+    errorElement: <RouteErrorBoundary />,
     children: [
       {
         path: "/",
@@ -63,7 +65,7 @@ function App() {
 function Routes() {
   const resources = useAppSelector(selectResources);
   return (
-      <RouterProvider router={createBrowserRouter(createRoutes(resources))} />
+    <RouterProvider router={createBrowserRouter(createRoutes(resources))} />
   )
 }
 
diff --git a/src/app/explorer/info.tsx b/src/app/explorer/info.tsx
@@ -21,8 +21,8 @@ type InfoPageProps = {
 export default function InfoPage(props: InfoPageProps) {
     const params = useParams();
     const [state, setState] = useState<ResourceInstance | null>(null);
-    
-    const childResources = useAppSelector((globalState) => 
+
+    const childResources = useAppSelector((globalState) =>
         state ? selectChildResources(globalState, props.resource, (state.properties as ResourceProperties)?.path?.split('/').pop() || '') : []
     );
 
@@ -41,16 +41,16 @@ export default function InfoPage(props: InfoPageProps) {
     }, [params, props.resource])
 
     const properties = useMemo(() => {
-            if(state?.properties) {
-                const results = [];
-                for (const [key, value] of Object.entries(state.properties as ResourceProperties)) {
-                    results.push(<p key={key}>
-                        <b>{key}:</b> {value}
-                    </p>)
-                }
-                return results;
+        if (state?.properties) {
+            const results = [];
+            for (const [key, value] of Object.entries(state.properties as ResourceProperties)) {
+                results.push(<p key={key}>
+                    <b>{key}:</b> {value}
+                </p>)
             }
-            return <Spinner />
+            return results;
+        }
+        return <Spinner />
     }, [state]);
 
     const customMethods = useMemo(() => {
diff --git a/src/app/explorer/resource_list.tsx b/src/app/explorer/resource_list.tsx
@@ -53,7 +53,7 @@ export default function ResourceListPage(props: ResourceListProps) {
                     </Button>
                 </div>
             </div>
-            <ResourceListTable 
+            <ResourceListTable
                 resource={props.resource}
                 resources={state.resources}
                 onRefresh={refreshList}
diff --git a/src/components/error_boundary.tsx b/src/components/error_boundary.tsx
@@ -0,0 +1,99 @@
+import { Component, ErrorInfo, ReactNode } from "react";
+import { useRouteError, useNavigate } from "react-router-dom";
+import { findErrorHandler } from "@/lib/error_handlers";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+interface ErrorDisplayProps {
+    error: Error | unknown;
+    reset: () => void;
+}
+
+export function ErrorDisplay({ error, reset }: ErrorDisplayProps) {
+    const navigate = useNavigate();
+    const errorMessage = (error as Error)?.message || (typeof error === 'string' ? error : "Something went wrong.");
+    let title = "An error occurred";
+    let description = errorMessage;
+    let action = <Button onClick={reset}>Go Home</Button>;
+
+    const handler = findErrorHandler(error);
+    if (handler) {
+        title = handler.title(error);
+        description = handler.description(error);
+        const actionContent = handler.action(error, { error, reset, navigate });
+        if (actionContent) {
+            action = <>{actionContent}</>;
+        }
+    }
+
+    return (
+        <Dialog open={true} onOpenChange={() => reset()}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                    <DialogDescription>
+                        {description}
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                    {action}
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+interface Props {
+    children: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+    public state: State = {
+        hasError: false,
+        error: null,
+    };
+
+    public static getDerivedStateFromError(error: Error): State {
+        return { hasError: true, error };
+    }
+
+    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error("Uncaught error:", error, errorInfo);
+    }
+
+    private handleClose = () => {
+        this.setState({ hasError: false, error: null });
+        window.location.href = "/";
+    };
+
+    public render() {
+        if (this.state.hasError) {
+            return <ErrorDisplay error={this.state.error} reset={this.handleClose} />;
+        }
+
+        return this.props.children;
+    }
+}
+
+export function RouteErrorBoundary() {
+    const error = useRouteError();
+    const navigate = useNavigate();
+
+    const handleClose = () => {
+        navigate("/");
+    };
+
+    return <ErrorDisplay error={error} reset={handleClose} />;
+}
diff --git a/src/components/resource_list.tsx b/src/components/resource_list.tsx
@@ -7,6 +7,7 @@ import { ResourceInstance } from "@/state/fetch";
 import { useNavigate } from "react-router-dom";
 import { toast } from "@/hooks/use-toast";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { ErrorBoundary } from "@/components/error_boundary";
 
 type ResourceListTableProps = {
     resource: ResourceSchema;
@@ -25,7 +26,7 @@ type ColumnDef = {
 
 export function ResourceListTable({ resource, resources, onRefresh }: ResourceListTableProps) {
     const navigate = useNavigate();
-    
+
     const dropDownMenuColumn: ColumnDef = {
         id: "actions",
         accessorKey: "actions",
@@ -65,19 +66,19 @@ export function ResourceListTable({ resource, resources, onRefresh }: ResourceLi
     };
 
     function createColumns(r: ResourceSchema | undefined) {
-        if(r) {
+        if (r) {
             const properties = r.properties();
             const columns: ColumnDef[] = properties
                 .sort((a, b) => {
                     // First sort by priority (path and id first)
                     const priorityOrder = { path: 0, id: 1 };
                     const aPriority = priorityOrder[a.name as keyof typeof priorityOrder] ?? 2;
                     const bPriority = priorityOrder[b.name as keyof typeof priorityOrder] ?? 2;
-                    
+
                     if (aPriority !== bPriority) {
                         return aPriority - bPriority;
                     }
-                    
+
                     // Then sort alphabetically
                     return a.name.localeCompare(b.name);
                 })
@@ -101,10 +102,10 @@ export function ResourceListTable({ resource, resources, onRefresh }: ResourceLi
     async function deleteResource(r: ResourceInstance) {
         try {
             await r.delete();
-            toast({description: `Deleted ${r.path}`});
+            toast({ description: `Deleted ${r.path}` });
             onRefresh();
         } catch (error) {
-            toast({description: `Failed to delete resource: ${error instanceof Error ? error.message : String(error)}`});
+            toast({ description: `Failed to delete resource: ${error instanceof Error ? error.message : String(error)}` });
         }
     }
 
@@ -130,9 +131,11 @@ export function ResourceListTable({ resource, resources, onRefresh }: ResourceLi
     }
 
     return (
-        <DataTable
-            columns={createColumns(resource)}
-            data={resources}
-        />
+        <ErrorBoundary>
+            <DataTable
+                columns={createColumns(resource)}
+                data={resources}
+            />
+        </ErrorBoundary>
     );
-} 
+}
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
@@ -67,7 +67,7 @@ export function Settings() {
           );
           dispatch(setSchema(new OpenAPI(apiClient)));
         } catch (error) {
-          toast({description: `Failed to auto-load OpenAPI document: ${error}`})
+          toast({ description: `Failed to auto-load OpenAPI document: ${error}` })
         }
       }
     };
@@ -86,7 +86,7 @@ export function Settings() {
       // Persist the spec config
       dispatch(setSpecConfig({ url: state.url, prefix: state.prefix || "" }));
     } catch (error) {
-      toast({description: `Failed to fetch OpenAPI document: ${error}`})
+      toast({ description: `Failed to fetch OpenAPI document: ${error}` })
     }
   };
 
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+    />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+            ref={ref}
+            className={cn(
+                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+                <Cross2Icon className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+    </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-1.5 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={cn(
+            "text-lg font-semibold leading-none tracking-tight",
+            className
+        )}
+        {...props}
+    />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogTrigger,
+    DialogClose,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+}
diff --git a/src/lib/error_handlers.tsx b/src/lib/error_handlers.tsx
diff --git a/src/lib/errors.ts b/src/lib/errors.ts
diff --git a/src/state/openapi.ts b/src/state/openapi.ts
diff --git a/vite.config.ts b/vite.config.ts

Original file line number	Diff line number	Diff line change
`@@ -67,7 +67,7 @@ export function Settings() {`
`67`	`67`	`);`
`68`	`68`	`dispatch(setSchema(new OpenAPI(apiClient)));`
`69`	`69`	`} catch (error) {`
`70`		- toast({description: `Failed to auto-load OpenAPI document: ${error}`})
	`70`	+ toast({ description: `Failed to auto-load OpenAPI document: ${error}` })
`71`	`71`	`}`
`72`	`72`	`}`
`73`	`73`	`};`
`@@ -86,7 +86,7 @@ export function Settings() {`
`86`	`86`	`// Persist the spec config`
`87`	`87`	`dispatch(setSpecConfig({ url: state.url, prefix: state.prefix \|\| "" }));`
`88`	`88`	`} catch (error) {`
`89`		- toast({description: `Failed to fetch OpenAPI document: ${error}`})
	`89`	+ toast({ description: `Failed to fetch OpenAPI document: ${error}` })
`90`	`90`	`}`
`91`	`91`	`};`
`92`	`92`