inland-turquoise•10mo ago

custom message

"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}}" }, i want to showing response.errors instead of statusCode

5 Replies

kapa.ai•10mo ago

Hi @tuanna_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can customize the error notification message by using the errorNotification prop in various hooks such as useForm, useShow, useSelect, and useUpdateMany. This prop allows you to return a custom message, description, and type for the error notification. Here's an example of how you can show response.errors instead of statusCode:

useForm({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Error: ${data.errors}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

useForm({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Error: ${data.errors}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

In this example, data.errors will be displayed in the error notification message. Please replace useForm with the appropriate hook you are using. Remember, for this prop to work, NotificationProvider is required. Sources: - useForm (https://refine.dev/docs/api-reference/core/hooks/useForm/) - useShow (https://refine.dev/docs/api-reference/core/hooks/show/useShow/) - useSelect (https://refine.dev/docs/api-reference/core/hooks/useSelect/) - useUpdateMany (https://refine.dev/docs/api-reference/core/hooks/data/useUpdateMany/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

inland-turquoise•10mo ago

axiosInstance.interceptors.response.use( (response) => { return response; }, (error) => { const customError: HttpError = { ...error, message: error.response?.data?.message, statusCode: error.response?.data.status, }; return Promise.reject(customError); } ); @kapa.ai explain custom message

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the provided code snippet, an Axios interceptor is being used to handle HTTP responses. Interceptors allow you to alter the request or response globally before they are handled by then or catch. Here's a breakdown of the code:

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const customError: HttpError = {
      ...error,
      message: error.response?.data?.message,
      statusCode: error.response?.data.status,
    };

    return Promise.reject(customError);
  }
);

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const customError: HttpError = {
      ...error,
      message: error.response?.data?.message,
      statusCode: error.response?.data.status,
    };

    return Promise.reject(customError);
  }
);

The axiosInstance.interceptors.response.use function takes two arguments: a function to handle a successful response and a function to handle an error response. In the case of a successful response, the response is simply returned as is. In the case of an error response, a custom error object is created and returned as a rejected Promise. This custom error object is of type HttpError and includes all properties of the original error (...error), but with the message and statusCode properties replaced by the corresponding properties from error.response.data. The message property is set to error.response?.data?.message, which means it will contain the error message returned by the server. The statusCode property is set to error.response?.data.status, which will contain the HTTP status code of the error response. This way, when an error occurs during an HTTP request, the error message and status code from the server response are included in the error object that is returned to the calling code. Source: Create a data provider from scratch - Error Handling (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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