electron渲染进程崩溃导致白屏问题

914 阅读3分钟

bug触发时机

目前就职一家物联网公司,我们采用c#当上位机服务、electron来做客户端软件。我们需要应用长期运行,如果客户不设置关机时间,就不会关机的。但是,最近售后群里客户反馈,去查看机器时前端软件是白屏状态。

排查流程1

首先和技术大佬查看了前后端日志,日志一切正常。大佬虽然什么都懂但是不是主攻前端,只能我自己Google求助了。通过关键字白屏、electron来查找,搜索出来的绝大多数都是首屏渲染优化。正当我准备问ai时,看见了一篇文章,里面的作者很直接,只有解决代码和官网api链接,解释白屏原因是渲染进程崩溃了。

代码

app.on("render-process-gone", (e, w, d) => {
  if (d.reason == "crashed") {
    console.log("重启渲染进程  ----->  ");
    w.reload();
  } else {
    logger.logger.error(
      "渲染进程崩溃:  ",
      `${new Date()}渲染进程被杀死${d.reason}\n`
    );
  }

});

这个是大佬文章中的代码,但是我习惯摸鱼后删除浏览器记录,已经找不到作者的文章链接了,作者看见可联系我补充出处。

排查流程2

如果就这样结束了就没有必要写文章记录了,而我公司的技术大佬也真的很强。我将大佬叫过来后说明了一下这个情况。大佬思考了以后跟我说,Google浏览器渲染进程崩溃会自动刷新,不会影响使用,并且主动演示了,通过Google浏览器的任务管理器主动杀死渲染进程和gpu进程。当我们主动结束进程后发现浏览器会出现白屏现象,但是一秒内就恢复了。electron用的是Google内核会不会也能刷新呢?

Google浏览任务管理器唤醒位置

320914c816504b0fe940401272a33a6.png

image.png

排查流程3

为了确认原因,我们打开devtools进行查找,却没有查到可以唤醒任务管理器的地方。只能再次求助Google,这次搜索的关键字是electron、任务管理器。这次找到了一个包,包名是electron-process-manager。npm的链接----www.npmjs.com/package/ele…
调用也很简单,下载包,引入主进程,调用api就出现了。

屏幕截图 2025-02-05 210634.png 和Google浏览的任务管理器大同小异就不截图了。当我结束掉electron的gup进程时,应用白屏了无法恢复。

解决方案

知道是渲染进程崩溃导致白屏了就好解决了,网上解决方案都是监听渲染进程然后刷新。但是官网现在废弃了其他api只保留了render-process-gone这个api(我的electron版本是28的)。但是注意如果直接复制这个代码,然后去调试是不行的,这个是判断条件是进程是否崩溃,我们主动杀死进程判断是不成立的,可以不要这个判断或者将刷新事件放到监听中的最后就可以了。

app.on("render-process-gone", (e, w, d) => {
  if (d.reason == "crashed") {
    console.log("重启渲染进程  ----->  ");
  } else {
    logger.logger.error(
      "渲染进程崩溃:  ",
      `${new Date()}渲染进程被杀死${d.reason}\n`
    );
    w.reload();
  }

});

最后

感谢你看到了最后,如果能够帮助到你是最好的,这也是我第一次写技术分享文章,不足之处也希望你能够见谅,有错误指出我会马上改正。