Angular não puxa tratamento de erro do backend - java

Front-end
, , ,
#1

Estou criando um site com Angular no front, e java no backend. O backend está com deploy no heroku.
é uma apl

no postman o erro aparece da forma que eu fiz o tratamento.

Ao adicionar uma categoria sem os campos, que são, nome e descrição, a seguinte menssagem deve aparecer no status 400.

{
    "timestamp": 1654204857246,
    "status": 400,
    "error": "Erro na validação dos campos ",
    "errors": [
        {
            "fieldname": "nome",
            "message": "O campo NOME deve ter entre 3 e 100 caracteres"
        },
        {
            "fieldname": "descricao",
            "message": "O campo DESCRIÇÃO deve ter entre 3 e 100 caracteres"
        },
        {
            "fieldname": "descricao",
            "message": "Campo DESCRIÇÃO é requerido"
        },
        {
            "fieldname": "nome",
            "message": "Campo NOME é requerido"
        }
    ]
}

Eu criei um front, com a pagina para criar a categoria. quando eu nao preencho os campos, a menssagen do status 400 nao aparece no console do navegador . o que aparece é:

zone.js:2680 
 POST https://backend-livraria.herokuapp.com/categorias 400
core.mjs:6485 ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at Object.error (categoria-create.component.ts:29:42)
    at ConsumerObserver.error (Subscriber.js:102:1)
    at SafeSubscriber._error (Subscriber.js:64:1)
    at SafeSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
    at OperatorSubscriber._error (Subscriber.js:64:1)
    at OperatorSubscriber.error (Subscriber.js:40:1)
defaultErrorLogger  @   core.mjs:6485
handleError @   core.mjs:6532
next    @   core.mjs:26107
next    @   Subscriber.js:91
_next   @   Subscriber.js:60
next    @   Subscriber.js:31
(anonymous) @   Subject.js:34
errorContext    @   errorContext.js:19
next    @   Subject.js:27
emit    @   core.mjs:22447
(anonymous) @   core.mjs:25594
invoke  @   zone.js:372
run @   zone.js:134
runOutsideAngular   @   core.mjs:25467
onHandleError   @   core.mjs:25594
handleError @   zone.js:376
runTask @   zone.js:181
invokeTask  @   zone.js:487
ZoneTask.invoke @   zone.js:476
data.args.<computed>    @   zone.js:2358
setTimeout (async)      
scheduleTask    @   zone.js:2360
scheduleTask    @   zone.js:393
onScheduleTask  @   zone.js:283
scheduleTask    @   zone.js:386
scheduleTask    @   zone.js:221
scheduleMacroTask   @   zone.js:244
scheduleMacroTaskWithCurrentZone    @   zone.js:683
(anonymous) @   zone.js:2402
proto.<computed>    @   zone.js:973
setTimeout  @   timeoutProvider.js:7
reportUnhandledError    @   reportUnhandledError.js:4
handleUnhandledError    @   Subscriber.js:158
error   @   Subscriber.js:105
_error  @   Subscriber.js:64
error   @   Subscriber.js:40
_error  @   Subscriber.js:64
error   @   Subscriber.js:40
_error  @   Subscriber.js:64
error   @   Subscriber.js:40
_error  @   Subscriber.js:64
error   @   Subscriber.js:40
onLoad  @   http.mjs:1828
invokeTask  @   zone.js:406
onInvokeTask    @   core.mjs:25555
invokeTask  @   zone.js:405
runTask @   zone.js:178
invokeTask  @   zone.js:487
invokeTask  @   zone.js:1648
globalCallback  @   zone.js:1691
globalZoneAwareCallback @   zone.js:1712
Show 50 more frames

sendo assim eu não consigo exibir a menssagem do erro corretamento no front end. Alguem sabe o que pode ser ? estou empacado nesse projeto e não consigo avançar… me ajudem pfvr.
caso precise postar mais algum codigo eu mando aqui.

#2

Posta ai como vc está fazendo a requisição no angular.

#3

Conexção com a url

export const environment = {
  production: false,
  baseUrl: 'https://backend-livraria.herokuapp.com/'
};

Criação das classes.

const routes: Routes = [
{
  path:  '',
  component: HomeComponent
},
{
  path: 'categorias',
  component: CategoriaReadComponent
},
{
 path: 'categorias/create',
 component: CategoriaCreateComponent
}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

puxando do back-end.

export class CategoriaService {

  baseUrl: String = environment.baseUrl;
  constructor(private http: HttpClient, private _snack: MatSnackBar) { }

  findAll ():Observable <Categoria []> {
    const url = `${this.baseUrl}categorias`
    return this.http.get<Categoria []>(url)
  }

  create (categoria: Categoria): Observable<Categoria>{
  const url = `${this.baseUrl}categorias`
  return this.http.post<Categoria>(url,categoria);
  }

  mensagem(str: String): void {
    this._snack.open(`${str}`,'ok',{
      horizontalPosition: 'end',
      verticalPosition: 'top',
      duration: 3000
    })

  }
}

Link do projeto no github

#4

Será que esse for está correto?

categoria-create.component.ts

for (let i =0; i < err.error.erros.length; i++) {
  this.service.mensagem(err.error[i].message)
}

Se a resposta possui um array de erros (errors), essa parte parece que não está correta:

err.error[i].message

Dê uma verificada nisso para ver se o problema é nessa parte mesmo.

#5

então cara, era pra puxar a lista de erros, mas no console do navegador nao mostra.
mas no postman ele mostra.
eu n entendo pq nao mostra.
creio q o backend está certo pois ele faz td certinho.

se souber uma forma de tratar esse erro no front, tbm aceito kkk.

#6

Vc chegou a analisar o for que postei? O erro parece que está nele.

Inclusive, no erro, é apontado para o arquivo onde este for está implementado:

at Object.error (categoria-create.component.ts:29:42)
#7

vou verificar e volto aqui,…