@chromahq/react 1.0.41 → 1.0.43

package/dist/index.d.ts

@@ -1,5 +1,27 @@
 import { FC, ReactNode } from 'react';
 
+interface BridgeDiagnosticsSnapshot {
+    lastUpdatedAt: number;
+    portDisconnects: number;
+    lastDisconnectError?: string;
+    lastDisconnectAt?: number;
+    sendMessageFallbacks: number;
+    lastFallbackReason?: string;
+    lastFallbackAt?: number;
+    sendMessageFallbackErrors: number;
+    lastFallbackError?: string;
+    pingFailures: number;
+    lastPingFailureAt?: number;
+}
+interface BridgeDiagnosticsApi {
+    get: () => BridgeDiagnosticsSnapshot;
+    reset: () => void;
+}
+declare global {
+    interface Window {
+        __CHROMA_BRIDGE_DIAGNOSTICS__?: BridgeDiagnosticsApi;
+    }
+}
 type ConnectionStatus = 'connecting' | 'connected' | 'disconnected' | 'error' | 'reconnecting';
 interface Bridge {
     send: <Req = unknown, Res = unknown>(key: string, payload?: Req, timeoutDuration?: number) => Promise<Res>;

package/dist/index.js

@@ -2,6 +2,68 @@ import { jsx } from 'react/jsx-runtime';
 import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext, useSyncExternalStore } from 'react';
 
 const BRIDGE_ENABLE_LOGS = true;
+const DIRECT_MESSAGE_FLAG = "__CHROMA_BRIDGE_DIRECT_MESSAGE__";
+const createInitialDiagnosticsState = () => ({
+  lastUpdatedAt: Date.now(),
+  portDisconnects: 0,
+  lastDisconnectError: void 0,
+  lastDisconnectAt: void 0,
+  sendMessageFallbacks: 0,
+  lastFallbackReason: void 0,
+  lastFallbackAt: void 0,
+  sendMessageFallbackErrors: 0,
+  lastFallbackError: void 0,
+  pingFailures: 0,
+  lastPingFailureAt: void 0
+});
+const bridgeDiagnosticsState = createInitialDiagnosticsState();
+const updateDiagnosticsState = (mutator) => {
+  mutator(bridgeDiagnosticsState);
+  bridgeDiagnosticsState.lastUpdatedAt = Date.now();
+};
+const resetDiagnosticsState = () => {
+  Object.assign(bridgeDiagnosticsState, createInitialDiagnosticsState());
+};
+const attachDiagnosticsApi = () => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  window.__CHROMA_BRIDGE_DIAGNOSTICS__ = {
+    get: () => ({ ...bridgeDiagnosticsState }),
+    reset: () => {
+      resetDiagnosticsState();
+    }
+  };
+};
+attachDiagnosticsApi();
+const recordDiagnostics = {
+  portDisconnect: (error) => {
+    updateDiagnosticsState((state) => {
+      state.portDisconnects += 1;
+      state.lastDisconnectError = error;
+      state.lastDisconnectAt = Date.now();
+    });
+  },
+  fallbackSent: (reason) => {
+    updateDiagnosticsState((state) => {
+      state.sendMessageFallbacks += 1;
+      state.lastFallbackReason = reason;
+      state.lastFallbackAt = Date.now();
+    });
+  },
+  fallbackError: (error) => {
+    updateDiagnosticsState((state) => {
+      state.sendMessageFallbackErrors += 1;
+      state.lastFallbackError = error;
+    });
+  },
+  pingFailure: () => {
+    updateDiagnosticsState((state) => {
+      state.pingFailures += 1;
+      state.lastPingFailureAt = Date.now();
+    });
+  }
+};
 const CONFIG = {
   RETRY_AFTER: 1e3,
   MAX_RETRIES: 10,
@@ -71,11 +133,71 @@ function createBridgeInstance(deps) {
   };
   const send = (key, payload, timeoutDuration = defaultTimeout) => {
     return new Promise((resolve, reject) => {
-      if (!portRef.current) {
-        reject(new Error("Bridge disconnected"));
-        return;
-      }
       const id = `msg_${++messageIdRef.current}`;
+      const finalizePendingWithError = (error) => {
+        const pending = pendingRequestsRef.current.get(id);
+        if (!pending) return;
+        clearTimeout(pending.timeout);
+        pendingRequestsRef.current.delete(id);
+        pending.reject(error instanceof Error ? error : new Error(error));
+      };
+      const triggerRuntimeFallback = (reason) => {
+        {
+          console.warn(`[Bridge] Falling back to runtime.sendMessage (${reason})`);
+        }
+        recordDiagnostics.fallbackSent(reason);
+        onReconnectNeeded();
+        if (!chrome?.runtime?.sendMessage) {
+          const message = "chrome.runtime.sendMessage not available";
+          recordDiagnostics.fallbackError(message);
+          finalizePendingWithError(message);
+          return;
+        }
+        try {
+          chrome.runtime.sendMessage(
+            {
+              id,
+              key,
+              payload,
+              metadata: { transport: "direct", fallbackReason: reason },
+              [DIRECT_MESSAGE_FLAG]: true
+            },
+            (response) => {
+              const runtimeError = consumeRuntimeError();
+              const pending = pendingRequestsRef.current.get(id);
+              if (!pending) return;
+              if (runtimeError) {
+                recordDiagnostics.fallbackError(runtimeError);
+                clearTimeout(pending.timeout);
+                pendingRequestsRef.current.delete(id);
+                pending.reject(new Error(runtimeError));
+                return;
+              }
+              if (!response) {
+                const message = "No response from service worker";
+                recordDiagnostics.fallbackError(message);
+                clearTimeout(pending.timeout);
+                pendingRequestsRef.current.delete(id);
+                pending.reject(new Error(message));
+                return;
+              }
+              clearTimeout(pending.timeout);
+              pendingRequestsRef.current.delete(id);
+              consecutiveTimeoutsRef.current = 0;
+              if (response.error) {
+                recordDiagnostics.fallbackError(response.error);
+                pending.reject(new Error(response.error));
+              } else {
+                pending.resolve(response.data);
+              }
+            }
+          );
+        } catch (error) {
+          const message = error instanceof Error ? error.message : "chrome.runtime.sendMessage failed";
+          recordDiagnostics.fallbackError(message);
+          finalizePendingWithError(error instanceof Error ? error : new Error(message));
+        }
+      };
       const timeout = setTimeout(() => {
         if (!pendingRequestsRef.current.has(id)) return;
         pendingRequestsRef.current.delete(id);
@@ -106,17 +228,16 @@ function createBridgeInstance(deps) {
         timeout,
         timeoutDuration
       });
+      if (!portRef.current) {
+        triggerRuntimeFallback("port-unavailable");
+        return;
+      }
       try {
         portRef.current.postMessage({ id, key, payload });
         setTimeout(() => {
           const errorMessage = consumeRuntimeError();
           if (errorMessage && pendingRequestsRef.current.has(id)) {
-            const pending = pendingRequestsRef.current.get(id);
-            if (pending) {
-              clearTimeout(pending.timeout);
-              pendingRequestsRef.current.delete(id);
-              reject(new Error(errorMessage));
-            }
+            finalizePendingWithError(errorMessage);
           }
         }, 0);
         const immediateError = consumeRuntimeError();
@@ -124,12 +245,10 @@ function createBridgeInstance(deps) {
           throw new Error(immediateError);
         }
       } catch (e) {
-        const pending = pendingRequestsRef.current.get(id);
-        if (pending) {
-          clearTimeout(pending.timeout);
-          pendingRequestsRef.current.delete(id);
+        {
+          console.warn("[Bridge] Port send failed, attempting fallback", e);
         }
-        reject(e instanceof Error ? e : new Error("Send failed"));
+        triggerRuntimeFallback("port-postmessage-error");
       }
     });
   };
@@ -235,6 +354,7 @@ function startHealthMonitor(deps) {
       consecutivePingFailuresRef.current = 0;
       return;
     }
+    recordDiagnostics.pingFailure();
     consecutivePingFailuresRef.current++;
     {
       console.warn(`[Bridge] Ping failed (${consecutivePingFailuresRef.current}x)`);
@@ -502,6 +622,7 @@ const BridgeProvider = ({
         }
         isConnectingRef.current = false;
         const disconnectError = consumeRuntimeError();
+        recordDiagnostics.portDisconnect(disconnectError);
         if (BRIDGE_ENABLE_LOGS) {
           console.warn("[Bridge] Disconnect error:", disconnectError || "(none)");
           console.warn("[Bridge] isMounted:", isMountedRef.current);

package/package.json

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