位置: IT常识 - 正文
Electron打包的桌面应用程序，运行中程序黑屏、白屏等渲染进程崩溃问题解决(electron 打包)
发布时间：2024-01-06Electron打包的桌面应用程序，运行中程序黑屏、白屏等渲染进程崩溃问题解决 1. 问题描述
本文链接地址:https://www.jiuchutong.com/zhishi/287998.html
转载请保留说明！
推荐整理分享Electron打包的桌面应用程序，运行中程序黑屏、白屏等渲染进程崩溃问题解决(electron 打包)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:electron打包工具,electron打包exe,electron打包deb,electron打包exe,electron打包exe,electron打包成apk,electron打包deb,electron打包exe,内容如对您有帮助，希望把文章链接给更多的朋友！
使用Electron打包web项目为桌面应用程序，由于运行环境的硬件条件或其他一些原因，导致程序运行过程中黑屏、白屏、崩溃。
2. 解决过程2.1 依赖版本：electron：v8.2.1electron-log: v4.1.1electron-packager: v14.2.12.2 运行环境win7 x86
2.3 分析过程2.3.1 排除程序本身运行不会“白屏”，但运行长时间后，会偶尔出现“白屏”情况，重启程序，可以正常显示。故而排除开发的程序本身存在严重问题的可能，转而从白屏的现象本身寻找思路。
2.3.2 寻找规律观察发现：每当程序崩溃时，任务管理器中，此程序的某个进程出了状况（时间久了，不记得具体情况了，当时没有截图）手动复现：任务管理器中，win10关掉electron程序进程内存占用最大的一个（win7的话关掉第二大的），可以复现白屏的效果。进一步发现，手动复现的过程中，实际关掉的是此程序的“渲染进程”。2.3.2 寻找解决方法查找到官方文档中app的事件renderer-process-crashed，当渲染进程webContents崩溃或关闭时触发。鉴于打包后的程序，在崩溃时，无法直接从控制台中拿到log，引入electron-log包（此处不展开），将输出日志记录到本地文件中，在Electron的“入口文件”中，添加下面代码：// 测试一下是否可以捕捉到崩溃的状态app.on("renderer-process-crashed", function (event, webContents, details) { console.error("renderer-process-crashed catched.");});使用上述“手动复现”的方式模拟“白屏”事件发生，查找“日志文件”，查看main.log中输出的内容，发现确实捕捉到了。日志路径：C:\Users\用户名\AppData\Roaming\程序名\logsmain.log：主进程的日志， 入口文件中输出的日志会在这里。renderer.log: 渲染进程的日志，web项目中输出的日志会在这里。既然已经捕捉到了，那么只要在此处对崩溃进行处理就可以了app.on("renderer-process-crashed", function (event, webContents, details) { // 输出一下捕捉到的reason，实际可以根据不同的“原因”进行具体处理 console.error("renderer-process-crashed, reason => ", JSON.stringify(details)); // 基于我在开发的程序本身的设定，此处重启应用就可以了 app.relaunch({args: process.argv.slice(1).concat(['--relaunch'])}); // 尝试关闭所有窗口 app.quit();});结合运维人员的反馈，“白屏”问题没再出现过了。3. 针对上文中内容的一些说明3.1 renderer-process-crashed返回:
event {Event}webContents {WebContents}killed {boolean} 当渲染器进程webContents崩溃或关闭（杀死）时触发。 已废弃：在新的electron版本中，已经被render-process-gone替代参考Electron官方API文档 https://www.electronjs.org/zh/docs/latest/api/app#%E4%BA%8B%E4%BB%B6-render-process-gone
3.2 electron-log参考electron-log的github https://github.com/megahertz/electron-log/
上一篇：vue中的get方法\post方法如何实现传递数组参数(vue get方法)
下一篇：机器学习-10 聚类算法
