Angular集成Firebase登录：signInWithEmailAndPassword未捕获控制台错误

问题场景 #

在Angular项目中使用Firebase作为后端，通过signInWithEmailAndPassword接口实现用户登录功能，但无效用户（密码错误或用户不存在）尝试登录时，控制台会出现无法捕获的错误，即使已经用了try-catch语句也没解决。

当前AuthService代码 #

loginWithUserPassword(user: string, password: string): Promise<any> {
  return this.afAuth.signInWithEmailAndPassword(user, password)
    .then(() => {
      return true;
    })
    .catch((err) => {});
}

控制台错误信息 #

POST 400 webpack: zone.js:1518
https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[ApiKey]

webpack: core.mjs:9171
ERROR Error: Uncaught (in promise): FirebaseError: Firebase: The password is invalid or the user does not have a password. (auth/wrong-password).
                                    
at createErrorInternal (index-c6def6da.js:474:41)
at _fail (index-c6def6da.js:445:11)
at index-c6def6da.js:976:17
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:25:1)
at _ZoneDelegate.invoke (zone.js:372:26)
at Object.onInvoke (core.mjs:26274:33)
at _ZoneDelegate.invoke (zone.js:371:52)
at Zone.run (zone.js:134:43)
at resolvePromise (zone.js:1211:31)
at resolvePromise (zone.js:1165:17)
at zone.js:1278:17
at _ZoneDelegate.invokeTask (zone.js:406:31)
at Object.onInvokeTask (core.mjs:26261:33)
at _ZoneDelegate.invokeTask (zone.js:405:60)
at Zone.runTask (zone.js:178:47)
at drainMicroTaskQueue (zone.js:585:35)

问题原因 #

你的catch块是空的，相当于直接吞掉了错误，但Firebase的Promise拒绝事件仍然会被Angular的Zone.js检测到，导致控制台抛出未捕获的Promise错误。另外，空catch块也无法让上层调用者感知到错误，无法做后续处理。

解决方法 #

方法1：完善then/catch写法，不要吞掉错误

修改catch块，要么处理错误（比如记录日志），要么重新抛出错误让上层捕获：

loginWithUserPassword(user: string, password: string): Promise<boolean> {
  return this.afAuth.signInWithEmailAndPassword(user, password)
    .then(() => true)
    .catch((err) => {
      // 可选：记录错误日志
      console.error('登录失败:', err);
      // 重新抛出错误，让调用该方法的组件可以捕获处理
      throw err;
    });
}

方法2：改用async/await + try-catch（更直观）

如果习惯同步写法，可以改成async函数，配合try-catch：

async loginWithUserPassword(user: string, password: string): Promise<boolean> {
  try {
    await this.afAuth.signInWithEmailAndPassword(user, password);
    return true;
  } catch (err) {
    console.error('登录错误:', err);
    // 抛出错误给调用者
    throw err;
  }
}

方法3：在组件层捕获错误

调用loginWithUserPassword的地方，也要用try-catch或者then/catch处理错误：

// 组件中的调用示例
async onLogin() {
  try {
    await this.authService.loginWithUserPassword(this.user, this.password);
    // 登录成功后的逻辑
  } catch (err) {
    // 这里可以给用户提示错误信息，比如"用户名或密码错误"
    alert('登录失败：' + err.message);
  }
}

这样修改后，控制台就不会再出现未捕获的错误，同时你可以在组件层给用户友好的错误提示。

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