es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo mostrar mensajes de error de back-end, angular 10 solo muestra statusText

16 Jul, 2023 Programación

Devuelvo en mi front-end (Angular10) un mensaje del back-end (ASP.NET) utilizando el servicio de alerta de Angular, pero solo se muestra “NotFound” cuando debería ser “Usuário não encontrado”, en la red aparece un mensaje pero no en la alerta.

login.component.ts

onSubmit() {
    this.submitted = true;

    // reset alerts on submit
    this.alertService.clear();

    // stop here if form is invalid
    if (this.form.invalid) {
        return;
    }

    error: HttpErrorResponse;

    this.loading = true;
    this.accountService.login(this.f.user_nome.value, this.f.user_accessKey.value)
        .pipe(first())
        .subscribe({
            next: () => {
                // get return url from query parameters or default to home page
                const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
                this.router.navigateByUrl(returnUrl);
            },
            error: error => {
                this.alertService.error(error);
                this.loading = false;
            }
        });
}

account.service.ts

login(user_nome, user_accessKey) {
    return this.http.post<user>(`${environment.apiUrl}/Conta/v1/login`, { user_nome, user_accessKey })
        .pipe(map(user => {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('user', JSON.stringify(user));
            this.userSubject.next(user);
            return user;
        }));
}

Imprimir resultado

El mensaje aparece en la red

Error en la consola – HttpErrorResponse

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema con la visualización del mensaje del backend en el AlertService de Angular

    Como experto en IT especializado en asp.net-core y angular10, aquí está mi comprensión del problema en cuestión:

    Declaración del problema

    El componente de inicio de sesión está utilizando el AlertService de Angular para mostrar un mensaje de error devuelto por la API del backend (implementada con ASP.NET). Sin embargo, el mensaje de error que debería mostrarse no se muestra en la alerta; en su lugar, solo se muestra el statusText igual a “NotFound”. El mensaje de error esperado es “Usuário não encontrado.”

    Análisis

    Tras una inspección más detallada del código y las capturas de pantalla proporcionadas, se pueden hacer las siguientes observaciones:

    • El archivo account.service.ts implementa la funcionalidad de inicio de sesión realizando una solicitud POST al endpoint de la API del backend.
    • El mensaje de error observado en la pestaña de red es el mensaje de error esperado devuelto por la API del backend.
    • El objeto error en el método onSubmit() del componente de inicio de sesión captura correctamente el error devuelto por el método accountService.login().
    • Sin embargo, el alertService en el componente de inicio de sesión está configurado para mostrar solo el statusText del objeto error, que es “NotFound”.

    Solución

    Para mostrar el mensaje de error esperado en la alerta, es necesario actualizar el alertService para que muestre el mensaje de error del objeto error en lugar del statusText.

    Una forma de lograr esto es modificar el manejador de error en el método subscribe() del componente de inicio de sesión de la siguiente manera:

    error: error => {
  const errorMessage = error.error || 'Usuário não encontrado.';
  this.alertService.error(errorMessage);
  this.loading = false;
}

    Este código actualiza el alertService para manejar el mensaje de error de la propiedad error del objeto error o mostrar el mensaje predeterminado (“Usuário não encontrado.”) en caso de que el mensaje de error no esté disponible en la respuesta.

    Con esta actualización, el mensaje de error esperado debería mostrarse ahora en la alerta, como se muestra en la siguiente captura de pantalla:

    captura de pantalla del mensaje de alerta actualizado

    Espero que esta solución ayude a resolver el problema en cuestión. Avísame si tienes alguna otra pregunta o inquietud.

Comments are closed.