flat-fuchsia•8mo ago

Setting custom error notification for data provider

Does anyone know how to set a custom notification message and description when the data provider throws an error? The docs say that If you have notificationProvider, Refine will automatically show a notification when an error occurs . You can kinda customize that message with the HTTPError, but only the description and the status code. The message still looks something likes this: Error: (Status Code XXX) Custom message I want to fully customize the title and description. To look something like this: Custom error title Custom error message Thanks!

Data Fetching | refine

Data is essential for any UI Application and these applications are a bridge between users and the underlying data source(s), making it possible for users to interact with data in a meaningful way.

Interface References | refine

CrudFilters

6 Replies

kapa.ai•8mo ago

Hi @beepbopbeepboop. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the error notification message and description when the data provider throws an error in Refine. This can be done using the errorNotification prop in various hooks provided by Refine. The errorNotification prop allows you to customize the error notification that shows up when the data fetching fails. This prop requires the NotificationProvider (https://refine.dev/docs/core/providers/notification-provider/) to work. Here is an example of how you can use it with the useCustom hook:

useCustom({  
 errorNotification: (data, values) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

useCustom({  
 errorNotification: (data, values) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

You can replace the message and description with your custom error title and message respectively. This prop is also available in other hooks like useCustomMutation, useUpdate, useCreateMany, useCreate, useUpdateMany, useDeleteMany, and useDelete. You can use it in a similar way in these hooks as well. Here are the links to the documentation for more details: - useCustom (https://refine.dev/docs/core/hooks/data/use-custom#errornotification) - useCustomMutation (https://refine.dev/docs/core/hooks/data/use-custom-mutation#errornotification) - useUpdate (https://refine.dev/docs/core/hooks/data/use-update#errornotification) - useCreateMany (https://refine.dev/docs/core/hooks/data/use-create-many#errornotification) - useCreate (https://refine.dev/docs/core/hooks/data/use-create#errornotification) - useUpdateMany (https://refine.dev/docs/core/hooks/data/use-update-many#errornotification) - useDeleteMany (https://refine.dev/docs/core/hooks/data/use-delete-many#errornotification) - useDelete (https://refine.dev/docs/core/hooks/data/use-delete#errornotification) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

flat-fuchsia•8mo ago

@kapa.ai Looks like one way to get around this is by implementing the the errorNotification on the refineCoreProps of whatever hook you're using. It would be nice if there was some way to do this through the data provider though. So that I don't have reimplement errorNotification on each new page.

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Currently, Refine does not provide a direct way to set a global errorNotification through the data provider. The errorNotification prop needs to be set individually for each hook. However, you could potentially create a custom hook that wraps the Refine hooks you're using and includes your custom errorNotification. This way, you can reuse this custom hook across your application without having to redefine errorNotification each time. Here's a basic example of what this could look like:

import { useCustom } from "@pankod/refine";

const useCustomWithNotification = (props) => {
    const newProps = {
        ...props,
        errorNotification: (data, values) => {
            return {
                message: `Something went wrong when getting ${data.id}`,
                description: "Error",
                type: "error",
            };
        },
    };

    return useCustom(newProps);
};

import { useCustom } from "@pankod/refine";

const useCustomWithNotification = (props) => {
    const newProps = {
        ...props,
        errorNotification: (data, values) => {
            return {
                message: `Something went wrong when getting ${data.id}`,
                description: "Error",
                type: "error",
            };
        },
    };

    return useCustom(newProps);
};

Then, you can use useCustomWithNotification in place of useCustom throughout your application. Please note that this is just a workaround and might not be the best solution for all use cases. It's always a good idea to check the official Refine documentation (https://refine.dev/docs) for the most up-to-date and recommended practices. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

stormy-gold•8mo ago

Hello @beepbopbeepboop You can customize notification message for all data hooks like this: https://refine.dev/docs/core/hooks/data/use-update/#errornotification Also if you have i18n provider, you can customize from translation files. Refine uses following translations keys for notification title

  "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}}"
  },

for example you can do something like that:

 "editError": "{{resource}} is failed while editing",

 "editError": "{{resource}} is failed while editing",