如何捕获TypeError: Failed to fetch背后的详细错误信息？

先明确核心限制 #

浏览器出于安全和隐私保护，不会将底层网络错误（如CORS策略限制、net::ERR_FAILED、网络断开等）的具体细节暴露给JavaScript代码——这是同源策略和浏览器安全机制的强制要求。因此无论你用try/catch还是监听错误事件，最终只能拿到通用的TypeError: Failed to fetch，没法直接获取控制台里显示的详细错误码。

可行的间接捕获方案 #

虽然拿不到精确的错误码，但可以通过以下方法推断错误类型，补充到监控或调试信息中：

• 判断网络连接状态
  利用navigator.onLine属性快速排查是否是网络断开导致的错误：

  try {
    const res = await fetch('/your-target-endpoint');
    // 处理正常响应
  } catch (err) {
    if (!navigator.onLine) {
      // 标记为「网络连接中断」类型错误
      console.error('错误原因：设备已断开网络');
      // 可将该状态上报到Sentry等监控系统
    } else {
      // 其他无法明确的fetch错误
      console.error('Fetch请求失败:', err);
    }
  }
  

• 通过响应状态码推断服务端/请求问题
  如果请求能到达服务器（非CORS/纯网络错误），可以通过响应的状态码获取具体错误信息：

  try {
    const res = await fetch('/your-target-endpoint');
    if (!res.ok) {
      // 捕获4xx/5xx状态码，拿到具体状态文本
      const errDetails = `请求失败，状态码：${res.status}，信息：${res.statusText}`;
      console.error(errDetails);
      // 将该详情上报到监控
    }
    // 处理正常响应数据
  } catch (err) {
    // 处理CORS/网络等无法获取详情的错误
  }
  

• 利用Performance API获取请求元数据
  通过performance.getEntriesByType('resource')可以拿到请求的性能和状态数据，从中推断错误类型：

  // 在请求完成后（成功/失败）执行
  const resourceEntries = performance.getEntriesByType('resource');
  const targetReq = resourceEntries.find(entry => entry.name.includes('/your-target-endpoint'));
  if (targetReq) {
    // 查看请求的状态码、耗时等信息，若responseStatus为0，大概率是CORS或网络错误
    console.log('请求详情:', {
      status: targetReq.responseStatus,
      duration: targetReq.duration,
      name: targetReq.name
    });
  }
  

• 结合服务器日志排查CORS问题
  若怀疑是CORS错误，JS端无法直接获取预检请求（OPTIONS）的错误，但可以：

  1. 在客户端上报错误时记录时间戳
  2. 匹配服务器日志中对应时间的OPTIONS请求记录，查看是否存在预检失败的情况（如响应头配置错误）

关于监控和会话重放工具 #

• Sentry等监控工具默认确实抓不到底层网络错误的详细信息，但可以通过上述方法，将我们推断出的错误状态（如「网络断开」「404状态码」）附加到错误上报中，提升监控的可读性。
• 会话重放工具通常无法捕获控制台的错误详情（除非用户主动打开控制台且工具具备访问权限），因此这不是可靠的排查途径。

总结 #

浏览器不会向JS暴露底层网络错误的具体细节，这是不可突破的安全限制。我们只能通过间接推断+服务器日志联动的方式来定位问题，把能收集到的状态附加到错误上报中，辅助排查那2%用户的异常情况。

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