@skyhook-io/k8s-ui 1.7.11 → 1.7.13

package/src/components/logs/useLogStream.ts

@@ -18,12 +18,24 @@ export interface LogStreamHandlers {
  */
 export function useLogStream() {
   const [isStreaming, setIsStreaming] = useState(false)
+  // Set when the connection fails (and not on a clean end — see endedRef).
+  const [streamError, setStreamError] = useState<string | null>(null)
+  // True from a start attempt until the stream first settles (connected / end /
+  // error / stop). Lets callers show a connecting spinner that won't reappear
+  // after a clean end. Starts true so an auto-stream viewer paints the spinner
+  // immediately instead of flashing the empty state.
+  const [connecting, setConnecting] = useState(true)
   const eventSourceRef = useRef<EventSource | null>(null)
+  // EventSource fires a generic 'error' on the normal close that follows the
+  // server's 'end'; this distinguishes a clean end from a real failure.
+  const endedRef = useRef(false)
 
   const stopStreaming = useCallback(() => {
     eventSourceRef.current?.close()
     eventSourceRef.current = null
     setIsStreaming(false)
+    setConnecting(false)
+    setStreamError(null)
   }, [])
 
   const startStreaming = useCallback((
@@ -32,10 +44,19 @@ export function useLogStream() {
     errorContext = 'Log stream error',
   ) => {
     eventSourceRef.current?.close()
+    endedRef.current = false
+    setStreamError(null)
+    setConnecting(true)
     const es = create()
+    // Ignore events from a superseded source: closing/replacing an EventSource
+    // (Stop, container switch, restart) can fire a late, async 'error' that
+    // would otherwise corrupt the new stream's state or show a false failure.
+    const isCurrent = () => eventSourceRef.current === es
 
     es.addEventListener('connected', (event) => {
+      if (!isCurrent()) return
       setIsStreaming(true)
+      setConnecting(false)
       if (handlers.onConnected) {
         try { handlers.onConnected(JSON.parse((event as MessageEvent).data)) } catch (e) {
           console.error('Failed to parse connected event:', e)
@@ -44,12 +65,15 @@ export function useLogStream() {
     })
 
     es.addEventListener('log', (event) => {
+      if (!isCurrent()) return
+      setConnecting(false)
       try { handlers.onLog(JSON.parse((event as MessageEvent).data)) } catch (e) {
         console.error('Failed to parse log event:', e)
       }
     })
 
     es.addEventListener('pod_added', (event) => {
+      if (!isCurrent()) return
       if (handlers.onPodAdded) {
         try { handlers.onPodAdded(JSON.parse((event as MessageEvent).data)) } catch (e) {
           console.error('Failed to parse pod_added event:', e)
@@ -58,6 +82,7 @@ export function useLogStream() {
     })
 
     es.addEventListener('pod_removed', (event) => {
+      if (!isCurrent()) return
       if (handlers.onPodRemoved) {
         try { handlers.onPodRemoved(JSON.parse((event as MessageEvent).data)) } catch (e) {
           console.error('Failed to parse pod_removed event:', e)
@@ -65,10 +90,23 @@ export function useLogStream() {
       }
     })
 
-    es.addEventListener('end', () => setIsStreaming(false))
+    es.addEventListener('end', () => {
+      if (!isCurrent()) return
+      endedRef.current = true
+      setIsStreaming(false)
+      setConnecting(false)
+    })
 
     es.addEventListener('error', (event) => {
-      handleSSEError(event, errorContext, () => { setIsStreaming(false); es.close() })
+      if (!isCurrent()) { es.close(); return }
+      setIsStreaming(false)
+      setConnecting(false)
+      es.close()
+      // The browser fires 'error' on the normal close that follows a clean
+      // 'end'; that's not a failure, so don't log it or surface it.
+      if (endedRef.current) return
+      handleSSEError(event, errorContext, () => {})
+      setStreamError(errorContext)
     })
 
     eventSourceRef.current = es
@@ -77,5 +115,5 @@ export function useLogStream() {
   // Cleanup on unmount
   useEffect(() => () => { eventSourceRef.current?.close() }, [])
 
-  return { isStreaming, startStreaming, stopStreaming }
+  return { isStreaming, streamError, connecting, startStreaming, stopStreaming }
 }