0

hace poco tiempo estoy adentrandome a y me gustaria saber cual es la mejor manera para capturar y mostrar los errores que recibo desde un servidor API REST, tengo lo siguiente:

Servicio

import { Injectable } from '@angular/core';
import { Usuario } from 'src/app/models/usuario.model';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class UsuarioService {

  constructor(public _http: HttpClient) {}

  crearUsuario( usuario: Usuario){

    let url = `http://localhost:3000/usuario`;

    return this._http.post(url, usuario);

  }

}

Componente

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UsuarioService } from '../services/service.index';
import { Usuario } from '../models/usuario.model';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./login.component.css']
})
export class RegisterComponent implements OnInit {

  forma: FormGroup;

  constructor( public _usuarioService: UsuarioService) { }

  ngOnInit() {

    this.forma = new FormGroup({
      // Valor por defecto y validaciones
      nombre: new FormControl('test', Validators.required ),
      correo: new FormControl('[email protected]', [Validators.required, Validators.email]),
      password: new FormControl('123456', Validators.required),
      confPassword: new FormControl('123456', Validators.required),
      condiciones: new FormControl(true)
    }, { validators: this.verificarPassword('password', 'confPassword')});

  }

  verificarPassword( campo1: string, campo2: string){
    return ( group: FormGroup) => {
      let pass1 = group.controls[campo1].value;
      let pass2 = group.controls[campo2].value;

      if( pass1 === pass2 ) return null;

      return {
        sonIguales: true
      }
    }
  }

  registrarUsuario(forma: FormControl){
    console.log(forma);

    let usuario = new Usuario(
      this.forma.value.nombre,
      this.forma.value.correo,
      this.forma.value.password
    )

    this._usuarioService.crearUsuario(usuario).subscribe( result =>{


      console.log(result );

    });

  }

}

El error que se retorna es un status 500 si hay una falla en el registro y un status 200 si la petición es exitosa.

Lo que deseo hacer, es darle mas claridad al usuario al momento de crear la cuenta, mostrando de donde proviene el error, en este caso seria por que el correo electrónico ya existe.

de antemano Gracias :)

3 respuestas 3

6

En el subscribe de tu servicio, el segundo parámetro es un callback de error, tal como lo dice @AlexisNarvaez, la estretegia que tu elijas para mostrar el error en la vista es tu decisión.

myService
   .subscribe(data => {
       // Entra aquí con respuesta del servicio correcta código http 200
       console.log(data)
   }, err => {
       // Entra aquí si el servicio entrega un código http de error EJ: 404, 
       500
       console.log(err)
   })

Luego al recibir tu error puedes manejarlo de la forma que prefieras, generalmente lo hago similar al ejemplo anterior, pero utilizando una sola variable, creo un variable en el componente ej: public messageError que esta undefined por el momento

Luego en el HTML, puede realizar lo siguiente:

<div *ngIf="messageError">{{ messageError }}</div>

El ngIf dice que muestre el error siempre que este exista y si es que existe muestra el error, utilizo la misma variable

Entonces en el error del subscribe haces lo siguiente:

myService
   .subscribe(data => {
       // Entra aquí con respuesta del servicio correcta código http 200
       console.log(data)
   }, err => {
       // Puedes pasarle el err en caso de que mandes el mensaje desde el 
       back-end
       messageError = err
   })
2
  • muchas gracias por la respuesta, justo lo que necesitaba ademas de muy bien explicada!
    – Alan
    Commented el 9 jul. 2019 a las 21:33
  • Gracias por mencionarme en la solución :D Commented el 11 jul. 2019 a las 20:14
2

La mejor manera de hacerlo es con un interceptor https://angular.io/api/common/http/HttpInterceptor

La función principal del interceptor es interceptar todas las peticiones http/https que se realicen a través de la web. De este modo no me tengo que preocupar de capturar los errores en cada suscripción que haga.

En mi caso yo utilizo una store para almacenar los errores y estoy subscrito a esa store de errores con un componente de notificación de errores (Snackbar Material).

Te dejo un ejemplo del caso en cuestión

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { Observable, throwError } from 'rxjs';

import { CatchError } from '../../store/state/errors/errors.action';
import { ErrorState } from '../../store/state/errors/errors.state';
import { environment } from '../../../../environments/environment';

@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
constructor(private store: Store<ErrorState>) {}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 if (req.url.includes(environment.serverUrl)) {
  return next.handle(req).pipe(
    catchError((err: any) => {
      this.store.dispatch(new CatchError(err.error));
      return throwError(err);
    })
  );
} else {
  return next.handle(req);
  }
 }
}
1

en mi caso yo mostraba el error de las peticiones al momento de hacer la petición y que el token ya no estuviera en validación, puedes adaptar mi código al tuyo al error que quieras mostrar que vendría siendo lo mismo.

TS Y HTML.

    this.spotify.getNewReleases()
                .subscribe( (data: any) =>{
                  console.log(data);
                  this.nuevasCanciones = data;
                  this.loading = false;
                }, (errorServicio)=>{
                  console.log(errorServicio);
                  this.mensajeError = errorServicio.error.error.message;
                });

   }
<div *ngIf="error" class="alert alert-danger animated fadeIn">
  <h3>Error</h3>
  <p>
    {{mensajeError}}
  </p>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.