Electron-（三）网页报错处理与请求监听

在前端开发中，Electron 是一个强大的框架，它允许我们使用 Web 技术构建跨平台的桌面应用程序。在开发过程中，及时处理网页报错和监听请求是非常重要的环节。本文将详细介绍 Electron 中网页报错的日志记录、webContents 的监听事件以及如何监听全部请求并记录。

一、Electron 中网页报错的日志记录

在 Electron 中，我们可以通过监听BrowserWindow的错误事件来记录网页加载失败、临时加载失败、带响应的加载失败、网页崩溃以及渲染进程消失等情况的日志。

例如，以下代码展示了如何监听BrowserWindow的错误事件并记录日志：

import log from "./log.js";
import config from "./config.js";
import { BrowserWindow } from "electron";

function startSurveil(win) {
  // 监听网页加载失败事件
  win.webContents.on("did-fail-load", (_event, errorCode, errorDescription, _validatedURL) => {
    log.error(`网页加载失败：错误码 ${errorCode}，错误描述 ${errorDescription}`);
  });

  // 监听临时加载失败事件
  win.webContents.on("did-fail-provisional-load", (_event, errorCode, errorDescription, _validatedURL) => {
    log.error(`临时加载失败：错误码 ${errorCode}，错误描述 ${errorDescription}`);
  });

  // 监听带响应的加载失败事件
  win.webContents.on("did-fail-load-with-response", (_event, errorCode, errorDescription, _validatedURL, response) => {
    log.error(`带响应的加载失败：错误码 ${errorCode}，错误描述 ${errorDescription}，响应 ${response}`);
  });

  // 监听网页崩溃事件
  win.webContents.on("crashed", () => {
    log.error("网页崩溃");
  });

  // 监听渲染进程消失事件
  win.webContents.on("renderer-process-gone", (_event, details) => {
    log.error(`渲染进程消失：原因 ${details.reason}`);
  });
}

通过以上代码，我们可以在应用程序中及时发现网页报错情况，并记录详细的错误信息，以便后续的排查和修复。

二、Electron 中 webContents 的监听事件

webContents是 Electron 中BrowserWindow的一个重要属性，它代表了窗口的渲染进程内容。我们可以通过监听webContents的各种事件来实现对网页的监控和交互。

在上述代码中，我们使用了以下几个webContents的监听事件：

did-fail-load：当网页加载失败时触发。
did-fail-provisional-load：当临时加载失败时触发。
did-fail-load-with-response：当带响应的加载失败时触发。
crashed：当网页崩溃时触发。
renderer-process-gone：当渲染进程消失时触发。

这些事件可以帮助我们及时发现网页的各种问题，并采取相应的措施进行处理。

三、Electron 监听全部请求并记录

除了监听网页报错事件，我们还可以监听 Electron 应用程序中的全部请求并记录相关信息。在上述代码中，我们使用了webContents.session.webRequest.onCompleted方法来监听请求完成事件。

以下是具体的代码实现：

const ses = win.webContents.session;
ses.webRequest.onCompleted(
  {
    types: [],
    urls: [config.domain + "/*"],
  },
  (details) => {
    if (config.statusCodesForRecord.indexOf(details.statusCode) > -1) {
      log.warn("> Request error: ", details.url);
      log.warn("  > error: ", details.error);
      log.warn("  > method: ", details.method);
      log.warn("  > statusLine: ", details.statusLine);
      log.warn("  > resourceType: ", details.resourceType);
    }
  }
);

在这个方法中，我们通过指定types和urls参数来过滤需要监听的请求。在回调函数中，我们可以根据请求的状态码来判断是否需要记录请求错误信息。如果请求的状态码在config.statusCodesForRecord数组中，我们就记录请求的 URL、错误信息、请求方法、状态行和资源类型等信息。