feat: socket error handling

* create a new session when failed to connect to socket
* reset termnal on connect

app/src/utils/session.js

@@ -48,13 +48,14 @@ class SessionManager {
     return this.session.value
   }
 
-  setSession(session) {
+  async setSession(session) {
     this.session.value = session
     this.graph.value = new FileGraph(session.graph)
     this.hints.value = session.hints
     this.status.value = session.status
-    this.term.clear()
-    this.socket.connect(session)
+    this.term.reset()
+    await this.socket.connect(session)
+    this.term.focus()
   }
 
   handleGraphUpdate(event) {
@@ -92,7 +93,12 @@ class SessionManager {
     })
     const session = res.data
     console.log(session)
-    this.setSession(session)
+    try {
+      await this.setSession(session)
+    } catch (err) {
+      console.log(err)
+      this.createSession().catch(console.error)
+    }
   }
 }
 

app/src/utils/socket.js

@@ -7,30 +7,28 @@ class SocketWrapper {
   }
 
   connect(session) {
-    if (this.socket) {
-      this.socket.off()
-      this.socket.disconnect()
-    }
+    return new Promise((resolve, reject) => {
+      if (this.socket) {
+        this.socket.off()
+        this.socket.disconnect()
+      }
 
-    this.socket = io('', {
-      query: {
-        session_id: session._id,
-      },
+      this.socket = io('', {
+        query: {
+          session_id: session._id,
+        },
+      })
+
+      this.socket.on('connect', () => {
+        console.log('Socket connected to session', session._id)
+      })
+
+      this.socket.once('terminal', () => {
+        resolve()
+      })
+      this.socket.once('error', reject)
+      this.bindListeners()
     })
-
-    this.socket.on('connect', () => {
-      console.log('Socket connected to session', session._id)
-    })
-
-    this.socket.on('disconnect', () => {
-      console.log('Socket disconnected from session', session._id)
-    })
-
-    this.socket.on('error', (err) => {
-      console.log('Socket error', err)
-    })
-
-    this.bindListeners()
   }
 
   on(event, callback) {

app/src/utils/terminal.js

@@ -33,6 +33,10 @@ class SocketTerminal {
     this.term.onData(callback)
   }
 
+  focus() {
+    this.term.focus()
+  }
+
   resizeScreen() {
     this.fitAddon.fit()
   }
@@ -43,8 +47,8 @@ class SocketTerminal {
     this.resizeScreen()
   }
 
-  clear() {
-    this.term.clear()
+  reset() {
+    this.term.reset()
   }
 }
 

server/src/api/socket.js

@@ -35,7 +35,7 @@ async function connectClient(socket) {
   }
   const sessionId = socket.handshake.query.session_id
   if (!sessionId) {
-    socket.send('Session ID not found.')
+    socket.emit('error', 'Session ID not found.')
     socket.disconnect()
     return
   }
@@ -46,7 +46,7 @@ async function connectClient(socket) {
     status: 'active',
   })
   if (!session) {
-    socket.send('Session not found.')
+    socket.emit('error', 'Session not found.')
     socket.disconnect()
     return
   }
@@ -61,7 +61,7 @@ async function connectClient(socket) {
     container = await getAndStartContainer(session.containerId)
     stream = await attachContainer(container, { token })
   } catch (err) {
-    socket.send(err.message)
+    socket.emit('error', 'Failed to start container.')
     socket.disconnect()
     return
   }