如何在Electron中通过window.loadURL()捕获503等5XX HTTP错误

开发者阿泽

2026-7-17

捕获Electron中页面加载的5XX HTTP状态码错误

Electron的did-fail-load事件仅触发于无法建立连接、DNS解析失败、无响应这类完全加载失败的场景，而网关返回的5XX状态码属于服务器正常返回了HTTP响应，因此不会触发该事件。要捕获这类错误，需要使用did-get-response-details事件，它能获取到每个请求的响应详情，包括状态码。

实现步骤

监听webContents的did-get-response-details事件，该事件会返回请求的响应状态码、资源类型等关键信息
通过resourceType过滤出主页面的请求（避免捕获CSS、JS、图片等子资源的5XX错误）
判断响应状态码是否处于500-599区间，若是则执行自定义错误处理逻辑

代码示例

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  // 监听响应详情事件，捕获5XX错误
  win.webContents.on('did-get-response-details', (event, status, newURL, originalURL, httpResponseCode, requestMethod, referrer, headers, resourceType) => {
    // 仅处理主页面的请求
    if (resourceType === 'mainFrame' && httpResponseCode >= 500 && httpResponseCode < 600) {
      console.log(`捕获到5XX错误：状态码${httpResponseCode}，请求地址${originalURL}`);
      // 自定义错误处理：比如加载本地错误页面
      win.loadFile('./error-pages/5xx-error.html');
    }
  });

  // 保留原有连接类错误的监听
  win.webContents.on('did-fail-load', (event, errorCode, errorDescription) => {
    console.log(`连接类错误：${errorDescription}，错误码${errorCode}`);
  });

  win.loadURL("https://localhost:443/myapp/index.html");
}

app.whenReady().then(createWindow);