AngularFireAuth捕获createUserWithEmailAndPassword异常后仍冒泡问题

问题根因 #

这是@angular/fire 6.1.x 版本的已知实现缺陷：AngularFireAuth在封装原生firebase的createUserWithEmailAndPassword方法时，内部额外生成了一个未挂载异常捕获的Promise分支。你在组件中通过try/catch捕获的是await暴露出来的外层Promise异常，但是内部分支的异常没有被捕获，最终就会冒泡到全局错误处理器。而直接调用原生firebase SDK的方法没有这层多余封装，所以表现符合预期。

解决方案 #

方案1：调用时额外兜底Promise捕获（无侵入，推荐） #

直接在方法调用后追加一层catch，把错误原样抛出给上层的try/catch即可覆盖内部遗漏的异常分支，原有业务逻辑不用改：

async onRegisterUsingEmailAndPassword(event) {
  const { email, password } = event;
  try {
    await this.af.createUserWithEmailAndPassword(email, password)
      // 追加这行兜底内部未捕获的Promise
      .catch(err => { throw err });
  } catch(error) {
    // 原有错误逻辑不变，可根据code判断提示用户
    if (error.code === 'auth/email-already-in-use') {
      // 此处写邮箱已注册的用户提示逻辑
    }
    console.log(error);
  }
}

方案2：依赖版本升级 #

该问题在@angular/fire 7.0及以上版本已被官方修复，升级对应依赖即可，注意需要同步兼容适配Angular 12+、firebase 9+的版本要求，适合可以做版本迭代的项目。

方案3：全局错误过滤器过滤业务异常 #

如果不想修改业务代码，可在Angular全局错误处理器中，对code以auth/开头的firebase业务异常做定向过滤，这类异常都是可预期的业务错误，直接跳过全局报错逻辑即可。

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