Angular catching “standard” errors instead of my API’s errors

I have a service that looks like this:

return this.http
      .post(requestUrl, body, { headers, observe: 'response' })
      .toPromise()
      .then((res: any) => {
        return res.body?.data || res?.body?.message;
      }).catch((err) => {
        console.log('error', err);
      })

When i trigger an error, this is what i get on the console.log:

error Error Code: 400
Message: Http failure response for <MY API ENDPOINT>: 400 OK

But on the network tab (Google chrome dev tools) i see this:

{
    "message": "Unsupported value, please contact support.",
    "status": "failure"
}

How can i read my message that i’m sending from my Backend in my angular .catch block?