如何获取fetch请求失败时的完整错误信息？

我来帮你搞定这个问题——你遇到的是fetch API的一个常见特性：当出现网络层面的错误（比如跨域、请求超时、DNS解析失败）时，它只会抛出一个TypeError，默认的message就是固定的"Failed to fetch"；而你当前的HTTP错误处理也可以更完善，把响应里的详细信息加入错误内容。下面是具体的解决方案：

核心问题拆解 #

1. 网络错误：这类错误属于TypeError，直接取e.message只能得到通用提示，但错误对象本身包含更多属性（比如cause、stack等），需要特殊处理才能提取。
2. HTTP错误（4xx/5xx）：你已经判断了response.ok，但目前只抛出了状态码，还可以把响应的状态文本、响应内容也加入错误信息，让错误更完整。

修改后的完整代码 #

try {
  const response = await fetch(url, {
    method: method,
    body: JSON.stringify(payload),
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
  });

  if (!response.ok) {
    // 捕获HTTP错误，提取响应里的详细信息
    let errorDetails = '';
    try {
      // 尝试获取JSON格式的错误详情
      errorDetails = JSON.stringify(await response.json());
    } catch {
      // 如果不是JSON，就获取文本内容
      errorDetails = await response.text();
    }
    // 抛出包含完整HTTP信息的错误
    throw new Error(`请求失败 [${response.status} ${response.statusText}]: ${errorDetails}`);
  }

  const data = await response.json();
  console.info('成功获取响应:', data);
} catch (e) {
  let displayError = '';
  if (e instanceof TypeError) {
    // 处理网络错误，序列化整个错误对象拿到完整信息
    displayError = `网络异常: ${e.message}`;
    // 现代浏览器会提供cause属性，补充更具体的原因
    if (e.cause) {
      displayError += `，原因: ${JSON.stringify(e.cause)}`;
    }
    // 如果需要最完整的错误快照，序列化整个错误对象
    const fullErrorSnapshot = JSON.stringify(e, Object.getOwnPropertyNames(e));
    console.error('完整网络错误快照:', fullErrorSnapshot);
  } else {
    // 处理自定义的HTTP错误或其他错误
    displayError = e.message;
  }

  // 这里直接把displayError用于Web界面展示即可
  console.error('界面展示用错误信息:', displayError);
}

关键技巧说明 #

• 序列化网络错误对象：默认JSON.stringify()不会处理Error对象的所有属性，所以用Object.getOwnPropertyNames(e)作为第二个参数，强制枚举错误对象的所有属性（包括stack、cause等），得到最完整的错误字符串。
• 完善HTTP错误捕获：当响应状态非2xx时，尝试读取响应的JSON或文本内容，把这些业务侧的错误详情也加入错误信息，这样前端就能直接展示后端返回的具体错误提示。
• 区分错误类型：通过instanceof TypeError判断是网络错误还是自定义HTTP错误，分别处理后得到适合展示的友好文本。

这样修改后，你就能在catch块中拿到足够完整的错误信息，直接用于Web界面展示了。

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