@uniai-fe/uds-templates 0.6.10 → 0.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/cctv/utils/debug.ts

@@ -11,13 +11,36 @@ export interface CctvDebugEvent {
   source: string;
 }
 
+export interface CctvDebugReconnectStartSummary {
+  at: string;
+  caller: string | null;
+  camId: string | null;
+  connectionState: string | null;
+  isPostConnectedReconnectReady: boolean | null;
+  reconnectReason: string | null;
+}
+
+export interface CctvDebugSummary {
+  connectionStateCounts: Record<string, number>;
+  eventCounts: Record<string, number>;
+  first: string | null;
+  generatedAt: string;
+  last: string | null;
+  reconnectCallers: Record<string, number>;
+  reconnectReasons: Record<string, number>;
+  reconnectStarts: CctvDebugReconnectStartSummary[];
+  total: number;
+}
+
 export interface CctvDebugBuffer {
   clear: () => void;
   dump: () => CctvDebugEvent[];
   enabled: true;
   events: CctvDebugEvent[];
+  filter: (keywords?: readonly string[]) => CctvDebugEvent[];
   limit: number;
   sequence: number;
+  summary: () => CctvDebugSummary;
 }
 
 declare global {
@@ -28,15 +51,175 @@ declare global {
 
 const DEBUG_QUERY_KEYS = ["udsCctvDebug", "cctvDebug"] as const;
 const DEBUG_STORAGE_KEYS = ["uds:cctv:debug", "UDS_CCTV_DEBUG"] as const;
+const DEBUG_CONSOLE_QUERY_KEYS = [
+  "udsCctvDebugConsole",
+  "cctvDebugConsole",
+] as const;
+const DEBUG_CONSOLE_STORAGE_KEYS = [
+  "uds:cctv:debug:console",
+  "UDS_CCTV_DEBUG_CONSOLE",
+] as const;
 const DEBUG_ENABLED_VALUES = new Set(["1", "true", "yes", "on", "debug"]);
+const DEBUG_DISABLED_VALUES = new Set(["0", "false", "no", "off"]);
 const DEBUG_BUFFER_LIMIT = 1000;
+const DEBUG_DEFAULT_FILTER_KEYWORDS = [
+  "reconnect",
+  "close",
+  "rejected",
+  "connection-state:change",
+  "track:received",
+] as const;
 
 const isBrowser = (): boolean =>
   typeof window !== "undefined" && typeof document !== "undefined";
 
-const isDebugValueEnabled = (value: string | null): boolean =>
-  value === "" ||
-  (typeof value === "string" && DEBUG_ENABLED_VALUES.has(value));
+const getDebugValueOverride = (value: string | null): boolean | null => {
+  if (value === "") return true;
+  if (typeof value !== "string") return null;
+
+  const normalizedValue = value.toLowerCase();
+  if (DEBUG_ENABLED_VALUES.has(normalizedValue)) return true;
+  if (DEBUG_DISABLED_VALUES.has(normalizedValue)) return false;
+  return null;
+};
+
+const getDebugQueryOverride = (keys: readonly string[]): boolean | null => {
+  const query = new URLSearchParams(window.location.search);
+  for (const key of keys) {
+    if (!query.has(key)) continue;
+
+    const override = getDebugValueOverride(query.get(key));
+    if (override !== null) return override;
+  }
+
+  return null;
+};
+
+const getDebugStorageOverride = (keys: readonly string[]): boolean | null => {
+  for (const key of keys) {
+    try {
+      const override = getDebugValueOverride(window.localStorage.getItem(key));
+      if (override !== null) return override;
+    } catch {
+      return false;
+    }
+  }
+
+  return null;
+};
+
+const isLocalhostDebugDefaultEnabled = (): boolean => {
+  const { hostname } = window.location;
+  return (
+    hostname === "localhost" ||
+    hostname === "127.0.0.1" ||
+    hostname === "[::1]" ||
+    hostname === "::1" ||
+    hostname.endsWith(".localhost")
+  );
+};
+
+const getPayloadString = (
+  payload: Record<string, unknown> | undefined,
+  key: string,
+): string | null => {
+  const value = payload?.[key];
+  return typeof value === "string" ? value : null;
+};
+
+const getPayloadBoolean = (
+  payload: Record<string, unknown> | undefined,
+  key: string,
+): boolean | null => {
+  const value = payload?.[key];
+  return typeof value === "boolean" ? value : null;
+};
+
+const getReconnectCaller = (
+  payload: Record<string, unknown> | undefined,
+): string | null => {
+  const callerStack = payload?.callerStack;
+  const stackLines = Array.isArray(callerStack)
+    ? callerStack.filter((line): line is string => typeof line === "string")
+    : typeof callerStack === "string"
+      ? callerStack.split("\n")
+      : [];
+
+  return (
+    stackLines
+      .find(
+        line =>
+          line.includes("CCTVManagerVideoOverlay") ||
+          line.includes("reconnectOnFocus"),
+      )
+      ?.trim() ?? null
+  );
+};
+
+const countBy = <T extends string>(
+  target: Record<T, number>,
+  key: T | null,
+): void => {
+  if (!key) return;
+  target[key] = (target[key] ?? 0) + 1;
+};
+
+const filterCctvDebugEvents = (
+  events: readonly CctvDebugEvent[],
+  keywords: readonly string[] = DEBUG_DEFAULT_FILTER_KEYWORDS,
+): CctvDebugEvent[] =>
+  events.filter(entry =>
+    keywords.some(keyword => entry.event.includes(keyword)),
+  );
+
+const summarizeCctvDebugEvents = (
+  events: readonly CctvDebugEvent[],
+): CctvDebugSummary => {
+  const eventCounts: Record<string, number> = {};
+  const connectionStateCounts: Record<string, number> = {};
+  const reconnectReasons: Record<string, number> = {};
+  const reconnectCallers: Record<string, number> = {};
+  const reconnectStarts: CctvDebugReconnectStartSummary[] = [];
+
+  for (const entry of events) {
+    countBy(eventCounts, entry.event);
+
+    if (entry.event === "connection-state:change") {
+      countBy(connectionStateCounts, getPayloadString(entry.payload, "state"));
+    }
+
+    if (entry.event !== "reconnect-stream:start") continue;
+
+    const reconnectReason = getPayloadString(entry.payload, "reconnectReason");
+    const caller = getReconnectCaller(entry.payload);
+
+    countBy(reconnectReasons, reconnectReason ?? "none");
+    countBy(reconnectCallers, caller ?? "unknown");
+    reconnectStarts.push({
+      at: entry.at,
+      caller,
+      camId: getPayloadString(entry.payload, "camId"),
+      connectionState: getPayloadString(entry.payload, "connectionState"),
+      isPostConnectedReconnectReady: getPayloadBoolean(
+        entry.payload,
+        "isPostConnectedReconnectReady",
+      ),
+      reconnectReason,
+    });
+  }
+
+  return {
+    connectionStateCounts,
+    eventCounts,
+    first: events[0]?.at ?? null,
+    generatedAt: new Date().toISOString(),
+    last: events[events.length - 1]?.at ?? null,
+    reconnectCallers,
+    reconnectReasons,
+    reconnectStarts,
+    total: events.length,
+  };
+};
 
 /**
  * identity/stream key를 원문 대신 추적 가능한 hash label로 바꾼다.
@@ -79,20 +262,30 @@ export const getCctvDebugUrlLabel = (
 export const isCctvDebugEnabled = (): boolean => {
   if (!isBrowser()) return false;
 
-  const query = new URLSearchParams(window.location.search);
-  for (const key of DEBUG_QUERY_KEYS) {
-    if (query.has(key) && isDebugValueEnabled(query.get(key))) return true;
-  }
+  const queryOverride = getDebugQueryOverride(DEBUG_QUERY_KEYS);
+  if (queryOverride !== null) return queryOverride;
 
-  for (const key of DEBUG_STORAGE_KEYS) {
-    try {
-      if (isDebugValueEnabled(window.localStorage.getItem(key))) return true;
-    } catch {
-      return false;
-    }
-  }
+  const storageOverride = getDebugStorageOverride(DEBUG_STORAGE_KEYS);
+  if (storageOverride !== null) return storageOverride;
 
-  return false;
+  return isLocalhostDebugDefaultEnabled();
+};
+
+const isCctvDebugConsoleEnabled = (): boolean => {
+  if (!isBrowser()) return false;
+
+  const consoleQueryOverride = getDebugQueryOverride(DEBUG_CONSOLE_QUERY_KEYS);
+  if (consoleQueryOverride !== null) return consoleQueryOverride;
+
+  const consoleStorageOverride = getDebugStorageOverride(
+    DEBUG_CONSOLE_STORAGE_KEYS,
+  );
+  if (consoleStorageOverride !== null) return consoleStorageOverride;
+
+  return (
+    getDebugQueryOverride(DEBUG_QUERY_KEYS) === true ||
+    getDebugStorageOverride(DEBUG_STORAGE_KEYS) === true
+  );
 };
 
 /**
@@ -126,6 +319,8 @@ const getCctvDebugBuffer = (): CctvDebugBuffer | null => {
       buffer.sequence = 0;
     },
     dump: () => [...buffer.events],
+    filter: keywords => filterCctvDebugEvents(buffer.events, keywords),
+    summary: () => summarizeCctvDebugEvents(buffer.events),
   };
 
   window.__UDS_CCTV_DEBUG__ = buffer;
@@ -166,6 +361,8 @@ export const logCctvDebugEvent = ({
     buffer.events.splice(0, buffer.events.length - buffer.limit);
   }
 
+  if (!isCctvDebugConsoleEnabled()) return;
+
   const logger =
     level === "error"
       ? console.error