这个问题确实挺常见的——fetch在网络层面出错时（比如跨域、网络断开），默认抛出的TypeError确实只有干巴巴的"Failed to fetch"提示，但我们可以通过几个技巧来捕获更完整的错误信息，甚至结合请求上下文，让展示的内容更有用。

1. 区分两种错误类型 #

首先要明确，fetch的错误分两类：

• HTTP错误：比如404、500这类状态码非2xx的响应，你已经通过!response.ok的逻辑捕获了，我们可以进一步优化这类错误的提示内容；
• 网络错误：比如网络断开、跨域拦截、DNS解析失败等，这类错误fetch会直接抛出TypeError，默认message只有"Failed to fetch"，但我们可以提取更多隐藏属性。

2. 优化Catch块，捕获完整错误信息 #

我们可以在catch块里判断错误类型，提取所有可用的错误属性，同时把请求的上下文（URL、请求方法、参数）也拼接进去，让最终展示的信息更全面。

修改后的代码示例：

let response;
// 先保存请求上下文，方便错误时一起展示
const requestContext = {
  url: url,
  method: method,
  payload: payload
};

try {
  response = await fetch(url, {
    method: method,
    body: JSON.stringify(payload),
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
  });
  if (!response.ok) {
    // 优化HTTP错误提示，加上状态描述文本
    throw new Error(`RESPONSE NOT OK: ${response.status} ${response.statusText}`);
  }
  console.info('got 200 json response:', await response?.json());
} catch (e) {
  let errorStr = '';
  // 先拼接请求上下文，方便定位问题
  errorStr += `请求详情:\n${JSON.stringify(requestContext, null, 2)}\n\n`;

  if (e instanceof TypeError) {
    // 处理网络错误
    errorStr += `错误类型: 网络错误\n`;
    errorStr += `基础提示: ${e.message}\n`;
    // 部分现代浏览器（如Chrome）会在cause属性里提供更多细节
    if (e.cause) {
      errorStr += `错误原因:\n${JSON.stringify(e.cause, null, 2)}\n`;
    }
    // 尝试序列化整个错误对象，获取所有隐藏属性
    try {
      errorStr += `完整错误信息:\n${JSON.stringify(e, Object.getOwnPropertyNames(e), 2)}`;
    } catch (stringifyErr) {
      errorStr += `完整信息无法序列化: ${stringifyErr.message}`;
    }
  } else {
    // 处理自定义的HTTP错误或其他错误
    errorStr += `错误类型: HTTP/其他错误\n`;
    errorStr += `错误提示: ${e.message}`;
  }

  console.error('CATCH BLOCK:\n', errorStr);
  // 现在可以直接把errorStr渲染到Web界面上
}

3. 实用小技巧 #

• 快速获取带类型的错误字符串：用e.toString()，会返回类似"TypeError: Failed to fetch"，比只取e.message多了错误类型信息；
• 简化序列化：如果不需要太复杂的格式，直接用JSON.stringify(e, null, 2)尝试转成格式化JSON，但注意部分错误属性可能无法序列化，最好包在try-catch里；
• HTTP错误增强：加上response.statusText（比如404 Not Found），让错误提示更直观。

内容的提问来源于stack exchange，提问作者me.at.coding