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
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:
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:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•13mo 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 {};
},
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:
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:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•13mo 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"
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
:
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:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•13mo 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
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
:
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:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•13mo 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
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:
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:
----------------------<@763439201353596968> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black•13mo ago
@kapa.ai I want to handle error message whwnever i call getList from my dataProvider