react-realtime-hooks 1.0.1 → 1.0.3

package/README.md

@@ -350,7 +350,7 @@ export function NetworkIndicator() {
 | `parseMessage`     | `(event) => TIncoming`         | raw `event.data`           | Incoming parser                    |
 | `serializeMessage` | `(message) => ...`             | JSON/string passthrough    | Outgoing serializer                |
 | `reconnect`        | `false \| UseReconnectOptions` | enabled                    | Reconnect configuration            |
-| `heartbeat`        | `false \| UseHeartbeatOptions` | disabled unless configured | Heartbeat configuration            |
+| `heartbeat`        | `false \| UseWebSocketHeartbeatOptions` | disabled unless configured | Heartbeat configuration            |
 | `shouldReconnect`  | `(event) => boolean`           | `true`                     | Reconnect gate on close            |
 | `onOpen`           | `(event, socket) => void`      | `undefined`                | Open callback                      |
 | `onMessage`        | `(message, event) => void`     | `undefined`                | Message callback                   |
@@ -375,6 +375,10 @@ export function NetworkIndicator() {
 | `reconnect`        | `() => void`                 | Manual reconnect                                                           |
 | `send`             | `(message) => boolean`       | Sends an outgoing payload                                                  |
 
+When you configure `useWebSocket` heartbeat, you can also set `timeoutAction` and
+`errorAction` to `"none"`, `"close"`, or `"reconnect"`. The default is
+`"reconnect"` when reconnect is enabled and `"close"` otherwise.
+
 </details>
 
 <details>
@@ -464,6 +468,7 @@ export function NetworkIndicator() {
 | `startOnMount` | `boolean`                                           | `true`      | Starts immediately                          |
 | `onBeat`       | `() => void`                                        | `undefined` | Called on every beat                        |
 | `onTimeout`    | `() => void`                                        | `undefined` | Called on timeout                           |
+| `onError`      | `(error) => void`                                   | `undefined` | Called when `beat()` throws or rejects      |
 
 ### Result
 
@@ -507,7 +512,7 @@ export function NetworkIndicator() {
 
 - `useEventSource` is receive-only by design. SSE is not a bidirectional transport.
 - `useWebSocket` heartbeat support is client-side. You still define your own server ping/pong protocol.
-- If `parseMessage` throws, the hook moves into `error` and stores `lastError`.
+- If `parseMessage` throws, the hook closes the current transport, moves into `error`, stores `lastError`, and stops auto-reconnect until manual `open()` or `reconnect()`.
 - `connect: false` keeps the hook in `idle` until `open()` is called.
 - Manual `close()` is sticky. The hook stays closed until `open()` or `reconnect()` is called.
 - No transport polyfills are bundled. Provide your own runtime support where needed.

package/dist/index.cjs

@@ -404,6 +404,7 @@ var useHeartbeat = (options) => {
   const startOnMount = options.startOnMount ?? true;
   const intervalRef = react.useRef(createManagedInterval());
   const timeoutRef = react.useRef(createManagedTimeout());
+  const generationRef = react.useRef(0);
   const [state, setState] = react.useState(
     () => createInitialState2(enabled && startOnMount)
   );
@@ -430,8 +431,7 @@ var useHeartbeat = (options) => {
       handleTimeout();
     }, options.timeoutMs);
   });
-  const runBeat = react.useEffectEvent(() => {
-    const performedAt = Date.now();
+  const handleBeatSuccess = react.useEffectEvent((performedAt) => {
     commitState((current) => ({
       ...current,
       hasTimedOut: false,
@@ -439,7 +439,35 @@ var useHeartbeat = (options) => {
     }));
     scheduleTimeout();
     options.onBeat?.();
-    void options.beat?.();
+  });
+  const handleBeatError = react.useEffectEvent((error) => {
+    timeoutRef.current.cancel();
+    options.onError?.(error);
+  });
+  const runBeat = react.useEffectEvent(() => {
+    const generation = generationRef.current;
+    const completeBeat = (result) => {
+      if (generation !== generationRef.current || result === false) {
+        return;
+      }
+      handleBeatSuccess(Date.now());
+    };
+    const failBeat = (error) => {
+      if (generation !== generationRef.current) {
+        return;
+      }
+      handleBeatError(error);
+    };
+    try {
+      const result = options.beat?.();
+      if (result !== null && typeof result === "object" && "then" in result) {
+        void Promise.resolve(result).then(completeBeat, failBeat);
+        return;
+      }
+      completeBeat(result);
+    } catch (error) {
+      failBeat(error);
+    }
   });
   const start = () => {
     if (!enabled) {
@@ -457,6 +485,7 @@ var useHeartbeat = (options) => {
     }));
   };
   const stop = () => {
+    generationRef.current += 1;
     intervalRef.current.cancel();
     timeoutRef.current.cancel();
     commitState((current) => ({
@@ -502,6 +531,7 @@ var useHeartbeat = (options) => {
     return void 0;
   }, [enabled, options.intervalMs, startOnMount]);
   react.useEffect(() => () => {
+    generationRef.current += 1;
     intervalRef.current.cancel();
     timeoutRef.current.cancel();
   }, []);
@@ -607,6 +637,7 @@ var toProtocolsDependency = (protocols) => {
   return Array.isArray(protocols) ? protocols.join("|") : protocols;
 };
 var toHeartbeatConfig = (heartbeat) => heartbeat === void 0 || heartbeat === false ? null : heartbeat;
+var isSocketActive = (socket) => socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING;
 var useWebSocket = (options) => {
   const connect = options.connect ?? true;
   const supported = isWebSocketSupported();
@@ -618,6 +649,8 @@ var useWebSocket = (options) => {
   const manualOpenRef = react.useRef(false);
   const skipCloseReconnectRef = react.useRef(false);
   const suppressReconnectRef = react.useRef(false);
+  const pendingCloseActionRef = react.useRef(null);
+  const terminalErrorRef = react.useRef(null);
   const [openNonce, setOpenNonce] = react.useState(0);
   const [state, setState] = react.useState(
     () => createInitialState3(connect ? "connecting" : "idle")
@@ -635,6 +668,7 @@ var useWebSocket = (options) => {
   const heartbeatConfig = toHeartbeatConfig(
     options.heartbeat
   );
+  const defaultHeartbeatAction = options.reconnect === false ? "close" : "reconnect";
   const heartbeatHookOptions = heartbeatConfig === null ? {
     enabled: false,
     intervalMs: 1e3,
@@ -670,6 +704,27 @@ var useWebSocket = (options) => {
   if (heartbeatConfig !== null && heartbeatConfig.onTimeout !== void 0) {
     heartbeatHookOptions.onTimeout = heartbeatConfig.onTimeout;
   }
+  if (heartbeatConfig !== null) {
+    const onTimeout = heartbeatHookOptions.onTimeout;
+    heartbeatHookOptions.onTimeout = () => {
+      applyHeartbeatAction(
+        heartbeatConfig.timeoutAction ?? defaultHeartbeatAction,
+        new Event("heartbeat-timeout"),
+        "heartbeat-timeout"
+      );
+      onTimeout?.();
+    };
+    const onError = heartbeatConfig.onError;
+    heartbeatHookOptions.onError = (error) => {
+      const event = error instanceof Event ? error : new Event("heartbeat-error");
+      applyHeartbeatAction(
+        heartbeatConfig.errorAction ?? heartbeatConfig.timeoutAction ?? defaultHeartbeatAction,
+        event,
+        "error"
+      );
+      onError?.(error);
+    };
+  }
   const heartbeat = useHeartbeat(
     heartbeatHookOptions
   );
@@ -685,10 +740,46 @@ var useWebSocket = (options) => {
     }
     socketRef.current = null;
     socketKeyRef.current = null;
-    if (socket2.readyState === WebSocket.OPEN || socket2.readyState === WebSocket.CONNECTING) {
+    if (isSocketActive(socket2)) {
       socket2.close(code, reason);
     }
   });
+  const applyHeartbeatAction = react.useEffectEvent(
+    (action, error, reconnectTrigger) => {
+      heartbeat.stop();
+      if (action === "none") {
+        commitState((current) => ({
+          ...current,
+          lastChangedAt: Date.now(),
+          lastError: error
+        }));
+        return;
+      }
+      const shouldReconnect = action === "reconnect" && reconnectEnabled && (options.shouldReconnect?.(error) ?? true);
+      manualOpenRef.current = false;
+      terminalErrorRef.current = shouldReconnect ? null : error;
+      const socket2 = socketRef.current;
+      if (socket2 === null || !isSocketActive(socket2)) {
+        commitState((current) => ({
+          ...current,
+          lastChangedAt: Date.now(),
+          lastError: error,
+          status: shouldReconnect ? "reconnecting" : "error"
+        }));
+        if (shouldReconnect) {
+          reconnect.schedule(reconnectTrigger);
+        }
+        return;
+      }
+      pendingCloseActionRef.current = {
+        error,
+        reconnectTrigger: shouldReconnect ? reconnectTrigger : null
+      };
+      skipCloseReconnectRef.current = true;
+      suppressReconnectRef.current = true;
+      closeSocket();
+    }
+  );
   const parseMessage = react.useEffectEvent((event) => {
     const parser = options.parseMessage ?? defaultParseMessage;
     return parser(event);
@@ -701,7 +792,9 @@ var useWebSocket = (options) => {
   });
   const handleOpen = react.useEffectEvent((event, socket2) => {
     manualCloseRef.current = false;
+    manualOpenRef.current = false;
     suppressReconnectRef.current = false;
+    terminalErrorRef.current = null;
     reconnect.markConnected();
     heartbeat.start();
     commitState((current) => ({
@@ -725,11 +818,19 @@ var useWebSocket = (options) => {
       options.onMessage?.(message, event);
     } catch {
       const parseError = new Event("error");
+      terminalErrorRef.current = parseError;
+      manualOpenRef.current = false;
+      skipCloseReconnectRef.current = true;
+      suppressReconnectRef.current = true;
+      reconnect.cancel();
+      heartbeat.stop();
       commitState((current) => ({
         ...current,
+        lastChangedAt: Date.now(),
         lastError: parseError,
         status: "error"
       }));
+      closeSocket(1003, "parse-error");
     }
   });
   const handleError = react.useEffectEvent((event) => {
@@ -746,8 +847,38 @@ var useWebSocket = (options) => {
     socketKeyRef.current = null;
     heartbeat.stop();
     updateBufferedAmount();
+    const pendingCloseAction = pendingCloseActionRef.current;
+    pendingCloseActionRef.current = null;
+    const terminalError = terminalErrorRef.current;
     const skipCloseReconnect = skipCloseReconnectRef.current;
     skipCloseReconnectRef.current = false;
+    if (pendingCloseAction !== null) {
+      suppressReconnectRef.current = false;
+      commitState((current) => ({
+        ...current,
+        lastChangedAt: Date.now(),
+        lastCloseEvent: event,
+        lastError: pendingCloseAction.error ?? current.lastError,
+        status: pendingCloseAction.reconnectTrigger === null ? "error" : "reconnecting"
+      }));
+      options.onClose?.(event);
+      if (pendingCloseAction.reconnectTrigger !== null) {
+        reconnect.schedule(pendingCloseAction.reconnectTrigger);
+      }
+      return;
+    }
+    if (terminalError !== null) {
+      suppressReconnectRef.current = false;
+      commitState((current) => ({
+        ...current,
+        lastChangedAt: Date.now(),
+        lastCloseEvent: event,
+        lastError: terminalError,
+        status: "error"
+      }));
+      options.onClose?.(event);
+      return;
+    }
     const shouldReconnect = !suppressReconnectRef.current && !skipCloseReconnect && reconnectEnabled && (options.shouldReconnect?.(event) ?? true);
     commitState((current) => ({
       ...current,
@@ -766,6 +897,7 @@ var useWebSocket = (options) => {
     manualCloseRef.current = false;
     manualOpenRef.current = true;
     suppressReconnectRef.current = false;
+    terminalErrorRef.current = null;
     reconnect.cancel();
     setOpenNonce((current) => current + 1);
   };
@@ -774,6 +906,7 @@ var useWebSocket = (options) => {
     manualOpenRef.current = true;
     skipCloseReconnectRef.current = true;
     suppressReconnectRef.current = true;
+    terminalErrorRef.current = null;
     heartbeat.stop();
     closeSocket();
     suppressReconnectRef.current = false;
@@ -783,6 +916,7 @@ var useWebSocket = (options) => {
     manualCloseRef.current = true;
     manualOpenRef.current = false;
     suppressReconnectRef.current = true;
+    terminalErrorRef.current = null;
     reconnect.cancel();
     heartbeat.stop();
     commitState((current) => ({
@@ -820,7 +954,7 @@ var useWebSocket = (options) => {
       }));
       return;
     }
-    const shouldConnect = connect && !manualCloseRef.current || manualOpenRef.current || reconnect.status === "running";
+    const shouldConnect = terminalErrorRef.current === null && (connect && !manualCloseRef.current || manualOpenRef.current || reconnect.status === "running");
     const nextSocketKey = `${resolvedUrl}::${protocolsDependency}::${options.binaryType ?? "blob"}`;
     if (!shouldConnect) {
       if (socketRef.current !== null) {
@@ -830,7 +964,7 @@ var useWebSocket = (options) => {
       socketKeyRef.current = null;
       commitState((current) => ({
         ...current,
-        status: manualCloseRef.current ? "closed" : "idle"
+        status: terminalErrorRef.current !== null ? "error" : manualCloseRef.current ? "closed" : "idle"
       }));
       return;
     }
@@ -885,12 +1019,13 @@ var useWebSocket = (options) => {
   react.useEffect(() => () => {
     suppressReconnectRef.current = true;
     socketKeyRef.current = null;
+    terminalErrorRef.current = null;
     const socket2 = socketRef.current;
     socketRef.current = null;
     if (socket2 === null) {
       return;
     }
-    if (socket2.readyState === WebSocket.OPEN || socket2.readyState === WebSocket.CONNECTING) {
+    if (isSocketActive(socket2)) {
       socket2.close();
     }
   }, []);
@@ -981,6 +1116,7 @@ var useEventSource = (options) => {
   const manualOpenRef = react.useRef(false);
   const skipErrorReconnectRef = react.useRef(false);
   const suppressReconnectRef = react.useRef(false);
+  const terminalErrorRef = react.useRef(null);
   const [openNonce, setOpenNonce] = react.useState(0);
   const [state, setState] = react.useState(
     () => createInitialState4(connect ? "connecting" : "idle")
@@ -1014,7 +1150,9 @@ var useEventSource = (options) => {
   });
   const handleOpen = react.useEffectEvent((event, source) => {
     manualCloseRef.current = false;
+    manualOpenRef.current = false;
     suppressReconnectRef.current = false;
+    terminalErrorRef.current = null;
     reconnect.markConnected();
     commitState((current) => ({
       ...current,
@@ -1040,8 +1178,14 @@ var useEventSource = (options) => {
         options.onMessage?.(message, event);
       } catch {
         const parseError = new Event("error");
+        terminalErrorRef.current = parseError;
+        manualOpenRef.current = false;
+        suppressReconnectRef.current = true;
+        reconnect.cancel();
+        closeEventSource();
         commitState((current) => ({
           ...current,
+          lastChangedAt: Date.now(),
           lastError: parseError,
           status: "error"
         }));
@@ -1049,6 +1193,17 @@ var useEventSource = (options) => {
     }
   );
   const handleError = react.useEffectEvent((event, source) => {
+    const terminalError = terminalErrorRef.current;
+    if (terminalError !== null) {
+      suppressReconnectRef.current = false;
+      commitState((current) => ({
+        ...current,
+        lastChangedAt: Date.now(),
+        lastError: terminalError,
+        status: "error"
+      }));
+      return;
+    }
     const skipErrorReconnect = skipErrorReconnectRef.current;
     skipErrorReconnectRef.current = false;
     const shouldReconnect = !suppressReconnectRef.current && !skipErrorReconnect && reconnectEnabled && (options.shouldReconnect?.(event) ?? true);
@@ -1075,6 +1230,7 @@ var useEventSource = (options) => {
     manualCloseRef.current = false;
     manualOpenRef.current = true;
     suppressReconnectRef.current = false;
+    terminalErrorRef.current = null;
     reconnect.cancel();
     setOpenNonce((current) => current + 1);
   };
@@ -1083,6 +1239,7 @@ var useEventSource = (options) => {
     manualOpenRef.current = true;
     skipErrorReconnectRef.current = true;
     suppressReconnectRef.current = true;
+    terminalErrorRef.current = null;
     closeEventSource();
     suppressReconnectRef.current = false;
     reconnect.schedule("manual");
@@ -1091,6 +1248,7 @@ var useEventSource = (options) => {
     manualCloseRef.current = true;
     manualOpenRef.current = false;
     suppressReconnectRef.current = true;
+    terminalErrorRef.current = null;
     reconnect.cancel();
     closeEventSource();
     commitState((current) => ({
@@ -1117,7 +1275,7 @@ var useEventSource = (options) => {
       }));
       return;
     }
-    const shouldConnect = connect && !manualCloseRef.current || manualOpenRef.current || reconnect.status === "running";
+    const shouldConnect = terminalErrorRef.current === null && (connect && !manualCloseRef.current || manualOpenRef.current || reconnect.status === "running");
     const nextEventSourceKey = [
       resolvedUrl,
       options.withCredentials ? "credentials" : "anonymous",
@@ -1131,7 +1289,7 @@ var useEventSource = (options) => {
       eventSourceKeyRef.current = null;
       commitState((current) => ({
         ...current,
-        status: manualCloseRef.current ? "closed" : "idle"
+        status: terminalErrorRef.current !== null ? "error" : manualCloseRef.current ? "closed" : "idle"
       }));
       return;
     }
@@ -1193,6 +1351,7 @@ var useEventSource = (options) => {
   react.useEffect(() => () => {
     suppressReconnectRef.current = true;
     eventSourceKeyRef.current = null;
+    terminalErrorRef.current = null;
     const source = eventSourceRef.current;
     eventSourceRef.current = null;
     if (source !== null) {