Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

219
Views
How to display server side validation errors with onFailure() in Edit/Create components?

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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!