如何在React中获取Node.js后端抛出的自定义错误提示信息

问题原因 #

你目前无法正常拿到错误提示是两个核心问题导致的：

1. 后端直接抛出错误后，没有统一的错误处理中间件将错误信息封装为前端预期的{error: 错误消息}结构，且业务错误没有设置正确的客户端状态码
2. 前端捕获错误后仅做了控制台打印，没有调用提示组件将错误展示给用户，同时原有代码还存在方法名拼写错误的问题

解决方案 #

第一步：修改后端逻辑

1. 先在项目路由层末尾添加全局错误处理中间件，统一错误返回格式：

// 需放在所有路由定义之后
app.use((err, req, res, next) => {
  // 兼容业务代码设置的状态码，默认返回500服务端错误
  const statusCode = res.statusCode === 200 ? 500 : res.statusCode;
  res.status(statusCode);
  res.json({
    error: err.message,
    // 生产环境不返回错误栈信息
    stack: process.env.NODE_ENV === 'production' ? null : err.stack
  })
})

2. 调整注册接口的错误抛出逻辑，业务错误提前设置状态码：

module.exports.register = asyncHandler(async (req, res) => {
  const { fullname, email, password } = req.body;

  let user = await User.findOne({ email: email });

  // 用户已存在属于客户端参数错误，返回400状态码
  if (user) {
    res.status(400);
    throw new Error("该邮箱已被注册，请更换邮箱后重试");
  }
  
  user = await User.create({ fullname, email, password });

  if (user) {
    res.json({
      _id: user._id,
      name: user.fullname,
      email: user.email,
      token: tokenGenereator(user._id),
    });
  } else {
    res.status(400);
    throw new Error("注册失败，请检查输入信息后重试");
  }
})

第二步：修改前端逻辑

调整错误捕获分支的逻辑，修正方法名拼写，调用提示组件展示错误：

export const register = ({ fullname, email, password }) => {
  return async (dispatch) => {
    try {
      const config = {
        headers: {
          "Content-type": "application/json",
        },
      };
      const { data } = await axios.post(
        "http://localhost:5000/api/register",
        {
          fullname,
          email,
          password,
        },
        config
      );
      dispatch(
        // 修正原代码的方法名拼写错误 Notificatoin -> Notification
        uiActions.showNotification({
          variant: "success",
          message: "用户注册成功！",
        })
      );
      localStorage.setItem("userInfo", JSON.stringify(data));
    } catch (error) {
      // 优先取后端返回的错误信息，兜底用通用提示
      const errMsg = error.response?.data?.error || '注册失败，请检查网络后重试'
      console.log(errMsg)
      // 弹出错误提示
      dispatch(
        uiActions.showNotification({
          variant: "error",
          message: errMsg,
        })
      );
    }
  };
};

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas