I'd like to display server errors in notifications. By default, the notification says "Bad request" when a 400 is returned.
I've tried to change the behaviour with the onFailure (https://marmelab.com/react-admin/CreateEdit.html#onfailure), but the argument error always seems to be a generic HttpError(). The message is lost somewhere, somehow.
export const MyEdit = (props) => {
const refresh = useRefresh();
const onFailure = (error) => {
console.log('ERROR stack trace', error); // show 'Error'
console.log('ERROR stack trace', error.stack); // show 'Error'
refresh();
};
return (
<Edit
onFailure={onFailure}
{...props}
>
<SimpleForm>
<TextInput
source="full_name"
fullWidth
/>
<TextInput
source="email"
fullWidth
/>
</SimpleForm>
</Edit>
);
};
The response on the server side is usually something like that
{
field: [
error_message_1,
error_message_2,
...,
error_message_n
]
}
With the Chrome debugger, it seems that my problem should come this class:
var HttpError = /** @class */ (function (_super) {
__extends(HttpError, _super);
function HttpError(message, status, body) {
if (body === void 0) { body = null; }
var _this = _super.call(this, message) || this;
_this.message = message;
_this.status = status;
_this.body = body;
Object.setPrototypeOf(_this, HttpError.prototype);
_this.name = _this.constructor.name;
if (typeof Error.captureStackTrace === 'function') {
// Enter here
Error.captureStackTrace(_this, _this.constructor);
}
else {
_this.stack = new Error(message).stack;
}
// Returns an empty Error();
_this.stack = new Error().stack;
return _this;
}
return HttpError;
}(Error));
It returns an empty Error() and the stack does not contain values of previous message, body or status.
So how can I display the server message? Any help would be appreciated.
Just in case: Chrome 95: React-Admin: 3.19
Found the answer.
I tried error, error.message and error.stack but I did not try error.body. It became obvious after re-reading my question.
error.body does return the back-end JSON response.