From 4b86c04dc703faf3bf12f6143781b5940b62cb17 Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Tue, 3 Sep 2024 23:08:33 +0300
Subject: [PATCH] feat(explorer): show error message in error page (#3121)

---
 .changeset/lazy-ties-double.md                   |  5 +++++
 packages/explorer/src/app/(explorer)/error.tsx   |  8 +++++++-
 .../[worldAddress]/explorer/DataExplorer.tsx     | 16 ++++++++++++++--
 .../explorer/src/app/api/utils/getDatabase.ts    |  6 ++++--
 4 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/lazy-ties-double.md

diff --git a/.changeset/lazy-ties-double.md b/.changeset/lazy-ties-double.md
new file mode 100644
index 0000000000..56c7381bbe
--- /dev/null
+++ b/.changeset/lazy-ties-double.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Added error messages to error page to facilitate easier troubleshooting.
diff --git a/packages/explorer/src/app/(explorer)/error.tsx b/packages/explorer/src/app/(explorer)/error.tsx
index 08c77d587a..2c1604616b 100644
--- a/packages/explorer/src/app/(explorer)/error.tsx
+++ b/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>
diff --git a/packages/explorer/src/app/(explorer)/worlds/[worldAddress]/explorer/DataExplorer.tsx b/packages/explorer/src/app/(explorer)/worlds/[worldAddress]/explorer/DataExplorer.tsx
index b2f728990d..ff7bce4fd3 100644
--- a/packages/explorer/src/app/(explorer)/worlds/[worldAddress]/explorer/DataExplorer.tsx
+++ b/packages/explorer/src/app/(explorer)/worlds/[worldAddress]/explorer/DataExplorer.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Loader } from "lucide-react";
 import { useSearchParams } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 import { TableSelector } from "./TableSelector";
@@ -7,17 +8,28 @@ 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} />
diff --git a/packages/explorer/src/app/api/utils/getDatabase.ts b/packages/explorer/src/app/api/utils/getDatabase.ts
index b819af85e8..a27cf23d3e 100644
--- a/packages/explorer/src/app/api/utils/getDatabase.ts
+++ b/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;