From bbb6e4f317bba4bda4ef30f720e22c1319c4e9aa Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 12 Jun 2025 14:43:30 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20refactor=20useCo?=
 =?UTF-8?q?nnectionObserver=20to=20track=20session=20time?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add session duration tracking and consolidate all disconnect events
(including client-initiated) with timing data for comprehensive
connection analytics.
---
 .../livekit/hooks/useConnectionObserver.ts    | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/hooks/useConnectionObserver.ts b/src/frontend/src/features/rooms/livekit/hooks/useConnectionObserver.ts
index d01ed6bb..6042d0db 100644
--- a/src/frontend/src/features/rooms/livekit/hooks/useConnectionObserver.ts
+++ b/src/frontend/src/features/rooms/livekit/hooks/useConnectionObserver.ts
@@ -1,17 +1,25 @@
 import { useRoomContext } from '@livekit/components-react'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { DisconnectReason, RoomEvent } from 'livekit-client'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
 import posthog from 'posthog-js'
 
 export const useConnectionObserver = () => {
   const room = useRoomContext()
+  const connectionStartTimeRef = useRef<number | null>(null)
 
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
 
   useEffect(() => {
     if (!isAnalyticsEnabled) return
 
+    const handleConnection = () => {
+      // Preserve original connection timestamp across reconnections to measure
+      // total session duration from first connect to final disconnect.
+      if (connectionStartTimeRef.current != null) return
+      connectionStartTimeRef.current = Date.now()
+    }
+
     const handleReconnect = () => {
       posthog.capture('reconnect-event')
     }
@@ -19,16 +27,34 @@ export const useConnectionObserver = () => {
     const handleDisconnect = (
       disconnectReason: DisconnectReason | undefined
     ) => {
-      if (disconnectReason == DisconnectReason.CLIENT_INITIATED) return
+      const connectionEndTime = Date.now()
+
       posthog.capture('disconnect-event', {
-        reason: disconnectReason && DisconnectReason[disconnectReason],
+        // Calculate total session duration from first connection to final disconnect
+        // This duration is sensitive to refreshing the page.
+        sessionDuration: connectionStartTimeRef.current
+          ? connectionEndTime - connectionStartTimeRef.current
+          : -1,
+        reason: disconnectReason
+          ? DisconnectReason[disconnectReason]
+          : 'UNKNOWN',
       })
     }
+
+    room.on(RoomEvent.Connected, handleConnection)
     room.on(RoomEvent.Disconnected, handleDisconnect)
     room.on(RoomEvent.Reconnecting, handleReconnect)
+
     return () => {
+      room.off(RoomEvent.Connected, handleConnection)
       room.off(RoomEvent.Disconnected, handleDisconnect)
       room.off(RoomEvent.Reconnecting, handleReconnect)
     }
   }, [room, isAnalyticsEnabled])
+
+  useEffect(() => {
+    return () => {
+      connectionStartTimeRef.current = null
+    }
+  }, [])
 }