@datum-cloud/activity-ui 0.6.0-dev.5b51180 → 0.6.0-dev.917556e

package/dist/index.js

@@ -9794,6 +9794,14 @@ function ActionToggle({ value, onChange, className = '', disabled = false, }) {
 
 // Debounce delay for filter changes (ms)
 const FILTER_DEBOUNCE_MS$1 = 300;
+// Backoff for watch stream reconnects. Without this, a persistently failing
+// upstream gets re-opened on every render with no delay — see
+// https://github.com/datum-cloud/infra/issues/5060, where a single browser
+// tab reconnected roughly 2.5 times a minute against a stream that kept
+// aborting, driving the proxy's memory up until the process was OOMKilled.
+const RECONNECT_BASE_DELAY_MS = 1000;
+const RECONNECT_MAX_DELAY_MS = 30000;
+const MAX_RECONNECT_ATTEMPTS = 8;
 /**
  * Escape a value for safe interpolation into a CEL string literal.
  * Prevents injection via values containing backslashes or double quotes.
@@ -9888,6 +9896,12 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
     const resourceVersionRef = React.useRef();
     // Track the watch stop function
     const watchStopRef = React.useRef(null);
+    // Consecutive watch failures since the last successful event, used to back
+    // off reconnect attempts. Reset on any real event (including BOOKMARK) and
+    // on a manual startStreaming() call.
+    const reconnectAttemptsRef = React.useRef(0);
+    // Pending scheduled reconnect, if any.
+    const reconnectTimerRef = React.useRef(null);
     // Track whether streaming should restart after filter change
     const shouldRestartStreamingRef = React.useRef(false);
     // Track if we've done the initial load
@@ -9962,6 +9976,9 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             console.error('Watch error:', event.object);
             return;
         }
+        // A real event (including a BOOKMARK keep-alive) means the connection is
+        // healthy — reset backoff so a later failure starts from the base delay.
+        reconnectAttemptsRef.current = 0;
         if (event.type === 'BOOKMARK') {
             // Update resource version for resume capability
             if (event.object.metadata?.resourceVersion) {
@@ -10027,15 +10044,13 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             setActivities((prev) => prev.filter((a) => a.metadata?.name !== event.object.metadata?.name));
         }
     }, [filters]);
-    // Start watching for real-time updates
-    const startStreaming = React.useCallback(() => {
+    // Open the watch connection. Does not touch userPaused/backoff state —
+    // callers (startStreaming, scheduleReconnect) own that.
+    const connectWatch = React.useCallback(() => {
         if (watchStopRef.current) {
             // Already watching
             return;
         }
-        // Explicit start clears the user-paused flag so the auto-restart
-        // effects can keep the stream alive after subsequent filter changes.
-        setUserPaused(false);
         // Clear any previous watch error when starting a new stream
         setWatchError(null);
         const params = buildWatchParams();
@@ -10049,6 +10064,7 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
                 setWatchError(streamError);
                 setIsStreaming(false);
                 watchStopRef.current = null;
+                reconnectAttemptsRef.current += 1;
             },
             onClose: () => {
                 setIsStreaming(false);
@@ -10059,11 +10075,50 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
         setIsStreaming(true);
         setNewActivitiesCount(0);
     }, [client, buildWatchParams, handleWatchEvent]);
+    // Reconnect with exponential backoff. The first attempt (no prior
+    // failures) connects immediately; each subsequent failure doubles the
+    // delay up to RECONNECT_MAX_DELAY_MS. After MAX_RECONNECT_ATTEMPTS
+    // consecutive failures, this stops retrying automatically — the watch
+    // stays stopped (with watchError set) until the user calls
+    // startStreaming() again, which resets the attempt count.
+    const scheduleReconnect = React.useCallback(() => {
+        if (reconnectTimerRef.current) {
+            // A reconnect is already scheduled.
+            return;
+        }
+        if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) {
+            return;
+        }
+        const attempt = reconnectAttemptsRef.current;
+        const delay = attempt === 0 ? 0 : Math.min(RECONNECT_MAX_DELAY_MS, RECONNECT_BASE_DELAY_MS * 2 ** (attempt - 1));
+        reconnectTimerRef.current = setTimeout(() => {
+            reconnectTimerRef.current = null;
+            connectWatch();
+        }, delay);
+    }, [connectWatch]);
+    // Start watching for real-time updates. This is the user/effect-facing
+    // entry point: it resets backoff and any pending scheduled reconnect
+    // before connecting, so a manual retry always starts from a clean slate.
+    const startStreaming = React.useCallback(() => {
+        // Explicit start clears the user-paused flag so the auto-restart
+        // effects can keep the stream alive after subsequent filter changes.
+        setUserPaused(false);
+        reconnectAttemptsRef.current = 0;
+        if (reconnectTimerRef.current) {
+            clearTimeout(reconnectTimerRef.current);
+            reconnectTimerRef.current = null;
+        }
+        connectWatch();
+    }, [connectWatch]);
     // Stop watching. Marks the user as paused so the auto-start effects
     // below don't immediately re-open the stream this call just closed.
     const stopStreaming = React.useCallback(() => {
         setUserPaused(true);
         setIsStreaming(false);
+        if (reconnectTimerRef.current) {
+            clearTimeout(reconnectTimerRef.current);
+            reconnectTimerRef.current = null;
+        }
         if (watchStopRef.current) {
             watchStopRef.current();
             watchStopRef.current = null;
@@ -10226,9 +10281,10 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             }
         };
     }, [filters, timeRange]); // eslint-disable-line react-hooks/exhaustive-deps
-    // Auto-start streaming after initial load when enabled. Skipped when
-    // the user has explicitly paused — otherwise clicking Pause would be
-    // immediately undone by this effect on the next render.
+    // Auto-start streaming after initial load when enabled, and reconnect
+    // (with backoff — see scheduleReconnect) whenever a connection drops.
+    // Skipped when the user has explicitly paused — otherwise clicking Pause
+    // would be immediately undone by this effect on the next render.
     React.useEffect(() => {
         if (enableStreaming &&
             autoStartStreaming &&
@@ -10236,9 +10292,9 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             activities.length > 0 &&
             !isStreaming &&
             !isLoading) {
-            startStreaming();
+            scheduleReconnect();
         }
-    }, [enableStreaming, autoStartStreaming, userPaused, activities.length, isStreaming, isLoading, startStreaming]);
+    }, [enableStreaming, autoStartStreaming, userPaused, activities.length, isStreaming, isLoading, scheduleReconnect]);
     // Restart streaming after filter change refresh completes. Also skipped
     // when the user has paused — a filter change shouldn't silently resume
     // a stream the user intentionally stopped.
@@ -10250,15 +10306,18 @@ function useActivityFeed({ client, initialFilters = {}, initialTimeRange = { sta
             !isStreaming &&
             !isLoading) {
             shouldRestartStreamingRef.current = false;
-            startStreaming();
+            scheduleReconnect();
         }
-    }, [enableStreaming, userPaused, activities.length, isStreaming, isLoading, startStreaming]);
+    }, [enableStreaming, userPaused, activities.length, isStreaming, isLoading, scheduleReconnect]);
     // Cleanup on unmount
     React.useEffect(() => {
         return () => {
             if (watchStopRef.current) {
                 watchStopRef.current();
             }
+            if (reconnectTimerRef.current) {
+                clearTimeout(reconnectTimerRef.current);
+            }
             if (filterDebounceRef.current) {
                 clearTimeout(filterDebounceRef.current);
             }