Get custom Error message from backend API and access on frontend - flask

Question

I am working on an Angular 9 project with a Flask backend server. In some of my API's there are multiple checks and areas where it can fail and I want to return custom messages to the frontend but I can't seem to access the error message.
As an example, if this was a basic route:
#app.route('/api/test/<int:test_id>/', method=['PUT', 'OPTIONS])
def test_route(test_id):
if test_id < 0:
abort(400, f'Custom Error Message')
else:
#Query data base, update something, return updated entry...
And this was my service function on the frontend (API_URL refers to the root url for the backend):
callTestRoute(id: number): Observable<any> {
const url = `${API_URL}/test/id/`;
return this.http.put(url, httpOptions);
}
And in my component where I call the service function:
updateEntry(id:number) {
this.db_api.callTestRoute(id).subscribe( success => {
console.log(success);
}, (error: HttpErrorResponse) => {
console.log("API ERROR RESP: ", error);
}
}
In the console, my logged message above outputs
"API ERROR RESP: Error Code: 400
Message: Https failure response for http://slate:3660/test/66/: 400 BAD REQUEST"
however, the network request response shows my custom error message. I cannot access this message within my angular component.
I have tried using jsonify() to return the error in my API like:
return jsonify({'errMsg': "Custom error message"}), 400
but I can still not access the error message, when I try to access error.error or any fields, they all show undefined. How do I return a custom message for failed API requests and how do I access those messages on the frontend?