@chromahq/react 1.0.9 → 1.0.11

package/dist/index.d.ts

@@ -1,21 +1,24 @@
-type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error';
+type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error' | 'reconnecting';
 interface Bridge {
     send: <Req = unknown, Res = unknown>(key: string, payload?: Req, timeoutDuration?: number) => Promise<Res>;
     broadcast: (key: string, payload: any) => void;
     on: (key: string, handler: (payload: any) => void) => void;
     off: (key: string, handler: (payload: any) => void) => void;
     isConnected: boolean;
+    ping: () => Promise<boolean>;
 }
 interface BridgeContextValue {
     bridge: Bridge | null;
     status: ConnectionStatus;
     error: Error | null;
     reconnect: () => void;
+    isServiceWorkerAlive: boolean;
 }
 interface Props {
     children: React.ReactNode;
     retryAfter?: number;
     maxRetries?: number;
+    pingInterval?: number;
     onConnectionChange?: (status: ConnectionStatus) => void;
     onError?: (error: Error) => void;
 }

package/dist/index.js

@@ -4,14 +4,16 @@ import { createContext, useState, useRef, useCallback, useEffect, useMemo, useCo
 const BridgeContext = createContext(null);
 const BridgeProvider = ({
   children,
-  retryAfter = 1500,
-  maxRetries = 5,
+  retryAfter = 1e3,
+  maxRetries = 10,
+  pingInterval = 5e3,
   onConnectionChange,
   onError
 }) => {
   const [bridge, setBridge] = useState(null);
   const [status, setStatus] = useState("connecting");
   const [error, setError] = useState(null);
+  const [isServiceWorkerAlive, setIsServiceWorkerAlive] = useState(false);
   const portRef = useRef(null);
   const pendingRef = useRef(
     /* @__PURE__ */ new Map()
@@ -22,6 +24,8 @@ const BridgeProvider = ({
   const retryCountRef = useRef(0);
   const isConnectingRef = useRef(false);
   const errorCheckIntervalRef = useRef(null);
+  const pingIntervalRef = useRef(null);
+  const consecutiveTimeoutsRef = useRef(0);
   const updateStatus = useCallback(
     (newStatus) => {
       setStatus(newStatus);
@@ -46,6 +50,10 @@ const BridgeProvider = ({
       clearInterval(errorCheckIntervalRef.current);
       errorCheckIntervalRef.current = null;
     }
+    if (pingIntervalRef.current) {
+      clearInterval(pingIntervalRef.current);
+      pingIntervalRef.current = null;
+    }
     if (portRef.current) {
       try {
         portRef.current.disconnect();
@@ -53,11 +61,13 @@ const BridgeProvider = ({
       }
       portRef.current = null;
     }
-    pendingRef.current.forEach(({ reject }) => {
+    pendingRef.current.forEach(({ reject, timeout }) => {
+      clearTimeout(timeout);
       reject(new Error("Bridge disconnected"));
     });
     pendingRef.current.clear();
     eventListenersRef.current.clear();
+    setIsServiceWorkerAlive(false);
     setBridge(null);
     isConnectingRef.current = false;
   }, []);
@@ -110,11 +120,13 @@ const BridgeProvider = ({
       }, 100);
       port.onMessage.addListener((msg) => {
         if (msg.id && pendingRef.current.has(msg.id)) {
-          const { resolve, reject } = pendingRef.current.get(msg.id);
+          const pending = pendingRef.current.get(msg.id);
+          clearTimeout(pending.timeout);
+          consecutiveTimeoutsRef.current = 0;
           if (msg.error) {
-            reject(new Error(msg.error));
+            pending.reject(new Error(msg.error));
           } else {
-            resolve(msg.data);
+            pending.resolve(msg.data);
           }
           pendingRef.current.delete(msg.id);
         } else if (msg.type === "broadcast" && msg.key) {
@@ -156,13 +168,29 @@ const BridgeProvider = ({
               return;
             }
             const id = `msg${uidRef.current++}`;
-            pendingRef.current.set(id, { resolve, reject });
             const timeout = setTimeout(() => {
               if (pendingRef.current.has(id)) {
                 pendingRef.current.delete(id);
-                reject(new Error("Request timeout"));
+                consecutiveTimeoutsRef.current++;
+                if (consecutiveTimeoutsRef.current >= 2) {
+                  console.warn(
+                    "[Bridge] Multiple timeouts detected, service worker may be unresponsive. Reconnecting..."
+                  );
+                  setIsServiceWorkerAlive(false);
+                  updateStatus("reconnecting");
+                  cleanup();
+                  retryCountRef.current = 0;
+                  isConnectingRef.current = false;
+                  setTimeout(connect, 500);
+                }
+                reject(
+                  new Error(
+                    `Request timed out after ${timeoutDuration} ms for key: ${key} with id: ${id}`
+                  )
+                );
               }
             }, timeoutDuration);
+            pendingRef.current.set(id, { resolve, reject, timeout });
             try {
               portRef.current.postMessage({ id, key, payload });
               setTimeout(() => {
@@ -171,7 +199,8 @@ const BridgeProvider = ({
                   console.warn("[Bridge] Async runtime error after postMessage:", errorMessage);
                   chrome.runtime.lastError;
                   if (pendingRef.current.has(id)) {
-                    clearTimeout(timeout);
+                    const pending = pendingRef.current.get(id);
+                    if (pending) clearTimeout(pending.timeout);
                     pendingRef.current.delete(id);
                     reject(new Error(errorMessage || "Async send failed"));
                   }
@@ -181,7 +210,8 @@ const BridgeProvider = ({
                 throw new Error(chrome.runtime.lastError.message || "Failed to send message");
               }
             } catch (e) {
-              clearTimeout(timeout);
+              const pending = pendingRef.current.get(id);
+              if (pending) clearTimeout(pending.timeout);
               pendingRef.current.delete(id);
               if (chrome.runtime.lastError) {
                 console.warn(
@@ -222,13 +252,35 @@ const BridgeProvider = ({
             }
           }
         },
+        ping: async () => {
+          try {
+            await bridgeInstance.send("__ping__", void 0, 2e3);
+            return true;
+          } catch {
+            return false;
+          }
+        },
         isConnected: true
       };
       setBridge(bridgeInstance);
       updateStatus("connected");
+      setIsServiceWorkerAlive(true);
       setError(null);
       retryCountRef.current = 0;
+      consecutiveTimeoutsRef.current = 0;
       isConnectingRef.current = false;
+      if (pingIntervalRef.current) {
+        clearInterval(pingIntervalRef.current);
+      }
+      pingIntervalRef.current = setInterval(async () => {
+        if (bridgeInstance && portRef.current) {
+          const alive = await bridgeInstance.ping();
+          setIsServiceWorkerAlive(alive);
+          if (!alive) {
+            console.warn("[Bridge] Service worker ping failed, may be unresponsive");
+          }
+        }
+      }, pingInterval);
     } catch (e) {
       isConnectingRef.current = false;
       const error2 = e instanceof Error ? e : new Error("Connection failed");
@@ -238,9 +290,10 @@ const BridgeProvider = ({
         reconnectTimeoutRef.current = setTimeout(connect, retryAfter);
       }
     }
-  }, [retryAfter, maxRetries, handleError, updateStatus, cleanup]);
+  }, [retryAfter, maxRetries, pingInterval, handleError, updateStatus, cleanup]);
   const reconnect = useCallback(() => {
     retryCountRef.current = 0;
+    consecutiveTimeoutsRef.current = 0;
     updateStatus("connecting");
     connect();
   }, [connect, updateStatus]);
@@ -253,9 +306,10 @@ const BridgeProvider = ({
       bridge,
       status,
       error,
-      reconnect
+      reconnect,
+      isServiceWorkerAlive
     }),
-    [bridge, status, error, reconnect]
+    [bridge, status, error, reconnect, isServiceWorkerAlive]
   );
   return /* @__PURE__ */ jsx(BridgeContext.Provider, { value: contextValue, children });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chromahq/react",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "React bindings for the Chroma Chrome extension framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",