如何捕获Google Cloud Function的POST请求错误并读取自定义错误响应内容

问题的核心在于，你的Cloud Function在返回验证失败信息时，默认使用了200状态码（HTTP成功状态），而fetch API只有在遇到网络错误时才会触发catch块，对于状态码非200但请求完成的情况，它会认为请求"成功"，不会进入错误捕获逻辑。要解决这个问题，需要从后端和前端两方面调整：

第一步：修改Cloud Function，返回错误状态码 #

在验证不通过或发生异常时，不要只用res.send()，而是搭配对应的错误状态码（比如400表示请求参数错误，500表示服务器内部错误）：

function addLine(req, res) {
  res.set("Access-Control-Allow-Origin", "*");
  if (req.method === "OPTIONS") {
    res.set("Access-Control-Allow-Methods", "POST");
    res.set("Access-Control-Allow-Headers", "Content-Type");
    res.set("Access-Control-Max-Age", "3600");
    return res.status(204).send("");
  }
  const isReqValid = validateReq(req);
  if (!isReqValid) return res.status(400).send("Not valid request!"); // 修改这里，返回400状态码
  const { body } = req;
  const isBodyValid = validateData(body);
  if (!isBodyValid) return res.status(400).send("Not valid payload!"); // 同样返回400
  return appendData(body)
    .then(() => res.send("Added line"))
    .catch((err) => {
      res.status(500).send("Generic error!"); // 服务器异常返回500
    });
}

// 其他函数保持不变...

第二步：前端修改fetch逻辑，处理非200状态码 #

fetch不会自动将非200状态码视为错误，所以需要手动检查response.ok属性（当状态码在200-299之间时为true），如果不满足则抛出错误，并读取响应文本：

async collaborate(data: CollaborateDatum) {
  try {
    await post('...cloudfunctions.net/addLine', data);
    console.log("数据追加成功");
  } catch (error) {
    // 在这里捕获并处理错误信息
    console.error("请求失败:", error.message);
  }
}

async function post(url, data) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });

  // 检查响应状态是否正常
  if (!response.ok) {
    // 读取响应文本并抛出错误
    const errorMessage = await response.text();
    throw new Error(errorMessage);
  }

  return response;
}

为什么这样有效？ #

• 后端返回错误状态码后，前端fetch的response.ok会变为false，我们手动抛出包含错误信息的异常
• 这样前端的try/catch就能捕获到后端返回的具体错误信息（比如"Not valid payload!"），而不是忽略这些验证失败的情况

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