如何在Next.js Server Actions中向React Hook Form前端传递错误信息？

问题分析 #

你当前的写法无效，核心原因是直接将error强制类型转换为string，但catch捕获到的error本质是Error实例，而非原始字符串。直接转换会得到[object Error]这类无意义内容，导致setError无法设置正确的错误信息。

解决方案1：正确提取Error实例的message属性 #

修改前端的错误捕获逻辑，判断错误类型并提取message字段：

const formSubmit: SubmitHandler<FieldValues> = async (values) => {
  setIsLoading(true);

  try {
    await sendResetEmail(values);
  } catch (error) {
    // 提取错误信息
    const errorText = error instanceof Error ? error.message : "未知错误";
    setError("email", {
      type: "manual",
      message: errorText,
    });
  } finally {
    setIsLoading(false);
    reset();
  }
};

解决方案2：自定义业务错误类型（更规范） #

如果需要区分不同类型的业务错误，可以在Server Action中定义自定义错误类，便于前端精准处理：

1. 在Server Action中定义自定义错误

// 自定义验证错误类
export class ValidationError extends Error {
  constructor(message: string) {
    super(message);
    this.name = "ValidationError"; // 标记错误类型
  }
}

export const sendResetEmail = async (values: FieldValues) => {
  const user = await prismadb.user.findUnique({
    where: { email: values?.email },
  });

  if (!user) {
    // 抛出自定义验证错误
    throw new ValidationError("This email is not registered");
  }
  // 后续逻辑...
};

2. 前端针对性处理错误

const formSubmit: SubmitHandler<FieldValues> = async (values) => {
  setIsLoading(true);

  try {
    await sendResetEmail(values);
  } catch (error) {
    if (error instanceof Error && error.name === "ValidationError") {
      // 处理邮箱未注册的验证错误
      setError("email", {
        type: "manual",
        message: error.message,
      });
    } else {
      // 处理其他未知错误
      setError("root", {
        type: "manual",
        message: "发生了意外错误，请稍后重试",
      });
    }
  } finally {
    setIsLoading(false);
    reset();
  }
};

关键注意事项 #

• Next.js Server Action会将抛出的Error实例正确传递到前端，无需额外封装NextResponse（这是API路由的写法，Server Action不适用）。
• 生产环境下，Next.js会隐藏具体错误信息，若需要保留业务错误提示，确保自定义错误的message是明确的业务提示，而非敏感信息。

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