refactor: better error state

app/[locale]/(main)/ClientComponents/ServerListClient.tsx

@@ -6,9 +6,18 @@ import { nezhaFetcher } from "../../../../lib/utils";
 import useSWR from "swr";
 import getEnv from "../../../../lib/env-entry";
 export default function ServerListClient() {
-  const { data } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
+  const { data, error } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
     refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 2000,
   });
+  if (error)
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="text-sm font-medium opacity-40">{error.message}</p>
+        <p className="text-sm font-medium opacity-40">
+          Please check your env variables
+        </p>
+      </div>
+    );
   if (!data) return null;
   const sortedServers = data.result.sort((a, b) => {
     if (a.display_index && b.display_index) {

app/[locale]/(main)/page.tsx

@@ -1,25 +1,11 @@
 import ServerList from "../../../components/ServerList";
 import ServerOverview from "../../../components/ServerOverview";
-import getEnv from "../../../lib/env-entry";
-import { GetNezhaData } from "../../../lib/serverFetch";
-import { SWRConfig } from "swr";
-const disablePrefetch = getEnv("ServerDisablePrefetch") === "true";
-const fallback = disablePrefetch
-  ? {}
-  : {
-    "/api/server": GetNezhaData(),
-  };
+
 export default function Home() {
   return (
-    <SWRConfig
-      value={{
-        fallback: fallback,
-      }}
-    >
     <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
       <ServerOverview />
       <ServerList />
     </div>
-    </SWRConfig>
   );
 }

app/api/server/route.ts

@@ -1,17 +1,19 @@
+import { ServerApi } from "@/app/[locale]/types/nezha-api";
 import { GetNezhaData } from "@/lib/serverFetch";
 import { NextResponse } from "next/server";
 
 export const dynamic = "force-dynamic";
 
-export async function GET(_: Request) {
-  try {
-    const response = await GetNezhaData();
-    return NextResponse.json(response, { status: 200 });
-  } catch (error) {
-    console.error(error);
-    return NextResponse.json(
-      { error: "fetch nezha data failed" },
-      { status: 400 },
-    );
-  }
+interface NezhaDataResponse {
+  error?: string;
+  data?: ServerApi;
+}
+
+export async function GET(_: Request) {
+  const response = (await GetNezhaData()) as NezhaDataResponse;
+  if (response.error) {
+    console.log(response.error);
+    return NextResponse.json({ error: response.error }, { status: 400 });
+  }
+  return NextResponse.json(response, { status: 200 });
 }

lib/serverFetch.tsx

@@ -2,7 +2,6 @@
 
 import { NezhaAPI, ServerApi } from "../app/[locale]/types/nezha-api";
 import { MakeOptional } from "../app/[locale]/types/utils";
-import { error } from "console";
 import { unstable_noStore as noStore } from "next/cache";
 import getEnv from "./env-entry";
 
@@ -11,8 +10,8 @@ export async function GetNezhaData() {
 
   var nezhaBaseUrl = getEnv("NezhaBaseUrl");
   if (!nezhaBaseUrl) {
-    error("NezhaBaseUrl is not set");
-    return;
+    console.log("NezhaBaseUrl is not set");
+    return { error: "NezhaBaseUrl is not set" };
   }
 
   // Remove trailing slash
@@ -28,7 +27,12 @@ export async function GetNezhaData() {
         revalidate: 0,
       },
     });
-    const nezhaData = (await response.json()).result as NezhaAPI[];
+    const resData = await response.json();
+    const nezhaData = resData.result as NezhaAPI[];
+    if (!nezhaData) {
+      console.log(resData);
+      return { error: "NezhaData fetch failed" };
+    }
     const data: ServerApi = {
       live_servers: 0,
       offline_servers: 0,