如何在Chrome扩展的XMLHttpRequest中捕获net::ERR_FILE_NOT_FOUND错误

嘿，这个问题的核心在于你当前的readFile函数没正确处理请求失败的场景——哪怕文件不存在触发ERR_FILE_NOT_FOUND，onreadystatechange仍然会触发且readyState变为4，你的代码直接resolve了响应，完全没检查请求是否成功，导致Promise不会进入reject状态，自然try/catch抓不到错误。

问题根源 #

针对file://协议的请求，当文件不存在时，XHR的onerror事件可能不会触发（这和HTTP请求的行为有差异），但onreadystatechange依然会执行。此时xhr.status通常是0或者404，但你的原代码没判断这个状态，直接把错误响应resolve了，相当于“假装请求成功”，所以错误没法被捕获。

修复方案 #

修改readFile函数，在readyState变为4时先检查请求是否成功，再决定resolve还是reject：

const readFile = (filePath) => {
  return new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest()
    xhr.onerror = (error) => { reject(error) }
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        // 兼容file://协议和HTTP请求的成功判断：本地文件成功时status为0，HTTP则是200-299区间
        const isRequestSuccess = xhr.status === 0 || (xhr.status >= 200 && xhr.status < 300);
        if (isRequestSuccess) {
          resolve(xhr.response)
        } else {
          // 抛出包含具体错误信息的对象，方便后续处理
          reject(new Error(`文件加载失败：${xhr.statusText || '文件不存在'}`));
        }
      }
    }
    xhr.ontimeout = function () { reject('请求超时') }
    xhr.open('GET', filePath)
    xhr.send()
  })
}

测试修复后的代码 #

现在用try/catch就能正常捕获错误了：

async function loadLocalCode() {
  try {
    const code = await readFile('/home/maxim/Documents/test.jsa'); // 故意写错的路径
    console.log(code)
  } catch (e) {
    console.log('捕获到错误:', e.message);
    // 这里可以添加自定义处理逻辑，比如提示用户检查文件路径等
  }
}

loadLocalCode();

额外注意事项 #

在Chrome扩展中读取本地文件，必须先在manifest.json里声明对应权限，否则会触发权限错误：

{
  "permissions": [
    "file:///*"
  ]
}

这样修改后，无论是文件不存在还是其他请求异常，都能被try/catch正确捕获啦！

内容的提问来源于stack exchange，提问作者maximtop