How to change default error message in useForm

The default error message

Error when updating <resource-name> (status code: ${err.statusCode})" or "Error when creating <resource-name> (status code: ${err.statusCode})

is not terribly helpful to users. I'd like to change it to the message my API responds with. How can I do this on a global level (instead of repeating it each time I use useForm? https://refine.dev/docs/packages/react-hook-form/use-form/#errornotification

useForm | Refine

useForm is used to manage forms. It returns the necessary properties and methods to control the element. It has been developed by using useForm imported from the @refinedev/core package.

3 Replies

kapa.ai•4mo ago

Hi @boris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the default error message in useForm to the message your API responds with, you can customize the errorNotification property. However, to apply this change globally, you can leverage the i18n provider to customize the notification messages from translation files. Here is how you can do it: 1. Customize Notification Messages via i18n Provider: Refine uses specific translation keys for notification titles. You can customize these keys in your translation files to reflect the messages from your API. Example translation file (en.json):

   {
     "notifications": {
       "success": "Successful",
       "error": "Error (status code: {{statusCode}})",
       "undoable": "You have {{seconds}} seconds to undo",
       "createSuccess": "Successfully created {{resource}}",
       "createError": "There was an error creating {{resource}} (status code: {{statusCode}})",
       "deleteSuccess": "Successfully deleted {{resource}}",
       "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})",
       "editSuccess": "Successfully edited {{resource}}",
       "editError": "Error when editing {{resource}} (status code: {{statusCode}})",
       "importProgress": "Importing: {{processed}}/{{total}}"
     }
   }

   {
     "notifications": {
       "success": "Successful",
       "error": "Error (status code: {{statusCode}})",
       "undoable": "You have {{seconds}} seconds to undo",
       "createSuccess": "Successfully created {{resource}}",
       "createError": "There was an error creating {{resource}} (status code: {{statusCode}})",
       "deleteSuccess": "Successfully deleted {{resource}}",
       "deleteError": "Error when deleting {{resource}} (status code: {{statusCode}})",
       "editSuccess": "Successfully edited {{resource}}",
       "editError": "Error when editing {{resource}} (status code: {{statusCode}})",
       "importProgress": "Importing: {{processed}}/{{total}}"
     }
   }

You can modify the createError, deleteError, and editError keys to use the message from your API. For example:

   {
     "editError": "{{resource}} failed to update: {{errorMessage}}"
   }

   {
     "editError": "{{resource}} failed to update: {{errorMessage}}"
   }

2. Implementing Custom Error Notification in useForm: If you still need to customize the error notification within useForm, you can do so by setting the errorNotification property. Here is an example:

   useForm({  
     refineCoreProps: {  
       action: "create",  
       resource: "post",  
       errorNotification: (error, values, resource) => {  
         return {  
           message: `Failed to create ${values.title}`,  
           description: error.message,  
           type: "error",  
         };  
       },  
     },  
   });

   useForm({  
     refineCoreProps: {  
       action: "create",  
       resource: "post",  
       errorNotification: (error, values, resource) => {  
         return {  
           message: `Failed to create ${values.title}`,  
           description: error.message,  
           type: "error",  
         };  
       },  
     },  
   });

This approach allows you to customize the error message for each form, but for a global solution, modifying the i18n translation files is more efficient. For more detailed information, you can refer to the Refine documentation on errorNotification (https://refine.dev/docs/packages/react-hook-form/use-form/#errornotification). If you need further assistance, please check the guide on errorNotification (https://refine.dev/docs/data/hooks/use-form/#errornotification-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@499582506736287744> kapa.ai is still learning and improving, please let us know how it did by reacting below

multiple-amethyst•4mo ago

Customize Notification Messages via i18n Provider would work if I can customize the params passed to i18n. How can I do that? I ended up making a custom version of the useForm hook

import { BaseRecord, useForm, UseFormProps } from 'admin';

const isArrayOfStrings = (value: unknown): value is string[] => {
  return Array.isArray(value) && value.every((item) => typeof item === 'string');
};

const getNonFieldErrorMessage = (error: string | string[] | unknown) => {
  if (typeof error === 'string') {
    return error;
  }
  if (isArrayOfStrings(error)) {
    return error.join(' ');
  }
  return 'An error occurred';
};

export const useMyForm = <T extends BaseRecord>({ refineCoreProps, ...rest }: UseFormProps<T>) => {
  return useForm<T>({
    refineCoreProps: {
      ...refineCoreProps,
      errorNotification: (data) => {
        if (!data?.errors?.non_field_errors) {
          return false;
        }

        return {
          description: 'Error',
          message: getNonFieldErrorMessage(data.errors.non_field_errors),
          type: 'error',
        };
      },
    },
    ...rest,
  });
};

import { BaseRecord, useForm, UseFormProps } from 'admin';

const isArrayOfStrings = (value: unknown): value is string[] => {
  return Array.isArray(value) && value.every((item) => typeof item === 'string');
};

const getNonFieldErrorMessage = (error: string | string[] | unknown) => {
  if (typeof error === 'string') {
    return error;
  }
  if (isArrayOfStrings(error)) {
    return error.join(' ');
  }
  return 'An error occurred';
};

export const useMyForm = <T extends BaseRecord>({ refineCoreProps, ...rest }: UseFormProps<T>) => {
  return useForm<T>({
    refineCoreProps: {
      ...refineCoreProps,
      errorNotification: (data) => {
        if (!data?.errors?.non_field_errors) {
          return false;
        }

        return {
          description: 'Error',
          message: getNonFieldErrorMessage(data.errors.non_field_errors),
          type: 'error',
        };
      },
    },
    ...rest,
  });
};