feat: implement database connection check and user feedback for missing DATABASE_URL; update translations for error messages

Author: Emiyaaaaa

app/api/auth/check/route.ts

@@ -1,17 +1,22 @@
 import { NextResponse } from "next/server";
 
 import { verifyPasswordRequest } from "@/utils/passwordServer";
+import { sqlExists } from "@/utils/sql";
 
 export async function GET(request: Request) {
   const auth = await verifyPasswordRequest(request);
 
   if (!auth.ok) {
-    return NextResponse.json({ authenticated: false, passwordLength: auth.passwordLength }, { status: 401 });
+    return NextResponse.json(
+      { authenticated: false, passwordLength: auth.passwordLength, sqlExists },
+      { status: 401 }
+    );
   }
 
   return NextResponse.json({
     authenticated: true,
     enabled: auth.enabled,
     passwordLength: auth.passwordLength,
+    sqlExists,
   });
 }

app/page.tsx

@@ -34,6 +34,7 @@ const Page = () => {
   const query = useSearchParams();
   const router = useRouter();
   const [isAuthorized, setIsAuthorized] = useState(false);
+  const [sqlExists, setSqlExists] = useState<boolean | null>(null);
 
   const { initData: initGroupData, groupId, setGroupId } = useGroup();
   const { initData: initFinanceChangeData } = useFinanceChangeData();
@@ -46,12 +47,18 @@ const Page = () => {
   useEffect(() => {
     fetch("/api/auth/check")
       .then(async (res) => {
+        const data = await res.json().catch(() => ({}));
+        setSqlExists(data.sqlExists !== false);
+
         if (res.ok) {
           setIsAuthorized(true);
           return;
         }
 
-        const data = await res.json().catch(() => ({}));
+        if (data.sqlExists === false) {
+          return;
+        }
+
         const passwordLength = normalizePasswordLength(data.passwordLength ?? DEFAULT_PASSWORD_LENGTH);
 
         router.replace(`/login?length=${passwordLength}`);
@@ -93,6 +100,34 @@ const Page = () => {
     }
   }, [groupId, initFinanceChangeData, initFinanceData, isAuthorized]);
 
+  if (sqlExists === false) {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-6">
+        <div className="max-w-xl w-full rounded-large border border-default-200 bg-content1 p-6 md:p-8 shadow-sm">
+          <h1 className="text-xl md:text-2xl font-semibold mb-3">{t("dbMissingTitle")}</h1>
+          <p className="text-default-600 text-sm md:text-base mb-4">{t("dbMissingDescription")}</p>
+          <pre className="bg-default-100 text-default-800 text-xs md:text-sm rounded-medium p-3 overflow-x-auto mb-4">
+{`DATABASE_URL="postgres://..."`}
+          </pre>
+          <p className="text-default-500 text-xs md:text-sm mb-5">{t("dbMissingHint")}</p>
+          <div className="flex flex-wrap gap-3">
+            <Button
+              as={Link}
+              color="primary"
+              href="https://github.com/Emiyaaaaa/fibofinance#readme"
+              target="_blank"
+            >
+              {t("dbMissingDocs")}
+            </Button>
+            <Button variant="flat" onPress={() => window.location.reload()}>
+              {t("dbMissingRetry")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   if (!isAuthorized) {
     return (
       <div className="flex min-h-screen items-center justify-center">

i18n/en.json

@@ -11,7 +11,12 @@
     "aiAdviceErrorServer": "The advice service is temporarily unavailable. Please try again in a moment.",
     "aiAdviceErrorClient": "We couldn’t complete this request. Please try again or rephrase your question.",
     "aiAdviceErrorNetwork": "Network error. Check your connection and try again.",
-    "changeGroupSuccess": "Successfully switched to - {groupName}"
+    "changeGroupSuccess": "Successfully switched to - {groupName}",
+    "dbMissingTitle": "Database is not configured",
+    "dbMissingDescription": "DATABASE_URL is not set. The app needs a database connection to work. Add it to your deployment environment or local .env.local:",
+    "dbMissingHint": "After setting it, redeploy or restart the app and refresh this page.",
+    "dbMissingDocs": "View deployment docs",
+    "dbMissingRetry": "Refresh"
   },
   "addGroup": {
     "default": "Default",

i18n/zh.json

@@ -11,7 +11,12 @@
     "aiAdviceErrorServer": "建议服务暂时不可用，请稍后重试。",
     "aiAdviceErrorClient": "请求未能完成，请稍后重试或换个说法。",
     "aiAdviceErrorNetwork": "网络异常，请检查连接后重试。",
-    "changeGroupSuccess": "已成功切换至 - {groupName}"
+    "changeGroupSuccess": "已成功切换至 - {groupName}",
+    "dbMissingTitle": "尚未配置数据库",
+    "dbMissingDescription": "未检测到 DATABASE_URL 环境变量，应用需要连接数据库才能使用。请在部署环境或本地 .env.local 中配置：",
+    "dbMissingHint": "配置完成后请重新部署或重启应用，并刷新页面。",
+    "dbMissingDocs": "查看部署文档",
+    "dbMissingRetry": "刷新页面"
   },
   "addGroup": {
     "default": "默认",

scripts/sync-database.ts

@@ -3,6 +3,11 @@ import { loadEnvConfig } from "@next/env";
 loadEnvConfig(process.cwd());
 
 const main = async () => {
+  if (!process.env.DATABASE_URL) {
+    console.log("DATABASE_URL is not set, skip database sync");
+    return;
+  }
+
   const { syncDatabase } = await import("../utils/syncDatabase");
 
   await syncDatabase();

utils/passwordServer.ts

@@ -8,7 +8,7 @@ import {
   PasswordLength,
   normalizePasswordLength,
 } from "./password";
-import { sql } from "./sql";
+import { sql, sqlExists } from "./sql";
 
 export interface PasswordSettings {
   passwordMd5: string;
@@ -81,6 +81,10 @@ const ensureSettingsTable = async () => {
 };
 
 export const getPasswordSettings = async (): Promise<PasswordSettings | null> => {
+  if (!sqlExists) {
+    return null;
+  }
+
   await ensureSettingsTable();
 
   const rows = await sql("SELECT value FROM settings WHERE key = $1 LIMIT 1", [PASSWORD_SETTING_KEY]);

utils/sql.ts

@@ -1,3 +1,4 @@
 import { neon } from "@neondatabase/serverless";
 
 export const sql = neon(`${process.env.DATABASE_URL}`);
+export const sqlExists = Boolean(process.env.DATABASE_URL);