博客

1. 问题描述

使用

Electron

打包

web

项目为桌面应用程序，由于运行环境的硬件条件或其他一些原因，导致程序运行过程中黑屏、白屏、崩溃。

2. 解决过程

2.1 依赖版本：

• 
electron

  ：
  
v8.2.1

• 
electron-log

  :
  
v4.1.1

• 
electron-packager

  :
  
v14.2.1


2.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\程序名\logs

  • 
main.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/