feat(explorer): show error message in error page (#3121)

.changeset/lazy-ties-double.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Added error messages to error page to facilitate easier troubleshooting.

packages/explorer/src/app/(explorer)/error.tsx

@@ -10,13 +10,19 @@ type Props = {
   reset: () => void;
 };
 
-export default function Error({ reset }: Props) {
+export default function Error({ reset, error }: Props) {
   const getUrl = useWorldUrl();
   return (
     <main className="px-6 py-24 text-center">
       <p className="text-3xl font-semibold text-orange-600">400</p>
       <h1 className="mt-4 text-3xl font-bold tracking-tight text-white sm:text-5xl">Something went wrong :(</h1>
 
+      {error.message && (
+        <pre className="mt-8 inline-block w-[580px] whitespace-normal rounded-md border border-white/15 bg-secondary p-4 text-left font-mono text-sm leading-6 text-white">
+          {error.message}
+        </pre>
+      )}
+
       <div className="mt-10 flex items-center justify-center gap-x-6">
         <Button asChild>
           <Link href={getUrl("explorer")}>Go back to explorer</Link>

packages/explorer/src/app/(explorer)/worlds/[worldAddress]/explorer/DataExplorer.tsx

@@ -1,23 +1,35 @@
 "use client";
 
+import { Loader } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { TableSelector } from "./TableSelector";
 import { TablesViewer } from "./TablesViewer";
 
 export function DataExplorer() {
   const searchParams = useSearchParams();
-  const { data: tables } = useQuery({
+  const { data: tables, isLoading } = useQuery({
     queryKey: ["tables"],
     queryFn: async () => {
       const response = await fetch("/api/tables");
-      return response.json();
+      const json = await response.json();
+      if (!response.ok) {
+        throw new Error(json.error);
+      }
+
+      return json;
     },
     select: (data) => data.tables.map((table: { name: string }) => table.name),
     refetchInterval: 15000,
+    throwOnError: true,
+    retry: false,
   });
   const selectedTable = searchParams.get("table") || (tables?.length > 0 ? tables[0] : null);
 
+  if (isLoading) {
+    return <Loader className="animate-spin" />;
+  }
+
   return (
     <>
       <TableSelector value={selectedTable} options={tables} />

packages/explorer/src/app/api/utils/getDatabase.ts

@@ -4,12 +4,14 @@ import fs from "fs";
 export function getDatabase(): Database | null {
   const dbPath = process.env.INDEXER_DATABASE as string;
   if (!fs.existsSync(dbPath)) {
-    return null;
+    throw new Error(
+      "Database cannot be found. Make sure --indexerDatabase flag or INDEXER_DATABASE environment variable are set, and the indexer is running.",
+    );
   }
 
   const db = new sqliteDB(dbPath);
   if (!db) {
-    return null;
+    throw new Error("Database path found but failed to initialize.");
   }
 
   return db;