fix: reconnect automatically in case background script is killed, fix #1950

Author: Akryum

packages/app-backend-core/src/index.ts

@@ -61,7 +61,7 @@ export async function initBackend (bridge: Bridge) {
   initOnPageConfig()
 
   if (!connected) {
-    // connected = false
+    // First connect
     ctx = target.__vdevtools_ctx = createBackendContext({
       bridge,
       hook,
@@ -91,8 +91,10 @@ export async function initBackend (bridge: Bridge) {
       })
     }
   } else {
+    // Reconnect
     ctx.bridge = bridge
     connectBridge()
+    ctx.bridge.send(BridgeEvents.TO_FRONT_RECONNECTED)
   }
 }
 

packages/shared-utils/src/consts.ts

@@ -18,6 +18,8 @@ export enum BridgeEvents {
   /** Tab was switched */
   TO_BACK_TAB_SWITCH = 'b:tab:switch',
   TO_BACK_LOG = 'b:log',
+  /** Reconnected after background script is terminated (idle) */
+  TO_FRONT_RECONNECTED = 'f:reconnected',
 
   // Apps
   /** App was registered */

packages/shell-chrome/src/backend.js

@@ -44,6 +44,7 @@ function handshake (e) {
         window.removeEventListener('message', l)
       })
       listeners = []
+      window.addEventListener('message', handshake)
     })
 
     initBackend(bridge)

packages/shell-chrome/src/devtools.js

@@ -1,7 +1,7 @@
 // this script is called when the VueDevtools panel is activated.
 
 import { initDevTools, setAppConnected } from '@front'
-import { Bridge } from '@vue-devtools/shared-utils'
+import { Bridge, BridgeEvents } from '@vue-devtools/shared-utils'
 
 initDevTools({
 
@@ -15,18 +15,47 @@ initDevTools({
     // 1. inject backend code into page
     injectScript(chrome.runtime.getURL('build/backend.js'), () => {
       // 2. connect to background to setup proxy
-      const port = chrome.runtime.connect({
-        name: '' + chrome.devtools.inspectedWindow.tabId,
-      })
+      let port
       let disconnected = false
-      port.onDisconnect.addListener(() => {
-        disconnected = true
-        setAppConnected(false)
-      })
+      let connectCount = 0
+      let timer
+
+      const onMessageHandlers = []
+
+      function connect () {
+        try {
+          clearTimeout(timer)
+          connectCount++
+          port = chrome.runtime.connect({
+            name: '' + chrome.devtools.inspectedWindow.tabId,
+          })
+          disconnected = false
+          port.onDisconnect.addListener(() => {
+            disconnected = true
+            setAppConnected(false)
+
+            // Retry
+            timer = setTimeout(connect, 1000)
+          })
+
+          if (connectCount > 1) {
+            onMessageHandlers.forEach(fn => port.onMessage.addListener(fn))
+          }
+        } catch (e) {
+          console.error(e)
+          disconnected = true
+          setAppConnected(false)
+
+          // Retry
+          timer = setTimeout(connect, 5000)
+        }
+      }
+      connect()
 
       const bridge = new Bridge({
         listen (fn) {
           port.onMessage.addListener(fn)
+          onMessageHandlers.push(fn)
         },
         send (data) {
           if (!disconnected) {
@@ -37,6 +66,11 @@ initDevTools({
           }
         },
       })
+
+      bridge.on(BridgeEvents.TO_FRONT_RECONNECTED, () => {
+        setAppConnected(true)
+      })
+
       // 3. send a proxy API to the panel
       cb(bridge)
     })