Home / Questions / 277790
Accepted
Alan
Asked: 2020-07-10 09:29:51 +0800 CST 2020-07-10 09:29:51 +0800 CST

How to catch an error sent from a server in Angular 7+?

  • 772

I've been getting into recently and I would like to know what is the best way to capture and display the errors I receive from a REST API server, I have the following:

Service

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);

  }

}

Component

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 );

    });

  }

}

The error returned is a status 500if there is a failure in the registration and a status 200if the request is successful.

What I want to do is give the user more clarity when creating the account, showing where the error comes from, in this case it would be because the email already exists.

first of all, Thanks :)

javascript

3 Answers

  1. Best Answer

    In your service's subscribe, the second parameter is an error callback , as @AlexisNarvaez says, the strategy you choose to display the error in the view is up to you.

    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)
   })

    Then when receiving your error you can handle it in the way you prefer, I generally do it similar to the previous example, but using a single variable, I create a variable in the component eg: public messageError that is undefined at the moment

    Then in the HTML, you can do the following:

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

    The ngIf says to show the error as long as it exists and if it exists it shows the error, I use the same variable

    So in the subscribe error you do the following:

    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
   })
    • 6

  2. The best way to do this is with an interceptor https://angular.io/api/common/http/HttpInterceptor

    The main function of the interceptor is to intercept all http/https requests that are made through the web. This way I don't have to worry about capturing errors on every subscription I make.

    In my case I use a store to store the errors and I am subscribed to that error store with an error notification component (Snackbar Material).

    I leave you an example of the case in question

    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);
  }
 }
}
    • 2

  3. In my case, I showed the error of the requests at the time of making the request and that the token was no longer in validation, you can adapt my code to yours to the error that you want to show, which would be the same.

    TS AND 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>

    • 1