debug

src/app/layout.tsx

@@ -45,6 +45,7 @@ export default function RootLayout({
         <Providers>
           <div className="app-shell">{children}</div>
         </Providers>
+        <DebugToast />
         {process.env.NODE_ENV === "development" ? (
           <DevClickToComponent />
         ) : null}

src/components/dev/debug-toast.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface DebugLog {
+  id: string;
+  timestamp: string;
+  url: string;
+  method: string;
+  status: number;
+  headers: Record<string, string>;
+  response?: any;
+}
+
+export default function DebugToast() {
+  const [logs, setLogs] = useState<DebugLog[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleDebugLog = (event: CustomEvent<DebugLog>) => {
+      setLogs((prev) => [event.detail, ...prev].slice(0, 10));
+      setIsOpen(true);
+    };
+
+    window.addEventListener("debug-log" as any, handleDebugLog);
+    return () => window.removeEventListener("debug-log" as any, handleDebugLog);
+  }, []);
+
+  if (!isOpen || logs.length === 0) return null;
+
+  return (
+    <div className="fixed top-4 right-4 z-[9999] max-w-md max-h-[80vh] overflow-auto bg-red-900 text-white p-4 rounded-lg shadow-2xl border-2 border-red-500">
+      <div className="flex justify-between items-center mb-2">
+        <h3 className="font-bold text-sm">🐛 Debug Log</h3>
+        <button
+          onClick={() => setIsOpen(false)}
+          className="text-white hover:text-red-200"
+        >
+          ✕
+        </button>
+      </div>
+
+      {logs.map((log) => (
+        <div key={log.id} className="mb-4 p-2 bg-red-950 rounded text-xs">
+          <div className="font-bold mb-1">
+            {log.method} {log.status}
+          </div>
+          <div className="mb-1 text-red-300 break-all">{log.url}</div>
+          <div className="mb-1 text-yellow-300">{log.timestamp}</div>
+          
+          <details className="mt-2">
+            <summary className="cursor-pointer text-blue-300">Headers</summary>
+            <pre className="mt-1 text-[10px] overflow-auto">
+              {JSON.stringify(log.headers, null, 2)}
+            </pre>
+          </details>
+
+          {log.response && (
+            <details className="mt-2">
+              <summary className="cursor-pointer text-blue-300">Response</summary>
+              <pre className="mt-1 text-[10px] overflow-auto">
+                {JSON.stringify(log.response, null, 2)}
+              </pre>
+            </details>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

src/lib/http.ts

@@ -66,3 +66,27 @@ http.interceptors.request.use((config) => {
 
   return config;
 });
+
+http.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      const debugLog = {
+        id: Date.now().toString(),
+        timestamp: new Date().toLocaleString("fa-IR"),
+        url: error.config?.url || "unknown",
+        method: error.config?.method?.toUpperCase() || "GET",
+        status: 401,
+        headers: error.config?.headers || {},
+        response: error.response?.data,
+      };
+
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(
+          new CustomEvent("debug-log", { detail: debugLog })
+        );
+      }
+    }
+    return Promise.reject(error);
+  }
+);