Pro对象抛出错误时浏览器中的Vue.js未捕获错误

Question

我有一个具有UserService属性的组件Login.vue。 UserService由FirebaseUserService实现。

我的问题是，当我单击带有无效输入的按钮signIn时，它使FirebaseUserService中的signIn方法抛出错误（期望的行为）。

当Login.vue组件发生错误时，将执行catch中的代码（期望的行为）。但是我的浏览器控制台出现一个错误，提示未捕获的错误：错误消息（不需要的行为）。

我想知道即使我有一个在Login.vue登录中执行的catch块，为什么也有这个未捕获的错误。

P.S。我尝试使用抛出Login.vue组件的方法，但没有遇到未捕获的错误

Login.vue

<template>
  <div id="login">
    <b-row align-v="center" align-h="center">
      <b-col cols="12" sm="8" md="4">
        <b-card
          border-variant="primary"
          header="Login"
          header-text-variant="white"
          header-bg-variant="primary"
          align="center"
        >
          <b-form-input class="my-1" v-model="email" type="text" placeholder="Email"></b-form-input>
          <b-form-input class="my-1" v-model="password" type="password" placeholder="Password"></b-form-input>
          <b-button
            @click="signIn(email, password)"
            variant="primary"
            type="button"
            id="signInButton"
            class="my-1"
          >Login</b-button>
          <p class="text-danger" id="errorMessage" v-bind:value="errorMessage">{{errorMessage}}</p>
        </b-card>
      </b-col>
    </b-row>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { UserService } from '../domain/user/UserService'

@Component
export default class Login extends Vue {
  @Prop() private userService!: UserService;
  email: string = '';
  password: string = '';
  errorMessage: string = '';

  async signIn(email: string, password: string): Promise<void> {
    try {
      await this.userService.signIn(email, password)
      this.$router.push('/profile')
    } catch (error) {
      this.errorMessage = error.message
    }
  }
}
</script>

UserService.ts

export interface UserService {
  signIn: (email: string, password: string) => Promise<void>;
}

FirebaseUserService.ts

import firebase from 'firebase/app'
import Auth = firebase.auth.Auth

export class FirebaseUserService implements UserService {
  private readonly WRONG_PASSWORD_CODE: string = 'auth/wrong-password'
  private readonly WRONG_EMAIL_CODE: string = 'auth/user-not-found'
  private readonly INVALID_EMAIL_CODE: string = 'auth/invalid-email'
  private readonly USER_DISABLED_CODE: string = 'auth/user-disabled'

  private auth: Auth

  constructor(auth: Auth) {
    this.auth = auth
  }

  public async signIn(email: string, password: string): Promise<void> {
    await this.auth.signInWithEmailAndPassword(email, password).catch((error:any) => {
      if (error.code === this.WRONG_EMAIL_CODE) {
        throw new Error('Invalid Credential')
      }
      if (error.code === this.WRONG_PASSWORD_CODE) {
        throw new Error('Invalid Credential')
      }
      if (error.code === this.INVALID_EMAIL_CODE) {
        throw new Error('Invalid Email')
      }
      if (error.code === this.USER_DISABLED_CODE) {
        throw new Error('User disabled')
      }
    })
  }
}