fix: chart error state

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

@@ -47,12 +47,20 @@ export function NetworkChartClient({ server_id }: { server_id: number }) {
     },
   );
 
-  if (error)
+  if (error) {
     return (
-      <div className="flex flex-col items-center justify-center">
-        <p className="text-sm font-medium opacity-40">{error.message}</p>
-      </div>
+      <>
+        <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">
+            {t("chart_fetch_error_message")}
+          </p>
+        </div>
+        <NetworkChartLoading />
+      </>
     );
+  }
+
   if (!data) return <NetworkChartLoading />;
 
   function transformData(data: NezhaAPIMonitor[]) {

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

@@ -1,13 +1,23 @@
 import { BackIcon } from "@/components/Icon";
 import { Loader } from "@/components/loading/Loader";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useLocale } from "next-intl";
+import { useRouter } from "next/navigation";
 
 export default function NetworkChartLoading() {
+  const router = useRouter();
+  const locale = useLocale();
+
   return (
     <Card>
       <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
         <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5">
-          <CardTitle className="flex items-center gap-0.5 text-xl">
+          <CardTitle
+            onClick={() => {
+              router.push(`/${locale}/`);
+            }}
+            className="flex items-center cursor-pointer gap-0.5 text-xl"
+          >
             <BackIcon />
             <div className="aspect-auto h-[20px] w-24 bg-muted"></div>
           </CardTitle>

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

@@ -1,15 +1,14 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-import Image from "next/image";
-import useSWR from "swr";
-
+import { ServerApi } from "@/app/[locale]/types/nezha-api";
 import { Loader } from "@/components/loading/Loader";
 import { Card, CardContent } from "@/components/ui/card";
 import getEnv from "@/lib/env-entry";
 import { formatBytes, nezhaFetcher } from "@/lib/utils";
 import blogMan from "@/public/blog-man.webp";
-import { ServerApi } from "@/app/[locale]/types/nezha-api";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import useSWR from "swr";
 
 export default function ServerOverviewClient() {
   const t = useTranslations("ServerOverviewClient");

components/ServerCard.tsx

@@ -1,3 +1,6 @@
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import ServerCardPopover from "@/components/ServerCardPopover";
+import ServerFlag from "@/components/ServerFlag";
 import ServerUsageBar from "@/components/ServerUsageBar";
 import { Card } from "@/components/ui/card";
 import {
@@ -10,10 +13,6 @@ import { useLocale, useTranslations } from "next-intl";
 import { env } from "next-runtime-env";
 import { useRouter } from "next/navigation";
 
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
-import ServerCardPopover from "@/components/ServerCardPopover";
-import ServerFlag from "@/components/ServerFlag";
-
 export default function ServerCard({
   serverInfo,
 }: {

components/ServerCardPopover.tsx

@@ -1,8 +1,7 @@
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
 import { cn, formatBytes } from "@/lib/utils";
 import { useTranslations } from "next-intl";
 
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
-
 export function ServerCardPopoverCard({
   className,
   title,

components/ServerList.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-
 import ServerListClient from "@/app/[locale]/(main)/ClientComponents/ServerListClient";
+import React from "react";
 
 export default async function ServerList() {
   return <ServerListClient />;

lib/serverFetch.tsx

@@ -1,10 +1,9 @@
 "use server";
 
-import { unstable_noStore as noStore } from "next/cache";
-
 import { NezhaAPI, ServerApi } from "@/app/[locale]/types/nezha-api";
 import { MakeOptional } from "@/app/[locale]/types/utils";
 import getEnv from "@/lib/env-entry";
+import { unstable_noStore as noStore } from "next/cache";
 
 export async function GetNezhaData() {
   noStore();

lib/utils.ts

@@ -1,8 +1,7 @@
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
-
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

messages/en.json

@@ -29,7 +29,8 @@
     "Offline": "Offline"
   },
   "NetworkChartClient": {
-    "avg_delay": "Latency"
+    "avg_delay": "Latency",
+    "chart_fetch_error_message": "Failed to fetch network data, please check if the server monitoring is enabled"
   },
   "NetworkChart": {
     "ServerMonitorCount": "Services"

messages/ja.json

@@ -29,7 +29,8 @@
     "Offline": "オフライン"
   },
   "NetworkChartClient": {
-    "avg_delay": "遅延"
+    "avg_delay": "遅延",
+    "chart_fetch_error_message": "ネットワークデータの取得に失敗しました。サーバーの監視が有効になっているかどうかを確認してください"
   },
   "NetworkChart": {
     "ServerMonitorCount": "サービス"

messages/zh-t.json

@@ -29,7 +29,8 @@
     "Offline": "離線"
   },
   "NetworkChartClient": {
-    "avg_delay": "延遲"
+    "avg_delay": "延遲",
+    "chart_fetch_error_message": "獲取網絡數據失敗，請檢查是否開啟服務端監控"
   },
   "NetworkChart": {
     "ServerMonitorCount": "個監測服務"

messages/zh.json

@@ -29,7 +29,8 @@
     "Offline": "离线"
   },
   "NetworkChartClient": {
-    "avg_delay": "延迟"
+    "avg_delay": "延迟",
+    "chart_fetch_error_message": "获取网络数据失败，请检查是否开启服务端监控"
   },
   "NetworkChart": {
     "ServerMonitorCount": "个监控服务"