Electron自动更新流程失效？Object has been destroyed

Electron 自动更新失败#

我们公司的桌面端应用在某次更新时，有位同事出现了如下循环更新的问题：

因为其他人都是正常的，只有一个人那里出现了这个问题。通过查询日志，发现报错如下 Error: Object has been destroyed：

问题原因#

首先，通过查阅资料得知：在 Electron 中，当一个窗口被销毁后，与该窗口相关联的 JavaScript 对象也会被销毁，如果再次尝试访问已被销毁的窗口对象时，就会发出上图所示的错误。

通过日志可以很好的找到问题发生的地方（幸好我们主进程中关键点都添加了明显的日志信息，方便问题查找），很明显是在 autoUpdater.on('update-available' 检测到自动更新后的报错，那就着重排查下这里。

1
autoUpdater.on('update-available', () => {
2
  mainLogger.info('自动更新 有新版本')
3
  disableStopMainWindowClose()
4
  win.show()
5
  mainWindow.destroy()
6
})

通过日志可以分析应该是在 disableStopMainWindowClose 方法中的产生的问题：

1
export function disableStopMainWindowClose() {
2
  mainWindow.off('close', onMainClose)
3
  systemStatus.off()
4
}
5
function onMainClose(e: Electron.Event) {
6
  if (isQuit) return
7
  if (mainWindow.isFullScreen()) {
8
  ...
9
}

如何解决#

为了避免这个错误，需要在窗口对象被销毁时取消订阅所有与该窗口相关的事件，并在需要访问窗口对象时先检查窗口对象是否已经被销毁。

所以需要在调用窗口方法前，先判断窗口是否已被销毁

1
function onMainClose(e: Electron.Event) {
2
  if (isQuit) return
3
  if (mainWindow?.isDestroyed() !== false) return
4
  ...

通过在他的电脑上进行测试，之前的频繁推出的问题没有了，自动更新正常了。

顺便说一下我们 Electron 应用的更新流程。

打包#

首先是打包，打包时需要更新 package.json 中的版本号和版本说明：

1
{
2
  "version": "2.2.7",
3
  "versionNotes": "发现新版本 v2.2.7！\n\n1. 修复客服已知问题"
4
}

修改完后，Mac 和 Windows 各自打包签名，并上传到服务器。

自动更新流程#

关于 Electron 应用的自动更新，官方提供了更新应用程序处理自动更新过程。

因为我们使用的 electron-builder 打包应用，所以使用的是它内置的更新程序Auto Update。

相比 Electron 中自带的更新，它有以下优势：

不需要搭建专用的发布服务器，可上传到任意服务器；
代码签名验证可以在 macOS 和 Windows 上进行；
支持下载进度提示；
代码简单，工作量少。

实现过程#

安装依赖
Terminal window
```
1
yarn add electron-updater
```
主窗口调用

当主窗口被激活显示时，通过 checkLatestVersion 方法检查是否有版本更新
```
1
mainWindow.on('show', checkLatestVersion)
```

检测是否有更新

checkLatestVersion 方法定义在主进程的 update.ts 文件中

1
...
2
export const checkLatestVersion = () => {
3
  getLatestVersionInfo().then((version: any) => {
4
    if (!version) return
5
    mainLogger.info('检查最新版本', version)
6

7
    dialog
8
      .showMessageBox(mainWindow, {
9
        defaultId: 0,
10
        cancelId: 3,
11
        message: version.notes,
12
        buttons: version.isCurrVersionAvailable
13
          ? ['更新', '取消']
14
          : ['更新'],
15
      })
16
      .then(({ response }) => response === 0)
17
      .then((isUpdate) => {
18
        if (isUpdate) IS_MAC ? checkMacUpdate() : checkWinUpdate()
19
      })
20
      .finally(() => (isDialogOpen = false))
21
  })
22
}

getLatestVersionInfo方法用于检测更新，主要通过比对服务器的安装包版本是否大于本地版本，在本地打完包后，会将本地的包上传到服务器上，同时会有一份 RELEASE.json 文件，就是通过比对 RELEASE.json 文件中的 currentRelease 字段。

1
{
2
  "currentRelease": "2.2.7",
3
  "notes": "发现新版本 v2.2.7！\n\n1. 修复客服已知问题。"
4
}

当大于本地版本即需要更新时，显示更新窗口（包含更新版本、更新说明等），当用户点击更新后，调用 Mac 或 Windows 的更新方法。

检查更新前奏——创建更新窗口

1
const checkMacUpdate = () => {
2
  const win = createAutoUpdateWindow()
3
  ...
4
}

首先通过 createAutoUpdateWindow 创建更新窗口

1
const createAutoUpdateWindow = () => {
2
  const win = new BrowserWindow({
3
    width: 560,
4
    height: 120,
5
    titleBarStyle: 'hidden',
6
    webPreferences: {
7
      preload: path.join(__dirname, 'preload.js'),
8
    },
9
  })
10

11
  win.loadURL(getLocalUrl('/auto-update'))
12

13
  return win
14
}

上面代码中创建了一个浏览器窗口，并加载 /auto-update 路由：

1
<template>
2
   <section style="padding: 42px 32px">
3
     <a-progress
4
       :show-info="false"
5
       :stroke-color="{
6
         '0%': '#108ee9',
7
         '100%': '#87d068'
8
       }"
9
       :percent="percent"
10
       status="active"
11
     />
12
     <center style="padding-top: 16px">正在更新中，更新完成后会自动重启，请耐心等待。</center>
13
   </section>
14
 </template>
15

16
 <script setup>
17
 import { onMounted, ref } from 'vue'
18

19
 const percent = ref(0)
20
 const timer = setInterval(() => {
21
   percent.value += 2
22
   if (percent.value >= 95) clearInterval(timer)
23
 }, 300)
24
 </script>

页面显示一个假的进度条即可，新版本下载完成后会自动关闭并安装。

autoUpdater 自动更新

1
const checkMacUpdate = () => {
2
  const win = createAutoUpdateWindow()
3
  // 监听升级失败事件
4
  autoUpdater.on('error', (message) => {
5
    mainLogger.error('自动更新', message)
6
  })
7
  // 监听发现可用更新事件
8
  autoUpdater.on('update-available', () => {
9
    mainLogger.info('自动更新 有新版本')
10
    isUpdating = true
11
    disableStopMainWindowClose()
12
    win.show()
13
    mainWindow.destroy()
14
  })
15
  // 监听没有可用更新事件
16
  autoUpdater.on('update-not-available', () => {
17
    mainLogger.info('自动更新 没有新版本')
18
    win.close()
19
  })
20
  // 监听下载完成事件
21
  autoUpdater.on('update-downloaded', () => {
22
    mainLogger.info('自动更新 新版本下载完成')
23
    // 重新启动并安装更新包 只有update-downloaded事件中可调用
24
    autoUpdater.quitAndInstall()
25
  })
26
  mainLogger.info('自动更新 开始检查', AUTO_UPDATE_JSON_URL)
27
  // 设置安装包所在服务器地址
28
  autoUpdater.setFeedURL({ url: AUTO_UPDATE_JSON_URL, serverType: 'json' })
29
  // 请求服务器是否有更新。 在使用此API之前，您必须调用setFeedURL
30
  autoUpdater.checkForUpdates()
31
}

通过 autoUpdater Events 绑定相应的事件，通过setFeedURL方法设置安装包的地址，最后通过checkForUpdates检查是否有更新，触发绑定的各种事件。

当检测到有新版本时，显示更新窗口，假进度条冒充下载中 😄，自动下载安装包

总结#

本文主要讲解如何解决 Error: Object has been destroyed 这个 Electron 中最常见的问题，以及 Electron 自动更新的流程。通过解决这个问题，意识到需要在 Electron 主进程中，要为代码的关键点添加一些重要的日志信息，这样在遇到问题时，能让我们更加方便的定位问题。

以上就是本文的全部内容，希望这篇文章对你有所帮助，欢迎点赞和收藏 🙏，如果发现有什么错误或者更好的解决方案及建议，欢迎随时联系。

音乐

音乐

Electron 自动更新失败#

问题原因#

如何解决#

打包#

自动更新流程#

实现过程#

总结#

音乐

文章目录