Next.js服务器端动作报错：自定义错误并在客户端展示方法

一、修正服务器端动作的错误处理逻辑 #

原代码中用NextResponse.json返回错误信息无法让客户端捕获，服务器端动作需要主动抛出错误才能触发客户端的catch逻辑。修改后的代码如下：

'use server'

export async function deleteUser(id: number) {
  try {
    const result = await db.delete(users).where(eq(users.id, id));
    // 可选：判断是否实际删除了数据，无匹配用户时抛出自定义错误
    if (result.rowCount === 0) {
      throw new Error(`ID为${id}的用户不存在`);
    }
    revalidatePath("/");
  } catch (error) {
    console.error("删除用户失败:", error);
    // 重新抛出错误，让客户端捕获并处理
    throw new Error(error instanceof Error ? error.message : "删除用户失败，请稍后重试");
  }
}

二、优化客户端的错误捕获与展示 #

客户端需要区分网络错误（如离线场景）和服务器端自定义错误，分别展示对应提示：

'use client' 

const deleteUserHandler = async (id: number) => {
  try {
    await deleteUser(id);
    toast.success(`${user.name} 删除成功！`);
  } catch (error) {
    console.error("删除用户出错:", error);
    let errorMsg = "删除失败，请稍后重试";
    // 处理离线/网络不可用的场景
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      errorMsg = "网络连接异常，请检查网络状态后重试";
    } 
    // 处理服务器端抛出的自定义错误
    else if (error instanceof Error) {
      errorMsg = error.message;
    }
    toast.error(errorMsg);
  }
};

三、关键说明 #

• 服务器端动作必须通过throw抛出错误，而非返回错误响应，这样客户端的await调用才会进入catch块。
• 离线场景下请求无法到达服务器，浏览器会抛出固定的TypeError: Failed to fetch，需单独判断该场景给出对应提示。
• 可根据业务需求扩展自定义错误类，实现更精细的错误场景划分。

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