useForm error handling

Hello, I'm a backender and playing with Refine so I'm new to React. I have an "create new item" page and copied to code from the inferencer. When the request to server failed I see a red notification with an HTTP 500 error. The response from the server contains information what was wrong. How can I present this to the user? I tried to add a errorNotification to useForm, but that doesn't seem to work. Any help or pointer is welcome.
3 Replies
rare-sapphire
rare-sapphire12mo ago
Hey @MajorD, passing errorNotification to the form is one way to achieve that. errorNotification expects you to pass an object or a function that returns an object with interface OpenNotificationParams If you pass a function you will also receive the error returned from the data provider as the first argument. You can also configure your data provider to match HttpError interface when throwing errors, then Refine will use the error.message and error.statusCode to display the notification. Interface references: OpenNotificationParams https://refine.dev/docs/core/interface-references/#opennotificationparams HttpError https://refine.dev/docs/core/interface-references/#httperror If you have any other questions, can you please use the #ask-any-question channel? Thank you.
deep-jade
deep-jade12mo ago
hi @aliemir thnx for responding. Matching the HttpError did the trick for me. Apparently I'm using axios (not sure why yet, bear with me) and I could add an interceptor so that other screens on that same REST API all show the message from the HTTP response.
axiosInstance.interceptors.response.use(
(response) => {
return response;
},
(error) => {
const refineError: HttpError = {
...error,
message: error.response?.data?.message ?? error.response?.data,
statusCode: error.response?.status,
};
return Promise.reject(refineError);
}
);
axiosInstance.interceptors.response.use(
(response) => {
return response;
},
(error) => {
const refineError: HttpError = {
...error,
message: error.response?.data?.message ?? error.response?.data,
statusCode: error.response?.status,
};
return Promise.reject(refineError);
}
);
Next step would be to let the server give a response that matches the ValidationErrors type and preferable also show the errors on the form itself instead of only in a popup which disappears after a few secs
rare-sapphire
rare-sapphire12mo ago
Refine will also propagate the errors to the forms if you provide the proper interface check out the forms guide here https://refine.dev/docs/guides-concepts/forms/#server-side-validation-
Forms | refine
In almost every user facing application, forms are a necessity. They are the primary way for users to interact with your application and provide data to your backend. They are also one of the most complex parts of an application to build and maintain with many cases and features to consider. Refine's form integration aims to make this process as...

Did you find this page helpful?