📈(frontend) track WebRTC peer candidates in PostHog events

Capture selected ICE candidates for both subscriber and publisher
peer connections.

This enables correlation between survey feedback and connectivity
setup, helping identify problematic network configurations.

src/frontend/src/features/rooms/components/Conference.tsx

@@ -31,6 +31,8 @@ import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
 import { navigateTo } from '@/navigation/navigateTo'
+import { useSnapshot } from 'valtio'
+import { connectionObserverStore } from '@/stores/connectionObserver'
 
 export const Conference = ({
   roomId,
@@ -44,6 +46,8 @@ export const Conference = ({
   const posthog = usePostHog()
   const { data: apiConfig } = useConfig()
 
+  const connectionObserverSnap = useSnapshot(connectionObserverStore)
+
   const { userChoices: userConfig } = usePersistentUserChoices() as {
     userChoices: LocalUserChoices
   }
@@ -228,13 +232,32 @@ export const Conference = ({
             posthog.captureException(e)
           }}
           onDisconnected={(e) => {
+            const metadata = {
+              room_id: roomId,
+              pc_publisher: connectionObserverSnap.publisher && {
+                ...connectionObserverSnap.publisher,
+              },
+              pc_subscriber: connectionObserverSnap.subscriber && {
+                ...connectionObserverSnap.subscriber,
+              },
+              pc_publisher_changes_count:
+                connectionObserverSnap.publisherChangesCount,
+              pc_subscriber_changes_count:
+                connectionObserverSnap.subscriberChangesCount,
+            }
+
+            connectionObserverStore.publisher = null
+            connectionObserverStore.publisherChangesCount = 0
+            connectionObserverStore.subscriber = null
+            connectionObserverStore.subscriberChangesCount = 0
+
             switch (e) {
               case DisconnectReason.CLIENT_INITIATED:
                 navigateTo(
                   'feedback',
                   {},
                   {
-                    state: { room_id: roomId },
+                    state: { ...metadata },
                   }
                 )
                 return
@@ -244,7 +267,10 @@ export const Conference = ({
                   'feedback',
                   {},
                   {
-                    state: { reason: e, room_id: roomId },
+                    state: {
+                      reason: e,
+                      ...metadata,
+                    },
                   }
                 )
                 return

src/frontend/src/features/rooms/components/Rating.tsx

@@ -7,6 +7,7 @@ import { usePostHog } from 'posthog-js/react'
 import type { PostHog } from 'posthog-js'
 import { Button as RACButton } from 'react-aria-components'
 import { useIsAnalyticsEnabled } from '@/features/analytics/hooks/useIsAnalyticsEnabled'
+import { CandidateInfo } from '@/stores/connectionObserver'
 
 const Card = styled('div', {
   base: {
@@ -303,7 +304,19 @@ const AuthenticationMessage = ({
   )
 }
 
-export const Rating = ({ roomId }: { roomId?: string }) => {
+type RatingMetadata = {
+  room_id?: string
+  pc_publisher?: CandidateInfo
+  pc_subscriber?: CandidateInfo
+  pc_publisher_changes_count?: number
+  pc_subscriber_changes_count?: number
+}
+
+export const Rating = ({
+  metadata: metadataProp,
+}: {
+  metadata: RatingMetadata
+}) => {
   const isAnalyticsEnabled = useIsAnalyticsEnabled()
   const posthog = usePostHog()
 
@@ -318,9 +331,9 @@ export const Rating = ({ roomId }: { roomId?: string }) => {
   const metadata = useMemo(
     () => ({
       session_id: sessionId,
-      room_id: roomId,
+      ...metadataProp,
     }),
-    [roomId, sessionId]
+    [sessionId, metadataProp]
   )
 
   if (!isAnalyticsEnabled) return