Custom error message

I want to handle error message whenever i call getList from my dataProvider

9 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: ---------------------- 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:

import { DataProvider, HttpError } from "@refinedev/core";  
  
export const dataProvider = (apiUrl: string): DataProvider => ({  
 getOne: async ({ resource, id }) => {  
 try {  
 const response = await fetch(  
 `<https://api.example.com/${resource}/${id}`,>  
 );  
  
 if (!response.ok) {  
 const error: HttpError = {  
 message: response.statusText,  
 statusCode: response.status,  
 };  
 return Promise.reject(error);  
 }  
  
 return {  
 data: response.data,  
 };  
 } catch (error) {  
 const error: HttpError = {  
 message: error?.message || "Something went wrong",  
 statusCode: error?.status || 500,  
 };  
 return Promise.reject(error);  
 }  
 },  
 // ...  
});

import { DataProvider, HttpError } from "@refinedev/core";  
  
export const dataProvider = (apiUrl: string): DataProvider => ({  
 getOne: async ({ resource, id }) => {  
 try {  
 const response = await fetch(  
 `<https://api.example.com/${resource}/${id}`,>  
 );  
  
 if (!response.ok) {  
 const error: HttpError = {  
 message: response.statusText,  
 statusCode: response.status,  
 };  
 return Promise.reject(error);  
 }  
  
 return {  
 data: response.data,  
 };  
 } catch (error) {  
 const error: HttpError = {  
 message: error?.message || "Something went wrong",  
 statusCode: error?.status || 500,  
 };  
 return Promise.reject(error);  
 }  
 },  
 // ...  
});

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:

import axios from "axios";  
import { DataProvider, HttpError } from "@refinedev/core";  
import { stringify } from "query-string";  
  
// Error handling with axios interceptors  
const axiosInstance = axios.create();  
  
axiosInstance.interceptors.response.use(  
 (response) => {  
 return response;  
 },  
 (error) => {  
 const customError: HttpError = {  
 ...error,  
 message: error.response?.data?.message,  
 statusCode: error.response?.status,  
 };  
  
 return Promise.reject(customError);  
 },  
);  
  
export const dataProvider = (apiUrl: string): DataProvider => ({  
 // Methods  
});

import axios from "axios";  
import { DataProvider, HttpError } from "@refinedev/core";  
import { stringify } from "query-string";  
  
// Error handling with axios interceptors  
const axiosInstance = axios.create();  
  
axiosInstance.interceptors.response.use(  
 (response) => {  
 return response;  
 },  
 (error) => {  
 const customError: HttpError = {  
 ...error,  
 message: error.response?.data?.message,  
 statusCode: error.response?.status,  
 };  
  
 return Promise.reject(customError);  
 },  
);  
  
export const dataProvider = (apiUrl: string): DataProvider => ({  
 // Methods  
});

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: ----------------------

kapa.ai•12mo ago

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

fair-rose•12mo ago

@kapa.ai it shows undefined in the error toast

kapa.ai•12mo ago

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:

const authProvider: AuthBindings = {  
 // ---  
 register: async () => {  
 // ---  
 return {  
 success: false,  
 error: {  
 name: "Error",  
 message: "Something went wrong!",  
 },  
 };  
 },  
};

const authProvider: AuthBindings = {  
 // ---  
 register: async () => {  
 // ---  
 return {  
 success: false,  
 error: {  
 name: "Error",  
 message: "Something went wrong!",  
 },  
 };  
 },  
};

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:

useForm({  
 refineCoreProps: {  
 action: "create",  
 resource: "post",  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when deleting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
 },  
});

useForm({  
 refineCoreProps: {  
 action: "create",  
 resource: "post",  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when deleting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
 },  
});

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: ----------------------

kapa.ai•12mo ago

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

fair-rose•12mo 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

kapa.ai•12mo ago

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:

interface OpenNotificationParams {  
 key?: string;  
 message: string;  
 type: "success" | "error" | "progress";  
 description?: string;  
 cancelMutation?: () => void;  
 undoableTimeout?: number;  
}

interface OpenNotificationParams {  
 key?: string;  
 message: string;  
 type: "success" | "error" | "progress";  
 description?: string;  
 cancelMutation?: () => void;  
 undoableTimeout?: number;  
}

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:

useForm({  
 refineCoreProps: {  
 action: "create",  
 resource: "post",  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when deleting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
 },  
});

useForm({  
 refineCoreProps: {  
 action: "create",  
 resource: "post",  
 errorNotification: (data, values, resource) => {  
 return {  
 message: `Something went wrong when deleting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
 },  
});

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: ----------------------

kapa.ai•12mo ago

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

automatic-azure•12mo 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.