Electron自动更新失效报错Error: Object has been destroyed的问题解决

更新时间：2024年01月29日 08:58:45 作者：翔子丶

本文主要讲解如何解决 Error: Object has been destroyed 这个 Electron 中最常见的问题,以及 Electron 自动更新的流程,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下

Electron 自动更新失败

在 Electron 应用某次更新，出现了如下循环更新的问题：

此时，查询日志，发现报错如下 Error: Object has been destroyed：

问题原因

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

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

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

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

export function disableStopMainWindowClose() {
  mainWindow.off('close', onMainClose)
  systemStatus.off()
}
function onMainClose(e: Electron.Event) {
  if (isQuit) return
  if (mainWindow.isFullScreen()) {
  ...
}

如何解决

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

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

function onMainClose(e: Electron.Event) {
  if (isQuit) return
  if (!mainWindow?.isDestroyed()) return
  ...

重新打包，上传成功后，再次出发自动更新，即可正常了。顺便说一下我们 Electron 应用的更新流程。

打包

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

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

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

自动更新流程

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

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

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

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

实现过程

安装依赖

yarn add electron-updater

主窗口调用

当主窗口被激活显示时，通过 checkLatestVersion 方法检查是否有版本更新

mainWindow.on('show', checkLatestVersion)

检测是否有更新

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

// update.ts
...
export const checkLatestVersion = () => {
  getLatestVersionInfo().then((version: any) => {
    if (!version) return
    mainLogger.info('检查最新版本', version)

    dialog
      .showMessageBox(mainWindow, {
        defaultId: 0,
        cancelId: 3,
        message: version.notes,
        buttons: version.isCurrVersionAvailable
          ? ['更新', '取消']
          : ['更新'],
      })
      .then(({ response }) => response === 0)
      .then((isUpdate) => {
        if (isUpdate) IS_MAC ? checkMacUpdate() : checkWinUpdate()
      })
      .finally(() => (isDialogOpen = false))
  })
}

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

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

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

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

const checkMacUpdate = () => {
  const win = createAutoUpdateWindow()
  ...
}

首先通过 createAutoUpdateWindow 创建更新窗口

const createAutoUpdateWindow = () => {
  const win = new BrowserWindow({
    width: 560,
    height: 120,
    titleBarStyle: 'hidden',
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  })

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

  return win
}

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

<template>
   <section style="padding: 42px 32px">
     <a-progress
       :show-info="false"
       :stroke-color="{
         '0%': '#108ee9',
         '100%': '#87d068'
       }"
       :percent="percent"
       status="active"
     />
     <center style="padding-top: 16px">正在更新中，更新完成后会自动重启，请耐心等待。</center>
   </section>
 </template>

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

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

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

autoUpdater 自动更新

const checkMacUpdate = () => {
  const win = createAutoUpdateWindow()
  // 监听升级失败事件
  autoUpdater.on('error', (message) => {
    mainLogger.error('自动更新', message)
  })
  // 监听发现可用更新事件
  autoUpdater.on('update-available', () => {
    mainLogger.info('自动更新 有新版本')
    isUpdating = true
    disableStopMainWindowClose()
    win.show()
    mainWindow.destroy()
  })
  // 监听没有可用更新事件
  autoUpdater.on('update-not-available', () => {
    mainLogger.info('自动更新 没有新版本')
    win.close()
  })
  // 监听下载完成事件
  autoUpdater.on('update-downloaded', () => {
    mainLogger.info('自动更新 新版本下载完成')
    // 重新启动并安装更新包 只有update-downloaded事件中可调用
    autoUpdater.quitAndInstall()
  })
  mainLogger.info('自动更新 开始检查', AUTO_UPDATE_JSON_URL)
  // 设置安装包所在服务器地址
  autoUpdater.setFeedURL({ url: AUTO_UPDATE_JSON_URL, serverType: 'json' })
  // 请求服务器是否有更新。 在使用此API之前，您必须调用setFeedURL
  autoUpdater.checkForUpdates()
}

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

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

总结

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

以上就是Electron自动更新失效报错Error: Object has been destroyed的问题解决的详细内容，更多关于Electron自动更新失效的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Vue实现一个返回顶部backToTop组件
本篇文章主要介绍了Vue实现一个返回顶部backToTop组件，可以实现回到顶部效果，具有一定的参考价值，有兴趣的可以了解一下
2017-07-07
理解Proxy及使用Proxy实现vue数据双向绑定操作
这篇文章主要介绍了理解Proxy及使用Proxy实现vue数据双向绑定操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue中用 async/await 来处理异步操作
这篇文章主要介绍了vue中用 async/await 来处理异步操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue中如何点击获取当前元素下标
这篇文章主要介绍了Vue中如何点击获取当前元素下标问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue可滑动的tab组件使用详解
这篇文章主要为大家详细介绍了vue可滑动的tab组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Vue动态组件component的深度使用说明
这篇文章主要介绍了Vue动态组件component的深度使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
解决vue打包后vendor.js文件过大问题
这篇文章主要介绍了解决vue打包后vendor.js文件过大问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
vue3全局组件自动注册功能实现
本文主要讲述vue3的全局公共组件的自动注册功能，本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2023-02-02
Vue+OpenLayer为地图添加风场效果
这篇文章主要为大家展示了一个demo，即利用Vue和OpenLayer在地图上面添加风场效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
2022-04-04
vue3使用自定义指令实现el dialog拖拽功能示例详解
这篇文章主要为大家介绍了vue3使用自定义指令实现el dialog拖拽功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09