feat(fe): optimize error handling, state consistency, and WS feedback

- Add global SWR config with exponential backoff retry (swr-config.ts) - Add ErrorBoundary component for React crash recovery (error-boundary.tsx) - Standardize ErrorState onRetry on all 6 dashboard views (dashboard, media, messages, moderation, recordings, voice) - Fix useAction: expose resetError + onError callback - Refactor useSpeakers to SWR-backed state (was local useState) for consistent cache/revalidate semantics with other hooks - Remove polling in useReview (15s refreshInterval); replace with useReviewWsSync subscribing to WS moderation_action events - Extract hashUserId to lib/hash.ts (de-dup with ambient-canvas) - WS context: add reconnect/error toast feedback via onStatusChange - WS connection: expose reconnectAttemptCount getter All typecheck + lint clean, Next 16 build passes.
2026-08-25 13:46:15 +07:00
parent 796c6390ac
commit 31e303c187
17 changed files with 402 additions and 79 deletions
@@ -31,6 +31,7 @@ export {
  useMessagesWsSync,
  useRecentEdits,
  useReview,
+  useReviewWsSync,
  useSemanticSearch,
  useTextChannels,
 } from "./use-messages";
@@ -7,17 +7,23 @@ export interface UseActionState {

 /**
 * A lightweight mutation hook with a TanStack-compatible surface
- * ({ mutate, mutateAsync, isPending, error }) built on plain state —
+ * ({ mutate, mutateAsync, isPending, error, resetError }) built on plain state —
 * the SWR replacement for useMutation. Fire-and-forget via `mutate`,
 * await the result via `mutateAsync`.
 *
 * `onSuccess` receives (data, args) and may perform SWR cache updates
 * (e.g. `mutate(key, data, { revalidate: false })`).
+ *
+ * `onError` receives the caught error and args — use it for side-effect
+ * logging without throwing (the error is also surfaced via `state.error`).
+ *
+ * `resetError` clears the error state without re-running the action.
 */
 export function useAction<TArgs = void, TResult = unknown>(
  fn: (args: TArgs) => Promise<TResult>,
  options?: {
    onSuccess?: (data: TResult, args: TArgs) => void | Promise<void>;
+    onError?: (error: Error, args: TArgs) => void | Promise<void>;
  },
 ) {
  const [state, setState] = useState<UseActionState>({
@@ -29,6 +35,8 @@ export function useAction<TArgs = void, TResult = unknown>(
  fnRef.current = fn;
  const onSuccessRef = useRef(options?.onSuccess);
  onSuccessRef.current = options?.onSuccess;
+  const onErrorRef = useRef(options?.onError);
+  onErrorRef.current = options?.onError;

  const run = useCallback(async (args?: TArgs): Promise<TResult> => {
    setState({ isPending: true, error: null });
@@ -38,8 +46,10 @@ export function useAction<TArgs = void, TResult = unknown>(
      setState({ isPending: false, error: null });
      return data;
    } catch (err) {
-      setState({ isPending: false, error: err as Error });
-      throw err;
+      const error = err as Error;
+      setState({ isPending: false, error });
+      await onErrorRef.current?.(error, args as TArgs);
+      throw error;
    }
  }, []);

@@ -50,6 +60,6 @@ export function useAction<TArgs = void, TResult = unknown>(
    mutateAsync: run,
    isPending: state.isPending,
    error: state.error,
-    reset: () => setState({ isPending: false, error: null }),
+    resetError: useCallback(() => setState((s) => ({ ...s, error: null })), []),
  };
 }
@@ -124,21 +124,43 @@ export function useImages(guildId: string) {
  );
 }

-// ── Review ───────────────────────────────────────
+// ── Review ────────────────────────────────────────
+// WS-driven now (was: refreshInterval:15000 polling). The backend broadcasts
+// `moderation_action` events over WS whenever a moderation action is created;
+// the review list is revalidated on that event instead of polling.

 export function useReview(channelId?: string) {
+  const key = msgKeys.review(channelId);
  return useSWR<MessageRecord[]>(
-    msgKeys.review(channelId),
+    key,
    async () => {
      const result = await messagesApi.getReview(50, channelId || undefined);
      return result.results;
    },
    {
-      refreshInterval: 15_000,
+      revalidateOnFocus: true,
+      // No more polling — WS sync handles real-time updates.
    },
  );
 }

+/**
+ * Subscribe to WS `moderation_action` events and invalidate the review
+ * SWR cache. Replaces the old 15-second polling interval that caused
+ * duplicate requests and race conditions with WS updates.
+ */
+export function useReviewWsSync(ws: WsHook, channelId?: string) {
+  const { mutate } = useSWRConfig();
+  const key = msgKeys.review(channelId);
+
+  useEffect(() => {
+    const unsub = ws.on("moderation_action", () => {
+      void mutate(key, undefined, { revalidate: true });
+    });
+    return unsub;
+  }, [ws, key, mutate]);
+}
+
 // ── Detail ───────────────────────────────────────

 export function useMessageDetail(id: string | null) {
@@ -168,7 +190,11 @@ export function useMessageDetail(id: string | null) {
    message: detail.data ?? null,
    attachments: attachments.data ?? [],
    loading: detail.isLoading || attachments.isLoading,
-    error: detail.error,
+    error: detail.error ?? attachments.error,
+    refetch: () => {
+      void detail.mutate();
+      void attachments.mutate();
+    },
  };
 }

@@ -216,7 +242,7 @@ export function useMessagesWsSync(ws: WsHook, guildId: string) {
  const { mutate } = useSWRConfig();
  useEffect(() => {
    if (!guildId) return;
-    // Patch every message-list key for this guild (all channels + "**filtered**").
+    // Patch every message-list key for this guild (all channels + "__all__").
    // The updater receives the SWR key so we can honor its channel filter:
    // a live `message_created`/updated for channel B must NOT be prepended to
    // a list that is filtered down to channel A.
@@ -255,13 +281,13 @@ export function useMessagesWsSync(ws: WsHook, guildId: string) {
    });
    const unsub2 = ws.on("message_updated", (data) => {
      const msg = data as Partial<MessageRecord> & { id: string };
-      // The gateway broadcasts a PARTIAL update ({ id, edited_content,
-      // edited_at, ... }) — merge it over the existing record instead of
-      // replacing it, or the card would lose username/content/channel/etc.
+      // The gateway broadcasts a PARTIAL update ({ id } plus the changed fields
+      // — merge it over the existing record instead of replacing it, or the
+      // card would lose username/content/channel/etc.
      patchLists(
        (_k, m) =>
          (m as Partial<MessageRecord>).channel_id === undefined ||
-          matchesFilter(_k as unknown[], m),
+          matchesFilter(_k as unknown[], m as { channel_id?: string }),
        (old) =>
          old
            ? {
@@ -271,7 +297,7 @@ export function useMessagesWsSync(ws: WsHook, guildId: string) {
                ),
              }
            : old,
-        msg,
+        msg as { channel_id?: string },
      );
      void mutate(
        msgKeys.detail(msg.id),
@@ -321,7 +347,7 @@ export function useMessagesWsSync(ws: WsHook, guildId: string) {
 * `message_snapshot` into the SWR list as it arrives, so the UI renders
 * progressively. Falls back to the batched `messagesApi.list` if WS is down.
 *
- * Returns: { streaming, streamed, error }.
+ * Returns: { streaming, error }.
 */
 export function useMessagesStream(
  ws: WsHook,
@@ -414,3 +440,5 @@ export function useRecentEdits(
    { fallbackData: initialData },
  );
 }
+
+export { msgKeys };
@@ -4,19 +4,13 @@ import { useAction } from "@/hooks/use-action";
 import { voiceApi } from "@/lib/api";
 import { MicTransmitter } from "@/lib/audio/mic-transmit";
 import { PcmPlayer } from "@/lib/audio/pcm-player";
+import { hashUserId } from "@/lib/hash";
 import type { ActiveSpeaker, Channel, VoiceStatus } from "@/lib/types";
 import type { PcmChunk } from "@/lib/ws/types";
 import type { WsHook } from "@/lib/ws-hook";

-/** FNV-1a 32-bit — same hash the gateway uses to tag PCM frames. */
-export function hashUserId(userId: string): number {
-  let hash = 0x811c9dc5;
-  for (let i = 0; i < userId.length; i++) {
-    hash ^= userId.charCodeAt(i);
-    hash = Math.imul(hash, 0x01000193);
-  }
-  return hash >>> 0;
-}
+// Re-export for components that still import hashUserId from this module.
+export { hashUserId };

 const STATUS_KEY = ["voice-status"] as const;

@@ -34,6 +28,8 @@ export function useVoiceChannels(guildId: string) {
  );
 }

+const SPEAKERS_KEY = ["voice-speakers"] as const;
+
 /**
 * Live shared speaker state.
 *
@@ -44,48 +40,66 @@ export function useVoiceChannels(guildId: string) {
 *    every client with the same list);
 *  - `voice_active_user` → incremental upsert of a single speaker delta.
 *
+ * Now backed by SWR (consistent with all other hooks) so cache, revalidation,
+ * and deduping apply. WS events mutate the SWR cache directly
+ * ({ revalidate: false }) to avoid refetching the full status.
+ *
 * This replaces the old per-browser model where each tab accumulated speakers
 * only from events it happened to receive while mounted.
 */
 export function useSpeakers(initialStatusActive?: ActiveSpeaker[]) {
-  const [speakers, setSpeakers] = useState<ActiveSpeaker[]>(
-    initialStatusActive ?? [],
+  const {
+    data: speakers,
+    error,
+    mutate,
+    isValidating,
+  } = useSWR<ActiveSpeaker[]>(SPEAKERS_KEY, () => Promise.resolve([]), {
+    fallbackData: initialStatusActive ?? [],
+    revalidateOnMount: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
+
+  const subscribe = useCallback(
+    (ws: WsHook) => {
+      const unsubSnapshot = ws.on("voice_state", (data) => {
+        const state = data as { activeSpeakers?: ActiveSpeaker[] };
+        if (Array.isArray(state?.activeSpeakers)) {
+          void mutate(state.activeSpeakers, { revalidate: false });
+        }
+      });
+      const unsub = ws.on("voice_active_user", (data) => {
+        const speaker = data as ActiveSpeaker;
+        void mutate(
+          (prev: ActiveSpeaker[] | undefined) => {
+            const arr = prev ?? [];
+            const idx = arr.findIndex((s) => s.userId === speaker.userId);
+            if (idx >= 0) {
+              const next = [...arr];
+              next[idx] = speaker;
+              return next;
+            }
+            return [...arr, speaker];
+          },
+          { revalidate: false },
+        );
+      });
+      return () => {
+        unsubSnapshot();
+        unsub();
+      };
+    },
+    [mutate],
  );

-  const subscribe = useCallback((ws: WsHook) => {
-    const unsubSnapshot = ws.on("voice_state", (data) => {
-      const state = data as { activeSpeakers?: ActiveSpeaker[] };
-      if (Array.isArray(state?.activeSpeakers)) {
-        setSpeakers(state.activeSpeakers);
-      }
-    });
-    const unsub = ws.on("voice_active_user", (data) => {
-      const speaker = data as ActiveSpeaker;
-      setSpeakers((prev) => {
-        const idx = prev.findIndex((s) => s.userId === speaker.userId);
-        if (idx >= 0) {
-          const next = [...prev];
-          next[idx] = speaker;
-          return next;
-        }
-        return [...prev, speaker];
-      });
-    });
-    return () => {
-      unsubSnapshot();
-      unsub();
-      setSpeakers([]);
-    };
-  }, []);
-
-  return { speakers, subscribe };
+  return { speakers: speakers ?? [], subscribe, error, isValidating };
 }

 function useStatusInvalidator() {
  const { mutate } = useSWRConfig();
-  return () => {
+  return useCallback(() => {
    void mutate(STATUS_KEY);
-  };
+  }, [mutate]);
 }

 export function useVoiceConnect() {