Custom error message
I want to handle error message whenever i call getList from my dataProvider
9 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:
----------------------
To handle error messages when calling
getList
from your data provider in refine, you need to implement error handling in your data provider. This can be done by extending refine from HttpError
to handle the error when the API returns it.
Here is a basic example of how to implement error handling in your data provider:
In the above code, if the response from the API is not okay, an HttpError
is created with the status text and status code from the response, and this error is then rejected. If an error occurs during the fetch operation, another HttpError
is created and rejected.
You can also use the Axios interceptor to transform the error from the response before Axios returns the response to your code:
In this code, an Axios instance is created and an interceptor is added to the response. If an error occurs, a custom HttpError
is created with the message and status code from the error response, and this error is then rejected.
For more information, you can refer to the refine documentation (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider) on creating a data provider from scratch.
----------------------
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
eager-peach•13mo ago
@kapa.ai it shows undefined in the error toast
Let me check the knowledge base for you. One moment! :books:
----------------------
If you're seeing
undefined
in the error toast, it's likely that the error message is not being properly passed to the notification provider.
In refine, you can customize the error message by resolving the Promise with an error
object that has name
and message
properties. Here's an example from the extracts:
In this example, if the register
method fails, it resolves the Promise with success: false
and an error
object. The error
object has a name
property and a message
property. The message
property is the error message that will be displayed in the toast notification.
If you're seeing undefined
in your toast notification, it's likely that the message
property is not being set correctly. Make sure that the message
property is being set to the error message you want to display.
You can also customize the error notification in the useForm
hook:
In this example, the errorNotification
prop is used to customize the error notification. The message
property is set to a custom error message.
For more information, refer to the useRegister
documentation (https://refine.dev/docs/api-reference/core/hooks/authentication/useRegister/) and the documentation for the useForm
hook (https://refine.dev/docs/packages/documentation/react-hook-form/useForm).
----------------------
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
eager-peach•13mo ago
@kapa
can you tell in the toast, how refine is picking message from error
@kapa.ai can you tell in the toast, how refine is picking message from error
Let me check the knowledge base for you. One moment! :books:
----------------------
Refine uses the
open
method of the notification provider to display a toast notification. This method takes an object as an argument, which includes several properties. The message
property of this object is the message that is displayed on the notification.
Here's the interface for the open
method:
In this interface, message
is a required property that holds the message to be displayed on the notification.
When an error occurs, for example, when a form submission fails or data fetching fails, refine will call the open
function from NotificationProvider
to show an error notification. You can customize the error notification using the errorNotification
prop in hooks like useForm
, useCustomMutation
, useSelect
, etc.
Here's an example from the useForm
hook:
In this example, the errorNotification
prop is a function that returns an object. The message
property of this object is set to a custom error message, which will be displayed on the notification.
For more information, refer to the documentation for the open
method (https://refine.dev/blog/react-toastify#notification-providers-in-refine) and the documentation for the useForm
hook (https://refine.dev/docs/packages/documentation/react-hook-form/useForm).
----------------------
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
like-gold•13mo ago
Hey @alfaz_muhammed,
You can use the successNotification and errorNotification props of the useList hook. Refer to useList doc here: https://refine.dev/docs/api-reference/core/hooks/data/useList/#successnotification
useList | refine
useList is an extended version of TanStack Query's useQuery that supports all of its features and also adds some more.