为何无法获取Express返回的错误信息？Express+React错误处理求助

嘿，我来帮你捋清楚问题出在哪以及怎么解决！

问题根源 #

你现在看到的SyntaxError: Unexpected token < in JSON at position 0，本质原因是Express默认的错误处理返回的是HTML页面，而不是JSON格式。当你在路由里直接throw new Error('BROKEN')时，Express内置的错误处理中间件会生成一个包含错误信息的HTML页面（开头就是<html>标签），前端用res.json()去解析这个HTML内容，自然就会因为格式不匹配抛出语法错误。

解决方案 #

1. 在Express中添加自定义JSON错误处理中间件 #

Express允许你定义全局的错误处理中间件，它会捕获所有路由中抛出的错误，并返回你想要的JSON格式响应。记得把这个中间件放在所有路由之后：

// 全局错误处理中间件（必须有4个参数：err, req, res, next）
app.use((err, req, res, next) => {
  // 控制台打印错误栈，方便后端调试
  console.error(err.stack);
  // 返回500状态码和包含具体错误信息的JSON
  res.status(500).json({
    error: err.message
  });
});

2. 单个路由内用try/catch手动处理错误（可选） #

如果你不想用全局中间件，也可以在特定路由里用try/catch包裹逻辑，手动返回JSON错误：

app.get('/lists', async (req, res) => {
  try {
    // 这里是你的业务逻辑，比如故意抛出错误
    throw new Error('BROKEN');
  } catch (err) {
    // 返回500状态码和错误信息
    res.status(500).json({ error: err.message });
  }
});

3. 前端调整错误处理逻辑 #

注意：fetch API只有在网络故障时才会触发catch，HTTP的4xx/5xx状态码（比如500）不会自动进入catch。所以你需要手动判断响应状态，再处理错误：

useEffect(() => {
  fetch('/lists')
    .then(res => {
      // 先检查响应是否成功（状态码200-299）
      if (!res.ok) {
        // 解析后端返回的JSON错误并抛出
        return res.json().then(errData => Promise.reject(errData.error));
      }
      return res.json();
    })
    .then(json => setTitle(json.message))
    .catch(error => {
      // 现在就能拿到具体的错误信息了！
      console.log('捕获到错误:', error);
    });
}, []);

这样调整后，前端就能正确获取到你在Express里抛出的'BROKEN'错误信息啦～

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