Não mostra o erro que retorna do servidor - resolvido

28 respostas Resolvido
angular2
G

Meu componente que chama o service

salvar() {
    if (this.pessoa.controls.tipoPessoa.value !== "") {
      this.publicoService
        .novoContato({
          fisica: this.fisica,
          juridica: this.juridica,
          evento: this.evento,
        })
        .subscribe({
          next: (httpReturn) => {
            this.toastrService.success(httpReturn["texto"]);
          },
          error: (e: any) => {
            this.errorService.error(e);
          },
        });
    }
  }

Meu service

constructor(private http: HttpClient, private errorService: ErrorService) {}
  novoContato(modelo: ContatoModel) {
    return this.http
      .post(`${environment.SIT}${this.servico}novo-contato/`, modelo)
      .pipe(take(1));
  }

Mostra esta mensagem

image

Mas do servidor retorna isto

Configuração do angular

"@angular/animations": "^13.1.1",
    "@angular/cdk": "^13.1.1",
    "@angular/common": "^13.1.1",
    "@angular/compiler": "^13.1.1",
    "@angular/core": "^13.1.1",
    "@angular/forms": "^13.1.1",
    "@angular/localize": "^13.1.1",
    "@angular/material": "^13.1.1",
    "@angular/platform-browser": "^13.1.1",
    "@angular/platform-browser-dynamic": "^13.1.1",
    "@angular/router": "^13.1.1",

28 Respostas

L

Nâo tenho certeza, mas achei estranho seu subscribe está recebendo um objeto ({}). Pesquisando aqui, parece que deveria ser algo assim:

http.subscribe(
  res => console.log('HTTP response', res),
  err => console.log('HTTP Error', err),
  () => console.log('HTTP request completed.')
);

Nesse exemplo, o subscribe recebe 3 funções: A primeira para caso de sucesso (2xx), a segunda para caso de erro (4xx ou 5xx), e a terceira que será sempre executada.

É bem possível que a forma como vc fez seja algo que eu não conheça. Inclusive é a primeira vez que vejo usando dessa forma. De qualquer forma, faça um teste como no exemplo que passei para ver o que acontece.

FONTE: RxJs Error Handling: Complete Practical Guide

G
this.publicoService
        .novoContato({
          fisica: this.fisica,
          juridica: this.juridica,
          evento: this.evento,
        })
        .subscribe(
          (res) => console.log("HTTP response", res),
          (err) => console.log("HTTP Error", err),
          () => console.log("HTTP request completed.")
        );

image

Ele sempre vai para o Erro, só que imprimi ok, ao invés de imprimir o que vem do servidor. parece que não espera.

Do jeito que está ele vai para o metodo

/** @deprecated Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. Details: https://rxjs.dev/deprecations/subscribe-arguments */
  subscribe(next?: ((value: T) => void) | null, error?: ((error: any) => void) | null, complete?: (() => void) | null): Subscription;

Pelo que entendi, deve ser este

subscribe(
    observerOrNext?: Partial<Observer<T>> | ((value: T) => void) | null,
    error?: ((error: any) => void) | null,
    complete?: (() => void) | null
  ): Subscription {
L

Qual o código http que essa requisição está retornando quando retorna erro?

G

Não consegui pegar

image

A mensagem está aqui, mas depois, parece que perde.

L

Tente não utilizar o pipe take, para ver o que acontece.

G

Pus tudo no service

novoContato(modelo: ContatoModel) {
    this.http
      .post(`${environment.SIT}${this.servico}novo-contato/`, modelo)
      .subscribe({
        next: (httpReturn) => {
          this.toastrService.success(httpReturn["texto"]);
        },
        error: (error) => {
          console.error("There was an error!", error);
        },
      });
  }

Não funcionou, imprimiu There was an error! OK

L

Estranho pq erro 400 foi que a requisição foi feita de forma errada (algum parametro obrigatorio faltando ou no tipo errado, por exemplo). Vc consegue ver se apareceu algum erro no backend?

G

O erro, 400. eu retorno do back. No angular 12, 11, 10, 9, sempre foi desta forma, e sempre foi mostrada a mensagem de retorno do back

L

E se deixar assim, o que acontece?

novoContato(modelo: ContatoModel) {
  this.http.post(`${environment.SIT}${this.servico}novo-contato/`, modelo)
    .subscribe((res) => {
      this.toastrService.success(res["texto"]);
    }, (error) => {
      console.error("There was an error!", error);
    });
}
G

Já tinha tentando

Mas ele imprime só isto: There was an error! OK, no console.

L

Já cai na função de erro difreto ou chega a cair na de sucesso em algum momento? (coloca um console log no callback de sucesso para ver)

G

image

Entendo que sim

G

O service está assim

novoContato(modelo: ContatoModel) {
    this.http
      .post(`${environment.SIT}${this.servico}novo-contato/`, modelo)
      .subscribe({
        next: (httpReturn: any) => {
          console.error("ok!", httpReturn);
          this.toastrService.success(httpReturn["texto"]);
        },
        error: (error: any) => {
          console.error("There was an error!", error);
        },
      });
  }
G

Bom dia, tente dessa forma:

this.publicoService
        .novoContato({
          fisica: this.fisica,
          juridica: this.juridica,
          evento: this.evento,
        })
        .subscribe(
          (res) => console.log("HTTP response", res),
          (err) => console.log("HTTP Error", err.error.texto),
          () => console.log("HTTP request completed.")
        );
G

@gbuenoo

Não funciona assim
Do seu jeito ele imprime

Assim:

novoContato(modelo: ContatoModel) {
    return this.http
      .post(`${environment.SIT}${this.servico}novo-contato/`, modelo)
      .subscribe(
        (res) => console.log("HTTP response", res),
        (err) => console.log("HTTP Error", err.error),
        () => console.log("HTTP request completed.")
      );
  }

Ele mostra assim

Assim

novoContato(modelo: ContatoModel) {
    return this.http
      .post(`${environment.SIT}${this.servico}novo-contato/`, modelo)
      .subscribe(
        (res) => console.log("HTTP response", res),
        (err) => console.log("HTTP Error", err),
        () => console.log("HTTP request completed.")
      );
  }

Mostra assim

G

A questão, está na impressão do erro, pelo que estou vendo.

G

Qualquer erro 4** que retorno, ele não mostra o erro

J

Não passou na validação do backend.

G

Sim. Ele retornou para o front este erro, e deveria mostrar. correto ?

Só que só estou conseguindo pegar OK

Entende ?

Não estou conseguindo imprimir este erro

J

Mas o objeto err já está trazendo o erro de validação, basta voce ler e mostrar. No seu próprio print já mostra a estrutura do objeto com a mensagem.

G
novoContato(modelo: ContatoModel) {
    return this.http
      .post(`${environment.SIT}${this.servico}novo-contato/`, modelo)
      .subscribe(
        (res) => console.log("HTTP response", res),
        (err) => console.log("HTTP Error", err),
        () => console.log("HTTP request completed.")
      );
  }

Mas aonde pego esta estrutura do print ?

Não é neste código acima ?

no err ?

J

Sobre essa outra parte do código nao sei, mas tenta isso

.subscribe(
        data => console.log('data', data),
        error => console.log('error', error)
      );
G

Como disse acima, ele imprime só o ok

image

G

image

L

Doideira hein. To curioso pra saber de onde tah vindo esse OK hehehe. Como que tá o backend?


Ah rapaiz, então o subscribe que recebe as funções dessa forma está depreciado. Não sabia disso.

G

Mas mesmo depreciado, deveria funcionar.

O back é java

return ResponseEntity.status(BAD_REQUEST).body(new Mensagem(ERROR, chave + “-erro-geral”, e.getMessage()));

L
Solucao aceita

Será que não tem algum interceptor que esteja alterando algo não?

G

Vou ver

Só pode

Criado 1 de fevereiro de 2022
Ultima resposta 2 de fev. de 2022
Respostas 28
Participantes 4