fix(local-explorer-ui): Add 404 & 500 error components

.changeset/happy-cameras-occur.md

@@ -0,0 +1,9 @@
+---
+"@cloudflare/local-explorer-ui": patch
+---
+
+Improves local explorer invalid route error handling.
+
+Visiting a route either as a 404 or 500 error now has dedicated components to handle as such, rather than the generic TanStack error UI.
+
+Additionally, it also fixes route loaders to correctly throw a 404 error if a resource is not found, rather than showing a generic error.

packages/local-explorer-ui/src/components/NotFound.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@cloudflare/kumo";
+import { Link, type NotFoundRouteProps } from "@tanstack/react-router";
+
+export function NotFound(_props: NotFoundRouteProps): JSX.Element {
+	return (
+		<div className="text-text-secondary flex flex-1 flex-col items-center justify-center space-y-4 p-12 text-center">
+			<h2 className="text-text text-3xl font-bold">Page not found</h2>
+
+			<p className="text-text-secondary text-sm font-light">
+				The resource you&apos;re looking for doesn&apos;t exist or has been
+				removed.
+			</p>
+
+			<Link to="/">
+				<Button variant="secondary">Go home</Button>
+			</Link>
+		</div>
+	);
+}

packages/local-explorer-ui/src/components/ResourceError.tsx

@@ -0,0 +1,29 @@
+import { Button } from "@cloudflare/kumo";
+import { WarningIcon } from "@phosphor-icons/react";
+import { Link, type ErrorComponentProps } from "@tanstack/react-router";
+import type { WorkersApiResponseCommonFailure } from "../api";
+
+const DEFAULT_ERROR_DESCRIPTION =
+	"An unknown error occured. Please report this issue to Cloudflare.";
+
+export function ResourceError({
+	error,
+}: ErrorComponentProps<Error | WorkersApiResponseCommonFailure>): JSX.Element {
+	const details =
+		("errors" in error ? error.errors?.[0]?.message : error.message) ??
+		DEFAULT_ERROR_DESCRIPTION;
+
+	return (
+		<div className="text-text-secondary flex flex-1 flex-col items-center justify-center space-y-4 p-12 text-center">
+			<WarningIcon size={48} />
+
+			<h2 className="text-text text-3xl font-bold">Something went wrong</h2>
+
+			<p className="text-text-secondary text-sm font-light">{details}</p>
+
+			<Link to="/">
+				<Button variant="secondary">Go home</Button>
+			</Link>
+		</div>
+	);
+}

packages/local-explorer-ui/src/routes/__root.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tanstack/react-router";
 import { useCallback, useMemo } from "react";
 import { localExplorerListWorkers } from "../api";
+import { NotFound } from "../components/NotFound";
 import { Sidebar } from "../components/Sidebar";
 import {
 	filterVisibleWorkers,
@@ -15,6 +16,7 @@ import {
 
 export const Route = createRootRoute({
 	component: RootLayout,
+	notFoundComponent: NotFound,
 	loader: async () => {
 		const workersResponse = await localExplorerListWorkers();
 		const workers = workersResponse.data?.result ?? [];

packages/local-explorer-ui/src/routes/d1/$databaseId.tsx

@@ -14,6 +14,7 @@ import {
 import { useCallback, useMemo, useRef, useState } from "react";
 import D1Icon from "../../assets/icons/d1.svg?react";
 import { Breadcrumbs } from "../../components/Breadcrumbs";
+import { ResourceError } from "../../components/ResourceError";
 import { Studio } from "../../components/studio";
 import { DropTableConfirmationModal } from "../../components/studio/Modal/DropTableConfirmation";
 import { StudioTableActionsDropdown } from "../../components/studio/Table/ActionsDropdown";
@@ -25,6 +26,7 @@ import type { StudioResource } from "../../types/studio";
 
 export const Route = createFileRoute("/d1/$databaseId")({
 	component: DatabaseView,
+	errorComponent: ResourceError,
 	loader: async (ctx) => {
 		const driver = new LocalD1Driver(ctx.params.databaseId);
 		const schemas = await driver.schemas();

packages/local-explorer-ui/src/routes/do/$className.tsx

@@ -1,8 +1,11 @@
-import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { createFileRoute, notFound, Outlet } from "@tanstack/react-router";
 import { durableObjectsNamespaceListNamespaces } from "../../api";
+import { NotFound } from "../../components/NotFound";
+import { ResourceError } from "../../components/ResourceError";
 
 export const Route = createFileRoute("/do/$className")({
 	component: () => <Outlet />,
+	errorComponent: ResourceError,
 	loader: async ({ params }) => {
 		const response = await durableObjectsNamespaceListNamespaces();
 		const namespaces = response.data?.result ?? [];
@@ -15,12 +18,13 @@ export const Route = createFileRoute("/do/$className")({
 				ns.id === params.className
 		);
 		if (!namespace?.id) {
-			throw new Error(`Durable Object class "${params.className}" not found`);
+			throw notFound();
 		}
 
 		return {
 			className: params.className,
 			namespaceId: namespace.id,
 		};
 	},
+	notFoundComponent: NotFound,
 });

packages/local-explorer-ui/src/routes/do/$className/$objectId.tsx

@@ -7,13 +7,16 @@ import {
 import {
 	createFileRoute,
 	Link,
+	notFound,
 	useNavigate,
 	useRouter,
 } from "@tanstack/react-router";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { durableObjectsNamespaceListNamespaces } from "../../../api";
 import DOIcon from "../../../assets/icons/durable-objects.svg?react";
 import { Breadcrumbs } from "../../../components/Breadcrumbs";
+import { NotFound } from "../../../components/NotFound";
+import { ResourceError } from "../../../components/ResourceError";
 import { Studio } from "../../../components/studio";
 import { DropTableConfirmationModal } from "../../../components/studio/Modal/DropTableConfirmation";
 import { StudioTableActionsDropdown } from "../../../components/studio/Table/ActionsDropdown";
@@ -31,6 +34,7 @@ function isHexId(str: string): boolean {
 
 export const Route = createFileRoute("/do/$className/$objectId")({
 	component: ObjectView,
+	errorComponent: ResourceError,
 	loader: async ({ params }) => {
 		// Resolve className to a namespace ID
 		const response = await durableObjectsNamespaceListNamespaces();
@@ -42,7 +46,7 @@ export const Route = createFileRoute("/do/$className/$objectId")({
 				ns.id === params.className
 		);
 		if (!namespace?.id) {
-			throw new Error(`Durable Object class "${params.className}" not found`);
+			throw notFound();
 		}
 
 		// Determine if the param is a hex ID or a name
@@ -67,6 +71,7 @@ export const Route = createFileRoute("/do/$className/$objectId")({
 			tables,
 		};
 	},
+	notFoundComponent: NotFound,
 	validateSearch: (search) => ({
 		table: typeof search.table === "string" ? search.table : undefined,
 	}),

packages/local-explorer-ui/src/routes/do/$className/index.tsx

@@ -1,16 +1,24 @@
 import { Button, Label, Link as KumoLink, Table } from "@cloudflare/kumo";
-import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import {
+	createFileRoute,
+	Link,
+	notFound,
+	useNavigate,
+} from "@tanstack/react-router";
 import { useCallback, useEffect, useState } from "react";
 import {
 	durableObjectsNamespaceListNamespaces,
 	durableObjectsNamespaceListObjects,
 } from "../../../api";
 import DOIcon from "../../../assets/icons/durable-objects.svg?react";
 import { Breadcrumbs } from "../../../components/Breadcrumbs";
+import { NotFound } from "../../../components/NotFound";
+import { ResourceError } from "../../../components/ResourceError";
 import type { WorkersObject } from "../../../api";
 
 export const Route = createFileRoute("/do/$className/")({
 	component: NamespaceView,
+	errorComponent: ResourceError,
 	loader: async ({ params }) => {
 		const response = await durableObjectsNamespaceListNamespaces();
 		const namespaces = response.data?.result ?? [];
@@ -21,7 +29,7 @@ export const Route = createFileRoute("/do/$className/")({
 				ns.id === params.className
 		);
 		if (!namespace?.id) {
-			throw new Error(`Durable Object class "${params.className}" not found`);
+			throw notFound();
 		}
 
 		const objectsResponse = await durableObjectsNamespaceListObjects({
@@ -43,6 +51,7 @@ export const Route = createFileRoute("/do/$className/")({
 			objects,
 		};
 	},
+	notFoundComponent: NotFound,
 });
 
 function NamespaceView() {

packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx

@@ -16,12 +16,14 @@ import KVIcon from "../../assets/icons/kv.svg?react";
 import { AddKVForm } from "../../components/AddKVForm";
 import { Breadcrumbs } from "../../components/Breadcrumbs";
 import { KVTable } from "../../components/KVTable";
+import { ResourceError } from "../../components/ResourceError";
 import { SearchForm } from "../../components/SearchForm";
 import { getSelectedWorker } from "../../components/WorkerSelector";
 import type { KVEntry } from "../../api";
 
 export const Route = createFileRoute("/kv/$namespaceId")({
 	component: NamespaceView,
+	errorComponent: ResourceError,
 	loader: async ({ params }) => {
 		const keysResponse = await workersKvNamespaceListANamespace_SKeys({
 			path: { namespace_id: params.namespaceId },

packages/local-explorer-ui/src/routes/r2/$bucketName.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { ResourceError } from "../../components/ResourceError";
 
 export const Route = createFileRoute("/r2/$bucketName")({
 	component: () => <Outlet />,
+	errorComponent: ResourceError,
 });

packages/local-explorer-ui/src/routes/r2/$bucketName/index.tsx

@@ -13,7 +13,12 @@ import {
 	ListIcon,
 	UploadIcon,
 } from "@phosphor-icons/react";
-import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import {
+	createFileRoute,
+	Link,
+	notFound,
+	useNavigate,
+} from "@tanstack/react-router";
 import { useCallback, useEffect, useState } from "react";
 import {
 	r2BucketDeleteObjects,
@@ -22,8 +27,10 @@ import {
 } from "../../../api";
 import R2Icon from "../../../assets/icons/r2.svg?react";
 import { Breadcrumbs } from "../../../components/Breadcrumbs";
+import { NotFound } from "../../../components/NotFound";
 import { R2ObjectTable } from "../../../components/R2ObjectTable";
 import { R2UploadDialog } from "../../../components/R2UploadDialog";
+import { ResourceError } from "../../../components/ResourceError";
 import { withMinimumDelay } from "../../../utils/async";
 import type { R2Object } from "../../../api";
 
@@ -34,10 +41,7 @@ export interface R2BucketSearch {
 
 export const Route = createFileRoute("/r2/$bucketName/")({
 	component: BucketView,
-	validateSearch: (search: Record<string, unknown>): R2BucketSearch => ({
-		prefix: typeof search.prefix === "string" ? search.prefix : undefined,
-		delimiter: search.delimiter === false ? false : true,
-	}),
+	errorComponent: ResourceError,
 	loaderDeps: ({ search }) => ({
 		prefix: search.prefix,
 		delimiter: search.delimiter,
@@ -52,7 +56,17 @@ export const Route = createFileRoute("/r2/$bucketName/")({
 				per_page: 100,
 				prefix: deps.prefix || undefined,
 			},
+			throwOnError: false,
 		});
+		if (response.response?.status === 404) {
+			throw notFound();
+		}
+
+		if (response.error) {
+			throw new Error(
+				`Failed to list objects in bucket "${params.bucketName}"`
+			);
+		}
 
 		return {
 			objects: response.data?.result ?? [],
@@ -62,6 +76,11 @@ export const Route = createFileRoute("/r2/$bucketName/")({
 			delimiterEnabled: deps.delimiter !== false,
 		};
 	},
+	notFoundComponent: NotFound,
+	validateSearch: (search: Record<string, unknown>): R2BucketSearch => ({
+		prefix: typeof search.prefix === "string" ? search.prefix : undefined,
+		delimiter: search.delimiter === false ? false : true,
+	}),
 });
 
 function BucketView(): JSX.Element {

packages/local-explorer-ui/src/routes/r2/$bucketName/object.$.tsx

@@ -1,16 +1,24 @@
 import { Button, Dialog } from "@cloudflare/kumo";
 import { DownloadIcon, TrashIcon } from "@phosphor-icons/react";
-import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import {
+	createFileRoute,
+	Link,
+	notFound,
+	useNavigate,
+} from "@tanstack/react-router";
 import { useState } from "react";
 import { r2BucketDeleteObjects, r2BucketGetObject } from "../../../api";
 import R2Icon from "../../../assets/icons/r2.svg?react";
 import { Breadcrumbs } from "../../../components/Breadcrumbs";
 import { CopyButton } from "../../../components/CopyButton";
+import { NotFound } from "../../../components/NotFound";
+import { ResourceError } from "../../../components/ResourceError";
 import { formatDate, formatSize } from "../../../utils/format";
 import type { R2HeadObjectResult } from "../../../api";
 
 export const Route = createFileRoute("/r2/$bucketName/object/$")({
 	component: ObjectDetailView,
+	errorComponent: ResourceError,
 	loader: async ({ params }) => {
 		const objectKey = params._splat;
 		if (!objectKey) {
@@ -25,18 +33,27 @@ export const Route = createFileRoute("/r2/$bucketName/object/$")({
 			headers: {
 				"cf-metadata-only": "true",
 			},
+			throwOnError: false,
 		});
+		if (response.response?.status === 404) {
+			throw notFound();
+		}
+
+		if (response.error) {
+			throw new Error(`Failed to fetch object "${objectKey}"`);
+		}
 
 		const result = response.data?.result;
 		if (!result) {
-			throw new Error(`Object "${objectKey}" not found`);
+			throw notFound();
 		}
 
 		return {
 			object: result,
 			objectKey,
 		};
 	},
+	notFoundComponent: NotFound,
 });
 
 interface ObjectDetailsCardProps {

packages/local-explorer-ui/src/routes/workflows/$workflowName.tsx

@@ -1,7 +1,9 @@
 import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { ResourceError } from "../../components/ResourceError";
 
 export const Route = createFileRoute("/workflows/$workflowName")({
 	component: () => <Outlet />,
+	errorComponent: ResourceError,
 	loader: async ({ params }) => {
 		return {
 			workflowName: params.workflowName,