rising-crimson•7mo ago

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

conscious-sapphire•7mo 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.

yappiest-sapphire•7mo 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

conscious-sapphire•7mo 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...