How to print the error message in Angular?

Question

I am new as Angular programmer, I have been studying for a little while and I really need help to solve a problem in my Spring Boot project with Angular. I’m looking to print the Java API message on Angular.

I’m gonna take you step by step to make you understand.

Notice the figure below the Postman

I’d like you to look at the records that already exist in the bank, my API Java can save records in the bank, but I created many business rules in the table Styles, I’ll show you one of the rules;

For example, the system does not allow the user to save a record that already exists in the database, if you observe in the figure above the first record is with the name of Amber Lager, and I’ll try to save the same record so you can see what happens.

That was the submitted record:

Since the submitted record already exists in the database then the Java API triggers an error message as you can see below:

They would like to realize that there is the error message of the User and the Developer, what I need is the error message of the User represented as messaging and on it is written "Style name already registered"

OBS: Java API is behaving as expected

The same thing happens on a Front-End screen, NOTEM, the message in red that is fired just below the screen.

This error message was triggered by my API Angular, unfortunately I am inciante as Angular programmer, the message that should be sent would not be that of the figure below, had to be the message that is in the Java API as "Style name already registered", this error message as you can see in the figure below is a generic message, that is, my Angular API does not know how to distinguish the error messages, and because of this any error that appears in the system it will always send this error message from the figure below, because that’s exactly what I don’t want.

This error message is configured in this file below:

import { Injectable } from '@angular/core';

import { ToastyService } from 'ng2-toasty';

@Injectable()
export class ErroHandlerService {

  constructor(private toasty: ToastyService) { }

  handle(errorResponse: any) {
    let msg: string;

    if (typeof errorResponse === 'string') {
      msg = errorResponse;
    } else {
      msg = 'Erro ao processar serviço remoto. Tente novamente.';
      console.error('Ocorreu um erro', errorResponse);
    }

    this.toasty.error(msg);
  }

}

Note that the same message that came out in Postman was also sent on the consoles of the internet browser as you can see in the figure below;

I can find this similar code on the Github, watch:

REPOSITORY

import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { Response } from '@angular/http';

import { NotAuthenticatedError } from './../seguranca/money-http';
import { ToastyService } from 'ng2-toasty';

@Injectable()
export class ErrorHandlerService {

  constructor(
    private toasty: ToastyService,
    private router: Router
  ) { }

  handle(errorResponse: any) {
    let msg: string;

    if (typeof errorResponse === 'string') {
      msg = errorResponse;

    } else if (errorResponse instanceof NotAuthenticatedError) {
      msg = 'Sua sessão expirou!';
      this.router.navigate(['/login']);

    } else if (errorResponse instanceof Response
        && errorResponse.status >= 400 && errorResponse.status <= 499) {
      let errors;
      msg = 'Ocorreu um erro ao processar a sua solicitação';

      if (errorResponse.status === 403) {
        msg = 'Você não tem permissão para executar esta ação';
      }

      try {
        errors = errorResponse.json();

        msg = errors[0].mensagemUsuario;
      } catch (e) { }

      console.error('Ocorreu um erro', errorResponse);

    } else {
      msg = 'Erro ao processar serviço remoto. Tente novamente.';
      console.error('Ocorreu um erro', errorResponse);
    }

    this.toasty.error(msg);
  }

}

Although I got a good code template for me to help mimic the error message of the Java API in the Angular API I’m still having trouble.

Note again the error message:

You may notice that below the Response has the "OK": false, just below has the status: 400, lower has the statusText: "OK", then comes the type: 2, then comes the url:"http://localhost:8080/styles", ultimately the _body: "[{"messaging":"Already registered style name","messaging":"com.algaworks.Brewer.service.Exception."}]

Then have the:

1. OK
2. status
3. statusText
4. type
5. url
6. _body

If I go to adapt the code found in the github repository on the internet with my project I can find in the code all except the _body, I was impressed by this, it really sucked, if I could access maybe I would be able to solve my problem.

====================================================

I tried to perform the check like this, but it generated error in type === 2

else if (errorResponse instanceof Response && errorResponse.type === 2){
      msg = 'Ocorreu um erro ao processar a sua solicitação';
    } 

================================================

Following the suggestion of Peter, putting

salvar(form: FormControl) {
    this.estiloService.adicionar(this.estilo)
    .then(() => {
      this.toasty.success('Cerveja adicionado com sucesso!');
      form.reset();
      this.estilo = new Estilo();
    })
    .catch(erro => this.erroHandler.handle(console.log(erro)));

gave this:

plus that

What I need is to somehow print the error message that comes from the Java API that is Style name already registered on the browser screen.

I’m sorry if I was too long in my explanation, but it was necessary.

This is my repository

Answer 1

Dude you checked that condition if (typeof errorResponse === 'string') is true? You can copy the call code from the Errohandlerservice.Handle function

Answer 2

The change has to be made only in the add method in the file styled.service.ts with this change the error manager is responsible in gives a get on the error message of the Java API, it had already been configured for that same.

adicionar(estilo: Estilo): Promise<Estilo> {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
        return this.http.post(this.estilosUrl,
        JSON.stringify(estilo),  { headers })
      .toPromise()
      .then(response =>  response.json())
      .catch( response => {
          if ( response.status === 400 ) {
              const responseJson = response.json();
              if ( responseJson[0].mensagemUsuario === 'Nome do estilo já cadastrado' ) {
                  return Promise.reject('Nome do estilo já cadastrado');
              }
          }
          return Promise.reject (response);
      });
   }

After the modifications performed worked perfectly.