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
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:
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:
----------------------<@266652998246072323> kapa.ai is still learning and improving, please let us know how it did by reacting below
unwilling-turquoise•9mo 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.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:
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:
----------------------<@266652998246072323> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire•9mo 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
for example you can do something like that: