React中Firebase SDK函数无法捕获后端错误详情的解决方法

为啥会这样？ #

Firebase Cloud Functions 默认会把非官方规范抛出的错误给“打码”，避免泄露敏感信息，所以前端只能拿到functions/internal这种通用错误。只有后端用Firebase指定的方式抛错，前端才能拿到具体的错误详情。

怎么解决？ #

第一步：改后端Cloud Functions代码 #

后端不能随便throw new Error()，必须用firebase-functions提供的HttpsError类来抛错，这样才能把错误码、提示信息和自定义详情正确传到前端。

示例后端代码：

const functions = require("firebase-functions");

exports.createKeyFunction = functions.https.onCall((data, context) => {
  // 模拟业务逻辑报错场景
  if (!data.someRequiredField) {
    // 用HttpsError抛错，三个参数分别是：官方错误码、错误提示、自定义详情
    throw new functions.https.HttpsError(
      "invalid-argument",
      "AddSecurity is not implemented",
      { error: "AddSecurity is not implemented" } // 这里放你要传给前端的具体错误信息
    );
  }

  // 正常业务逻辑
  return { success: true };
});

第二步：调整前端错误捕获逻辑 #

现在前端捕获到的FirebaseError里，code、message、details都会对应后端设置的值，直接读取就行。

修正后的前端代码：

const saveKey = async () => { 
    const payload = getPayload();    
    try {
        const result = await createKeyFunction({
            functionName: 'testName',
            payload: payload,
        });
    } catch (error) {
        // 现在能拿到具体错误信息了
        console.error('错误码：', error.code);
        console.error('错误提示：', error.message);
        console.error('详细信息：', error.details);
        // 这里可以根据错误信息做对应处理，比如给用户提示
    }
};

注意事项 #

• 后端用的错误码必须是Firebase官方预定义的，比如invalid-argument、unauthenticated这些，不能自定义错误码。
• 自定义详情通过error.details传给前端，别把敏感信息（如数据库密钥、用户隐私数据）放这里，避免安全风险。
• 如果你的后端是HTTP触发器（不是onCall类型），需要确保响应的状态码和错误格式符合Firebase规范，但从你的代码来看应该是用的onCall云函数，所以重点执行上面的两步即可。

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