conscious-sapphire•12mo ago

custom error message

In my app, Iam using a lot of forms. if there is an error message from an api call in the background, the toast shows the error message. instead I want to show my own custom error message. I see that every error message are passing through onError funciton of authprovider. but i can;t seem to give my own error message

17 Replies

kapa.ai•12mo ago

Hi @alfaz_muhammed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you're correct. In refine, the onError method of the authProvider is used to handle errors in a unified way. When an error is thrown by any data hook, the useOnError function is triggered with the error object. This error object is then passed to the onError method of the authProvider. To customize the error message, you can modify the onError method in your authProvider. Here's an example:

import type { AuthBindings } from "@refinedev/core";  
  
const authProvider: AuthBindings = {  
 // ---  
 onError: (error) => {  
 const status = error.status;  
 if (status === 418) {  
 return {  
 logout: true,  
 redirectTo: "/login",  
 error: new Error("Your custom error message here"),  
 };  
 }  
 return {};  
 },  
 // ---  
};

import type { AuthBindings } from "@refinedev/core";  
  
const authProvider: AuthBindings = {  
 // ---  
 onError: (error) => {  
 const status = error.status;  
 if (status === 418) {  
 return {  
 logout: true,  
 redirectTo: "/login",  
 error: new Error("Your custom error message here"),  
 };  
 }  
 return {};  
 },  
 // ---  
};

In this example, if the error status code is 418, the user will be logged out and redirected to the login page. The error message will be "Your custom error message here". You can adjust this logic to suit your needs. For example, you can check for different status codes and return different custom error messages. For more information, refer to the useOnError documentation (https://refine.dev/docs/api-reference/core/hooks/authentication/useOnError/) and the authProvider documentation (https://refine.dev/docs/api-reference/core/providers/auth-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

conscious-sapphire•12mo ago

@kapa.ai onError: async (error) => { const status = error.response.status; if (status === 403) { return { redirectTo: "", logout: false, error: new Error("Your custom error message here") }; } return {}; },

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, your code snippet is correct. In the onError method of the authProvider, you're checking if the status of the error response is 403. If it is, you're returning an object with a custom error message and setting logout to false and redirectTo to an empty string. This means the user will not be logged out and will not be redirected to any other page. Here's your code for reference:

onError: async (error) => {
    const status = error.response.status;
    if (status === 403) {
      return { redirectTo: "", logout: false, error: new Error("Your custom error message here") };
    }
    return {};
},

onError: async (error) => {
    const status = error.response.status;
    if (status === 403) {
      return { redirectTo: "", logout: false, error: new Error("Your custom error message here") };
    }
    return {};
},

Remember, the onError method is used to handle errors globally in your application. The error object passed to this method contains information about the error that occurred. You can use this information to decide how to handle the error. For more information, refer to the useOnError documentation (https://refine.dev/docs/api-reference/core/hooks/authentication/useOnError/) and the authProvider documentation (https://refine.dev/docs/api-reference/core/providers/auth-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

conscious-sapphire•12mo ago

@kapa.ai in my above code, even though the error is 403, Refine does not showing this message in the toast which appear at the top of he page instaed it shows "Request failed with status 403"

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing ("Request failed with status 403") is likely the default error message provided by refine when a request fails with a 403 status code. To customize the error message that appears in the toast notification, you can use the errorNotification prop provided by refine's hooks like useForm, useShow, useTable, etc. This prop allows you to customize the error notification that is shown when an operation fails. Here's an example of how you can use it with useForm:

useForm({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Your custom error message here`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

useForm({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Your custom error message here`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

In this example, whenever a form submission fails, the error message "Your custom error message here" will be shown in the toast notification. You can adjust this logic to suit your needs. For example, you can check for different status codes and return different custom error messages. For more information, refer to the useForm documentation (https://refine.dev/docs/api-reference/core/hooks/useForm), useShow documentation (https://refine.dev/docs/api-reference/core/hooks/show/useShow), and useTable documentation (https://refine.dev/docs/packages/documentation/react-table). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

conscious-sapphire•12mo ago

@kapa.ai but my case is not form submission. when I open a create page, if my form has some fields which calls some api if the response is error, then the custom error message need to show. not when submitting form

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In that case, you can use the errorNotification prop with the useCreate hook or any other data fetching hooks provided by refine. This prop allows you to customize the error notification that is shown when data fetching fails. Here's an example of how you can use it with useCreate:

const { mutate } = useCreate();  
  
mutate({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Your custom error message here`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

const { mutate } = useCreate();  
  
mutate({  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Your custom error message here`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

In this example, whenever data fetching fails during the creation of a new record, the error message "Your custom error message here" will be shown in the toast notification. You can adjust this logic to suit your needs. For example, you can check for different status codes and return different custom error messages. For more information, refer to the useCreate documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCreate). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

conscious-sapphire•12mo ago

@kapa.ai I can't hardcode this in my every form as iam using a lot of forms. it is repeating the code so badly. please finnd me a way to change default message for 403 in onError funciton

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I understand your concern about code repetition. Unfortunately, based on the provided extracts, refine does not provide a direct way to customize the default error message globally for a specific status code like 403 in the onError function. However, you can create a custom hook that wraps the useCreate, useUpdate, useDelete, etc. hooks and includes your custom error handling logic. This way, you can reuse this custom hook across your application, avoiding code repetition. Here's an example of how you can create a custom hook:

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

export const useCustomCreate = () => {
    const { mutate } = useCreate();

    const customMutate = async (values) => {
        try {
            await mutate(values);
        } catch (error) {
            if (error.response.status === 403) {
                // Display your custom error message here
            } else {
                // Handle other errors here
            }
        }
    };

    return { mutate: customMutate };
};

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

export const useCustomCreate = () => {
    const { mutate } = useCreate();

    const customMutate = async (values) => {
        try {
            await mutate(values);
        } catch (error) {
            if (error.response.status === 403) {
                // Display your custom error message here
            } else {
                // Handle other errors here
            }
        }
    };

    return { mutate: customMutate };
};

In this example, the useCustomCreate hook wraps the useCreate hook and includes custom error handling logic. You can use this custom hook in place of the useCreate hook in your components. Please note that this is a workaround and might not cover all use cases. For more information, refer to the useCreate documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCreate) and the authProvider documentation (https://refine.dev/docs/api-reference/core/providers/auth-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

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

conscious-sapphire•12mo ago

@kapa.ai I want to handle error message whwnever i call getList from my dataProvider

kapa.ai•12mo ago

Let me check the knowledge base for you. One moment! :books: @alfaz_muhammed That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

rare-sapphire•12mo ago

Hey @alfaz_muhammed, You need to disable notification on the hooks passing the errorNotification: false, After, you can handle the errors on the authProvider's onError function. I mean, you can call any toast library in there with your backend message.