Retry device api call when tunnel proxy returns 502 to re-set the device affinity token

frontend/src/api/devices.js

@@ -242,6 +242,10 @@ const generateSnapshotDescription = async (deviceId, target) => {
         })
 }
 
+const getDeviceEditorProxy = async (editorUrl) => {
+    return client.get(editorUrl)
+}
+
 export default {
     create,
     getDevice,
@@ -266,5 +270,6 @@ export default {
     suspendDevice,
     restartDevice,
     startDevice,
-    generateSnapshotDescription
+    generateSnapshotDescription,
+    getDeviceEditorProxy
 }

frontend/src/composables/DeviceHelper.js

@@ -118,9 +118,15 @@ export function useDeviceHelper () {
         if (shouldStartPolling) { startPolling() }
     }
 
-    async function fetchDevice (deviceId = null) {
+    async function fetchDevice (deviceId = null, shouldSetDevice = true) {
         try {
-            device.value = await deviceApi.getDevice(deviceId || device.value?.id)
+            const response = await deviceApi.getDevice(deviceId || device.value?.id)
+
+            if (shouldSetDevice) {
+                device.value = response
+            }
+
+            return response
         } catch (err) {
             if (err.status === 403) {
                 stopPolling()
@@ -149,6 +155,14 @@ export function useDeviceHelper () {
         })
     }
 
+    async function getDeviceEditorProxy (device) {
+        if (device.editor.url) {
+            return deviceApi.getDeviceEditorProxy(device.editor.url)
+        }
+
+        return Promise.reject(Error('editor url unavailable'))
+    }
+
     return {
         agentSupportsDeviceAccess,
         agentSupportsActions,
@@ -162,6 +176,7 @@ export function useDeviceHelper () {
         resumePolling,
         restartDevice,
         fetchDevice,
-        showDeleteDialog
+        showDeleteDialog,
+        getDeviceEditorProxy
     }
 }

frontend/src/pages/device/Editor/index.vue

@@ -129,7 +129,8 @@ export default {
             startPolling,
             stopPolling,
             resumePolling,
-            pausePolling
+            pausePolling,
+            getDeviceEditorProxy
         } = useDeviceHelper()
 
         return {
@@ -157,7 +158,8 @@ export default {
             stopPolling,
             resumePolling,
             pausePolling,
-            showDeleteDeviceDialog
+            showDeleteDeviceDialog,
+            getDeviceEditorProxy
         }
     },
     computed: {
@@ -312,7 +314,32 @@ export default {
     methods: {
         ...mapActions('context', { setContextDevice: 'setDevice' }),
         loadDevice: async function () {
-            await this.fetchDevice(this.$route.params.id)
+            let tries = 0
+            let device = await this.fetchDevice(this.$route.params.id, false)
+
+            // When running multiple replicas of the forge app, the affinity token may be missing if the request is routed to a
+            // backend endpoint that didn't initiate the tunnel. If we receive a 502 from the device editor proxy,
+            // we retry the editor API call until the correct affinity token is acquired (200/302).
+            while (tries <= 5) {
+                try {
+                    await this.getDeviceEditorProxy(device)
+                    break
+                } catch (e) {
+                    if (e?.response?.status === 502) {
+                        tries += 1
+
+                        // 1s interval timeout between tries
+                        await new Promise(resolve => setTimeout(resolve, 1000))
+
+                        device = await this.fetchDevice(this.$route.params.id, false)
+                        continue
+                    }
+
+                    break
+                }
+            }
+
+            this.device = device
             await this.$store.dispatch('account/setTeam', this.device.team.slug)
         },
         showConfirmDeleteDialog () {