Fix zod error (#506)

# PRの概要
zod エラーの解消
closes #370 
<!-- 変更の目的 もしくは 関連する Issue 番号 -->
<!-- 以下のように書くと Issue にリンクでき、マージ時に自動で Issue を閉じられる-->
<!-- closes #1 -->

## 具体的な変更内容
<!-- ビューの変更がある場合はスクショによる比較などがあるとわかりやすい -->

## 影響範囲
<!-- この関数を変更したのでこの機能にも影響がある、など -->

## 動作要件
<!-- 動作に必要な 環境変数 / 依存関係 / DBの更新 など -->

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->

## レビューリクエストを出す前にチェック！

- [ ] 改めてセルフレビューしたか
- [ ] 手動での動作検証を行ったか
- [ ] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [ ] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

web/package.json

@@ -14,6 +14,7 @@
     "@fontsource/roboto": "^5.0.13",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.15.20",
+    "devalue": "^5.1.1",
     "firebase": "^10.12.2",
     "framer-motion": "^11.3.23",
     "notistack": "^3.0.1",

web/src/api/chat/chat.ts

@@ -54,7 +54,16 @@ export async function updateMessage(
 export async function overview(): Promise<RoomOverview[]> {
   const res = await credFetch("GET", endpoints.roomOverview);
   if (res.status === 401) throw new ErrUnauthorized();
-  return await res.json();
+  const json: RoomOverview[] = await res.json();
+
+  if (!Array.isArray(json)) return json;
+
+  for (const room of json) {
+    if (!room.lastMsg) continue;
+    room.lastMsg.createdAt = new Date(room.lastMsg.createdAt);
+  }
+
+  return json;
 }
 
 //// DM関連 ////
@@ -74,15 +83,19 @@ export async function sendDM(
   return res.json();
 }
 
-// WARNING: don't use this outside of api/
 export async function getDM(friendId: UserID): Promise<DMRoom> {
   const res = await credFetch("GET", endpoints.dmWith(friendId));
   if (res.status === 401) throw new ErrUnauthorized();
   if (res.status !== 200)
     throw new Error(
       `getDM() failed: expected status code 200, got ${res.status}`,
     );
-  return res.json();
+  const json: DMRoom = await res.json();
+  if (!Array.isArray(json?.messages)) return json;
+  for (const m of json.messages) {
+    m.createdAt = new Date(m.createdAt);
+  }
+  return json;
 }
 
 ////グループチャット関連////

web/src/hooks/useSWR.ts

@@ -1,3 +1,4 @@
+import { parse, stringify } from "devalue";
 import { useCallback, useEffect, useState } from "react";
 import type { ZodSchema } from "zod";
 
@@ -72,15 +73,16 @@ export function useSWR<T>(
       const result = schema.safeParse(data);
       if (!result.success) {
         console.error(
-          `WARNING: useSWR: UNEXPECTED ZOD PARSE ERROR: Schema Parse Error: ${result.error.message}`,
+          `useSWR: Schema Parse Error | in incoming data | at schema ${CACHE_KEY} | Error: ${result.error.message}`,
         );
+        console.log("data:", data);
       }
       setState({
         data: data,
         current: "success",
         error: null,
       });
-      localStorage.setItem(CACHE_KEY, JSON.stringify(data));
+      localStorage.setItem(CACHE_KEY, stringify(data));
     } catch (e) {
       setState({
         data: null,
@@ -92,7 +94,7 @@ export function useSWR<T>(
 
   const write = useCallback(
     (data: T) => {
-      localStorage.setItem(CACHE_KEY, JSON.stringify(data));
+      localStorage.setItem(CACHE_KEY, stringify(data));
     },
     [CACHE_KEY],
   );
@@ -115,10 +117,16 @@ function loadOldData<T>(
   const oldData = localStorage.getItem(CACHE_KEY);
   if (oldData) {
     try {
-      const data = JSON.parse(oldData);
-      const parse = schema.safeParse(data);
-      if (!parse.success)
-        console.error(`useSWR: zodParseError: ${parse.error}`);
+      const data = parse(oldData);
+      const parsed = schema.safeParse(data);
+      if (!parsed.success) {
+        console.error(
+          `useSWR: zodParseError | in stale data | at schema ${CACHE_KEY} | ${parsed.error}`,
+        );
+        console.log("data:", data);
+        // because loading old data isn't critical to the application and wrong stale data may cause several problems,
+        throw "";
+      }
       return {
         current: "stale",
         data,