サーバーのコードをリファクタリング (#64)

* refactor: 共通の設定を main.ts へ

* refactor: エラーハンドリングを共通化

* refactor: Prisma でのデータ取得を修正

* fix: middleware のレスポンスは乗らないので回避

Author: nakaterm

client/src/pages/Home.tsx

@@ -31,8 +31,9 @@ export default function HomePage() {
           let errorMessage = "イベントの取得に失敗しました。";
           try {
             const data = await res.json();
-            if (data && typeof data.message === "string" && data.message.trim()) {
-              errorMessage = data.message.trim();
+            const err = data as unknown as { message: string }; // Middleware のレスポンスは Hono RPC の型に乗らない
+            if (typeof err.message === "string" && err.message.trim()) {
+              errorMessage = err.message.trim();
             }
           } catch (_) {
             // レスポンスがJSONでない場合は無視

client/src/pages/Project.tsx

@@ -93,6 +93,7 @@ export default function ProjectPage() {
     projectName: string;
   } | null>(null);
 
+  // TODO: グローバルにしないと、delete の際は遷移を伴うので表示されない
   const [toast, setToast] = useState<{
     message: string;
     variant: "success" | "error";
@@ -215,9 +216,8 @@ export default function ProjectPage() {
           projectName: name,
         });
       } else {
-        const { message } = await res.json();
         setToast({
-          message,
+          message: "イベントの作成に失敗しました。",
           variant: "error",
         });
         setTimeout(() => setToast(null), 3000);
@@ -604,6 +604,7 @@ export default function ProjectPage() {
                             if (!res.ok) {
                               throw new Error("削除に失敗しました。");
                             }
+                            // TODO: トーストをグローバルにする
                             navigate("/home");
                             setToast({
                               message: "イベントを削除しました。",

server/src/main.ts

@@ -3,16 +3,23 @@ import { PrismaClient } from "@prisma/client";
 import dotenv from "dotenv";
 import { Hono } from "hono";
 import { cors } from "hono/cors";
+import { customAlphabet } from "nanoid";
 import { browserIdMiddleware } from "./middleware/browserId.js";
 import projectsRoutes from "./routes/projects.js";
 
 dotenv.config();
 
+/**
+ * ハイフン・アンダースコアを含まない Nano ID 形式。
+ */
+export const nanoid = customAlphabet("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", 21);
+
 export const prisma = new PrismaClient();
-const port = process.env.PORT || 3000;
+
+const port = Number(process.env.PORT) || 3000;
 const allowedOrigins = process.env.CORS_ALLOW_ORIGINS?.split(",") || [];
 
-type AppVariables = {
+export type AppVariables = {
   browserId: string;
 };
 
@@ -28,12 +35,16 @@ const app = new Hono<{ Variables: AppVariables }>()
   .get("/", (c) => {
     return c.json({ message: "Hello! イツヒマ？" });
   })
-  .route("/projects", projectsRoutes);
+  .route("/projects", projectsRoutes)
+  .onError((err, c) => {
+    console.error(err);
+    return c.json({ message: "Internal Server Error" }, 500);
+  });
 
 serve(
   {
     fetch: app.fetch,
-    port: Number(port),
+    port,
     hostname: "0.0.0.0",
   },
   () => {