@kawaiininja/fetch 1.0.13 → 1.0.14

package/dist/hooks/useCsrf.js

@@ -59,31 +59,52 @@ export function useCsrf() {
         // Construct CSRF URL using the context's baseUrl
         console.log("[useCsrf] Fetching new CSRF token from server...");
         const csrfUrl = apiUrl("auth/csrf-token");
-        const res = await fetch(csrfUrl, {
-            method: "GET",
-            headers: INTERNAL_HEADER,
-            credentials: "include",
-        });
-        const json = await res.json();
-        const token = json?.csrfToken;
-        if (!token)
-            throw new Error("Missing CSRF token");
-        csrfRef.current = token;
-        // Store in storage
-        if (typeof window !== "undefined") {
-            const _isNative = isNative();
-            if (_isNative) {
-                try {
-                    await SecureStoragePlugin.set({ key: "csrf_token", value: token });
-                    console.log("[useCsrf] Stored in SecureStorage.");
-                }
-                catch (e) {
-                    console.warn("[useCsrf] SecureStorage set failed, falling back to localStorage:", e);
+        // ⏱️ TIMEOUT HANDLING for CSRF
+        // If the server is unreachable (e.g. paused dev tunnel), this MUST fail fast
+        const CSRF_TIMEOUT_MS = 15000;
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), CSRF_TIMEOUT_MS);
+        try {
+            const res = await fetch(csrfUrl, {
+                method: "GET",
+                headers: INTERNAL_HEADER,
+                credentials: "include",
+                signal: controller.signal,
+            });
+            clearTimeout(timeoutId);
+            if (!res.ok) {
+                throw new Error(`CSRF Fetch failed with status: ${res.status}`);
+            }
+            const json = await res.json();
+            const token = json?.csrfToken;
+            if (!token)
+                throw new Error("Missing CSRF token in response");
+            csrfRef.current = token;
+            // Store in storage
+            if (typeof window !== "undefined") {
+                const _isNative = isNative();
+                if (_isNative) {
+                    try {
+                        await SecureStoragePlugin.set({ key: "csrf_token", value: token });
+                        console.log("[useCsrf] Stored in SecureStorage.");
+                    }
+                    catch (e) {
+                        console.warn("[useCsrf] SecureStorage set failed, falling back to localStorage:", e);
+                    }
                 }
+                localStorage.setItem("csrf_token", token);
+            }
+            return token;
+        }
+        catch (error) {
+            clearTimeout(timeoutId);
+            console.error("[useCsrf] CSRF Fetch Failed/Timed-out:", error);
+            let failReason = error.message;
+            if (error.name === "AbortError") {
+                failReason = `Connection Timed Out (${CSRF_TIMEOUT_MS}ms). Server unreachable.`;
             }
-            localStorage.setItem("csrf_token", token);
+            throw new Error(`CSRF Handshake failed: ${failReason}`);
         }
-        return token;
     }, [apiUrl]);
     return useMemo(() => ({ fetchCSRF, clearCsrf }), [fetchCSRF, clearCsrf]);
 }

package/dist/hooks/useFetch.js

@@ -73,14 +73,12 @@ export const useFetch = (endpoint, baseOptions = {}) => {
         };
         // 🔒 SECURITY STRATEGY: NATIVE (MOBILE)
         if (_isNative && isInternal) {
-            // Mobile relies on manual headers ("Active Courier")
-            // 🛡️ S-RANK UPGRADE: Use Session Memory Vault (In-Memory Singleton)
-            // console.log(`[useFetch] [Native] Strategy: Active Courier for ${url}`);
             if (!nativeAuthVault.loaded) {
-                // If an initialization is already in progress, await it
+                console.log("[useFetch] [Native] Vault not loaded, initializing...");
                 if (!nativeAuthVault.initPromise) {
                     nativeAuthVault.initPromise = (async () => {
                         try {
+                            console.log("[useFetch] [Native] Reading SecureStorage...");
                             const { value: t } = await SecureStoragePlugin.get({
                                 key: "token",
                             });
@@ -89,8 +87,8 @@ export const useFetch = (endpoint, baseOptions = {}) => {
                             });
                             nativeAuthVault.token = t || undefined;
                             nativeAuthVault.sessionId = s || undefined;
-                            // Fallback to localStorage if SecureStorage is empty
                             if (!nativeAuthVault.token) {
+                                console.log("[useFetch] [Native] SecureStorage empty, trying localStorage fallback");
                                 nativeAuthVault.token =
                                     localStorage.getItem("token") || undefined;
                                 nativeAuthVault.sessionId =
@@ -113,6 +111,7 @@ export const useFetch = (endpoint, baseOptions = {}) => {
                     })();
                 }
                 await nativeAuthVault.initPromise;
+                console.log("[useFetch] [Native] Vault ready.");
             }
             const authToken = nativeAuthVault.token;
             const sessionId = nativeAuthVault.sessionId;
@@ -128,15 +127,52 @@ export const useFetch = (endpoint, baseOptions = {}) => {
                 headersConfig["X-CSRF-Token"] = token;
             }
         }
-        return fetch(url, {
-            ...optionsRef.current,
-            ...rest,
-            method,
-            signal: abortRef.current.signal,
-            credentials: "include",
-            headers: headersConfig,
-            body,
-        });
+        // 🛡️ RETRY LOGIC (3 Attempts)
+        // We try 3 times. If all 3 fail, we throw.
+        let attempt = 0;
+        const maxAttempts = 3;
+        let lastError = null;
+        while (attempt < maxAttempts) {
+            attempt++;
+            const TIMEOUT_MS = 15000;
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);
+            // Link to component lifecycle
+            const onUnmount = () => controller.abort();
+            abortRef.current.signal.addEventListener("abort", onUnmount);
+            try {
+                const response = await Promise.race([
+                    fetch(url, {
+                        ...optionsRef.current,
+                        ...rest,
+                        method,
+                        signal: controller.signal,
+                        credentials: "include",
+                        headers: headersConfig,
+                        body,
+                    }),
+                    new Promise((_, reject) => setTimeout(() => reject(new Error(`Timeout of ${TIMEOUT_MS}ms exceeded`)), TIMEOUT_MS)),
+                ]);
+                clearTimeout(timeoutId);
+                abortRef.current.signal.removeEventListener("abort", onUnmount);
+                return response; // Success!
+            }
+            catch (error) {
+                clearTimeout(timeoutId);
+                abortRef.current.signal.removeEventListener("abort", onUnmount);
+                lastError = error;
+                // If aborted by user/unmount, DO NOT RETRY
+                if (error.name === "AbortError" || abortRef.current.signal.aborted) {
+                    throw error;
+                }
+                console.warn(`[useFetch] Attempt ${attempt} failed: ${error.message}. Retrying...`);
+                // Wait 1s before retry
+                if (attempt < maxAttempts) {
+                    await new Promise((r) => setTimeout(r, 1000));
+                }
+            }
+        }
+        throw lastError || new Error("Request failed after 3 attempts");
     };
     const parseResponse = async (res, parseAs) => {
         const type = res.headers.get("content-type") || "";
@@ -156,8 +192,12 @@ export const useFetch = (endpoint, baseOptions = {}) => {
     const request = useCallback(async (params = {}) => {
         const { url = endpoint, method = "GET", body, headers, parseAs = "auto", ...rest } = params;
         let finalUrl = url.startsWith("http") ? url : apiUrl(url);
-        if (!finalUrl)
+        console.log(`[useFetch] Request initiated: ${method} ${finalUrl}`);
+        console.log(`[useFetch] Config: disableCsrf=${disableCsrf}, isNative=${isNative()}`);
+        if (!finalUrl) {
+            console.error("[useFetch] Aborted: Empty URL");
             return;
+        }
         safeSet(() => ({ loading: true, error: null }));
         let lastStatus = null;
         try {
@@ -192,11 +232,16 @@ export const useFetch = (endpoint, baseOptions = {}) => {
         }
         catch (err) {
             if (err.name !== "AbortError") {
+                console.error("[useFetch] Request Failed:", err);
                 safeSet(() => ({ error: err.message, status: lastStatus }));
                 if (onError)
                     onError(err.message, lastStatus);
                 throw err;
             }
+            else {
+                // Silently ignore component unmount aborts
+                console.log("[useFetch] Request aborted (component unmounted).");
+            }
         }
         finally {
             safeSet(() => ({ loading: false }));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kawaiininja/fetch",
-    "version": "1.0.13",
+    "version": "1.0.14",
     "description": "Core fetch utility for Onyx Framework",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -14,7 +14,8 @@
         "README.md"
     ],
     "scripts": {
-        "build": "tsc"
+        "build": "tsc",
+        "rebuild": "npm run build"
     },
     "keywords": [
         "react",