Add error handling and token refresh to Media Stream

Author: Christdej

frontend/src/components/Contexts/MediaStreamContext.tsx

@@ -72,12 +72,35 @@ export const MediaStreamProvider: FC<Props> = ({ children }) => {
         })
     }
 
+    const isTokenExpired = (token: string): boolean => {
+        try {
+            const payload = JSON.parse(atob(token.split('.')[1]))
+            return Date.now() >= payload.exp * 1000
+        } catch {
+            return true
+        }
+    }
+
     const createLiveKitConnection = async (config: MediaStreamConfig, cachedConfig: boolean = false) => {
+        if (isTokenExpired(config.token)) {
+            console.log('Token expired, refreshing config')
+            if (!cachedConfig) {
+                refreshRobotMediaConfig(config.robotId)
+                return
+            }
+        }
+
         const room = new Room()
 
         window.addEventListener('unload', async () => room.disconnect())
 
         room.on(RoomEvent.TrackSubscribed, (track) => addTrackToConnection(track.mediaStreamTrack, config.robotId))
+
+        room.on(RoomEvent.Disconnected, (reason) => {
+            console.log('LiveKit disconnected:', reason)
+            refreshRobotMediaConfig(config.robotId)
+        })
+
         room.on(RoomEvent.TrackUnpublished, (e) => {
             setMediaStreams((oldStreams) => {
                 const streamsCopy = { ...oldStreams }
@@ -99,12 +122,24 @@ export const MediaStreamProvider: FC<Props> = ({ children }) => {
         })
 
         if (room.state === ConnectionState.Disconnected) {
-            room.connect(config.url, config.token)
-                .then(() => console.log('LiveKit room status: ', JSON.stringify(room.state)))
-                .catch((error) => {
-                    if (cachedConfig) refreshRobotMediaConfig(config.robotId)
-                    else console.error('Failed to connect to LiveKit room: ', error)
-                })
+            try {
+                await room.connect(config.url, config.token)
+                console.log('LiveKit room status: ', JSON.stringify(room.state))
+            } catch (error) {
+                console.error('Failed to connect to LiveKit room: ', error)
+                if (cachedConfig) {
+                    console.log('Connection failed with cached config, refreshing...')
+                    refreshRobotMediaConfig(config.robotId)
+                } else {
+                    setMediaStreams((oldStreams) => ({
+                        ...oldStreams,
+                        [config.robotId]: {
+                            ...oldStreams[config.robotId],
+                            isLoading: false,
+                        },
+                    }))
+                }
+            }
         }
     }
 
@@ -146,19 +181,14 @@ export const MediaStreamProvider: FC<Props> = ({ children }) => {
             .then((conf: MediaStreamConfig | null | undefined) => {
                 if (conf) addConfigToMediaStreams(conf)
             })
-            .catch(() => console.log(`No media config found for robot with ID ${robotId}`))
+            .catch((error) => console.error('Error refreshing media config:', error))
     }
 
     return (
-        <MediaStreamContext.Provider
-            value={{
-                mediaStreams,
-                addMediaStreamConfigIfItDoesNotExist,
-            }}
-        >
+        <MediaStreamContext.Provider value={{ mediaStreams, addMediaStreamConfigIfItDoesNotExist }}>
             {children}
         </MediaStreamContext.Provider>
     )
 }
 
-export const useMediaStreamContext = () => useContext(MediaStreamContext)
+export const useMediaStream = () => useContext(MediaStreamContext)

frontend/src/components/Pages/MissionPage/MissionPage.tsx

@@ -11,7 +11,7 @@ import { AlertType, useAlertContext } from 'components/Contexts/AlertContext'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { FailedRequestAlertContent, FailedRequestAlertListContent } from 'components/Alerts/FailedRequestAlert'
 import { AlertCategory } from 'components/Alerts/AlertsBanner'
-import { useMediaStreamContext } from 'components/Contexts/MediaStreamContext'
+import { useMediaStream } from 'components/Contexts/MediaStreamContext'
 import { StyledPage } from 'components/Styles/StyledComponents'
 import { InspectionDialogView } from '../InspectionReportPage/InspectionView'
 import { useInspectionsContext } from 'components/Contexts/InspectionsContext'
@@ -42,7 +42,7 @@ export const MissionPage = ({ missionId }: { missionId: string }) => {
     const [videoMediaStreams, setVideoMediaStreams] = useState<MediaStreamTrack[]>([])
     const [selectedMission, setSelectedMission] = useState<Mission>()
     const { registerEvent, connectionReady } = useSignalRContext()
-    const { mediaStreams, addMediaStreamConfigIfItDoesNotExist } = useMediaStreamContext()
+    const { mediaStreams, addMediaStreamConfigIfItDoesNotExist } = useMediaStream()
     const { selectedInspectionTask } = useInspectionsContext()
 
     useEffect(() => {

frontend/src/components/Pages/RobotPage/RobotPage.tsx

@@ -11,7 +11,7 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useAssetContext } from 'components/Contexts/AssetContext'
 import { StyledButton, StyledPage } from 'components/Styles/StyledComponents'
 import { DocumentationSection } from './Documentation'
-import { useMediaStreamContext } from 'components/Contexts/MediaStreamContext'
+import { useMediaStream } from 'components/Contexts/MediaStreamContext'
 import { VideoStreamSection } from '../MissionPage/MissionPage'
 import { useEffect, useState } from 'react'
 import { VideoStreamWindow } from '../MissionPage/VideoStream/VideoStreamWindow'
@@ -90,7 +90,7 @@ const StyledStatusElement = styled.div`
 export const RobotPage = ({ robotId }: { robotId: string }) => {
     const { TranslateText } = useLanguageContext()
     const { enabledRobots } = useAssetContext()
-    const { mediaStreams, addMediaStreamConfigIfItDoesNotExist } = useMediaStreamContext()
+    const { mediaStreams, addMediaStreamConfigIfItDoesNotExist } = useMediaStream()
     const [videoMediaStreams, setVideoMediaStreams] = useState<MediaStreamTrack[]>([])
     const { ongoingMissions } = useMissionsContext()