How to get exception message in Axios from a Spring boot backend

I use a spring boot back with react front. Api calls are with axios. Now in Spring Controller I handle exceptions and throw another one for React to extract a message from (I really need this message). But all i get is "Request failed with status code 500". How can I get this message?
My controller:

@DeleteMapping("/{id}")
public ResponseEntity<?> delete(@PathVariable("id") Integer id) throws RuntimeException {
log.info("Request for delete settings {}", id);
try{
Settings settings = settingsService.findById(id);
settingsService.delete(settings.getId());
log.info("SUCCESS: {} deleted.", settings.getId());
return new ResponseEntity<>(settings.getId() + " deleted successfully.", HttpStatus.NO_CONTENT);
} catch (RuntimeException e) {
System.out.println("CAUSE Controller: "+e.getCause().getMessage());
throw new RuntimeException("Error during deletion: " + e.getCause().getMessage());
}
}

SettingsApiService.js:

delete(id) {
return axios.delete(`${BASE_URL}/${id}`, ApiService.getAuthHeader());
}

Now I have a "Table" component which i reuse a lot. And send the deletion method as a prop from every respecting component.
This one is from the Settings component

 <Table
ref='table'
getTr={this.getTr()}
getUrl={this.getUrl(idType)}
columns={this.getColumns()}
updateSelectedItem={this.updateSelectedItem}
deleteItem={this.deleteItem}
isSettings={true}
showDelete={showDelete}
toggleShowDelete={this.toggleShowDelete}
/>

And the Deleteitem method in Settings I send is:

deleteItem = async () => {
await SettingsApiService.delete(this.state.selectedId);
};

And in Table component I delete with a button like this:

<Button
variant='primary'
onClick={() => {
globalProps
.deleteItem()
.then((res) => {
console.log(res);
table.draw();
})
.catch((e) => {
console.log(e);
this.setState({ error: e.message });
this.setState({ showModalBatch: true });
});
this.props.toggleShowDelete();
}}
>
Delete
</Button>

I want the e.message to be the one I threw in Controller. How do I do this?

• On Axios you can access the body of the error response in "error.response.data".
• On your spring boot I recommend to use @ControllerAdvice to customize your response according to your needs.

An example:

@ExceptionHandler(MyCustomException.class)
@ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
@ResponseBody
public MyCustomResponse myCustomException(MyCustomException e) {
return new MyCustomResponse(e.getStatusCode(), e.getStatusMessage());
}

• So following the example, in your code you will throw a MyCustomException, then you will intercept it in your @ControllerAdvice component and you will return in a JSON format a MyCustomResponse.

Your custom response body will look something like this:

{ statusCode: 1002, statusMessage: "My custom error message" }

So now that you are returning this body on the response you can access it on your axios on "error.response.data.statusMessage".

Please check that on the example the http status code (@ResponseStatus) is set to 500, but you can customize it to your requirement.