MERN栈后端自定义错误无法在前端正确展示的问题求助

问题核心在于你抛出的原生Error对象不包含statusCode属性，即便错误处理中间件设置了默认值400，仍可能因中间件挂载顺序或Express默认错误处理逻辑，导致返回500状态码。以下是具体解决方案：

1. 创建自定义错误类（推荐方案） #

构建继承自原生Error的自定义类，让抛出的错误自带statusCode属性，确保错误处理中间件能准确识别状态码：

// utils/customError.js
class CustomError extends Error {
  constructor(message, statusCode) {
    super(message);
    this.statusCode = statusCode;
    // 保留错误栈信息，方便开发环境调试
    Error.captureStackTrace(this, this.constructor);
  }
}

export default CustomError;

在注册接口中替换原生错误抛出逻辑：

import CustomError from '../utils/customError'; // 路径根据项目结构调整

const registerUser = async (req, res, next) => {
  try {
    const { name, email, password } = req.body;

    let user = await User.findOne({ email });
    if (user) {
      // 抛出带400状态码的自定义错误
      throw new CustomError('User already exists', 400);
    }

    user = await User.create({ name, email, password });
    return res.status(201).json({
      _id: user._id,
      avatar: user.avatar,
      name: user.name,
      email: user.email,
      verified: user.verified,
      admin: user.admin,
      token: await user.getJWTToken(),
    });
  } catch (error) {
    next(error);
  }
};

2. 确保错误处理中间件的挂载顺序 #

在Express主文件（如app.js/server.js）中，必须将错误处理中间件放在所有路由和其他中间件之后，否则无法捕获路由内抛出的错误：

// 先挂载所有业务路由
app.use('/api/users', userRoutes);

// 最后挂载错误处理中间件
import { errorResponserHandler } from './middleware/errorHandler';
app.use(errorResponserHandler);

3. 临时快速验证方案（不推荐长期使用） #

若不想创建自定义类，可手动给原生Error对象添加statusCode属性：

if (user) {
  const err = new Error('User already exists');
  err.statusCode = 400; // 手动指定状态码
  throw err;
}

修改完成后，当数据库存在重复用户时，后端会返回400状态码和自定义错误消息，前端signup函数会正确捕获error.response.data.message，toast组件就能显示预期的错误提示。

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