foreign-sapphire•16mo ago

Where is the best place to add an error handler for the automatic notifications of success/error?

Hi guys, I have built a lot of things now and its time to add logic to the error notifications that are sent out automatically by refine. I can't seem to find anything in the docs regarding the best place to add some logic so that the error messages are able to extract the correct data from the backend error messages. We are using a custom data provider, that connects to a laravel lighthouse graphql backend and the structure of the error messages is quite different from any other headless cms backend. I am not sure if I should tweak the data provider to return friendly error messages with a specific structure or a custom notification provider to tweak the error messages? Could you guys please share any info on this topic? Thanks!

13 Replies

kapa.ai•16mo ago

Hi @rafaelsorto. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•16mo ago

---------------------- Hi! Based on the information extracts provided, you can customize error notifications by using the errorNotification prop in various hooks like useCustom, useCustomMutation, useUpdateMany, useUpdate, useDeleteMany, useCreateMany, useCreate, and useDelete. This prop allows you to modify the error notification message based on the data returned from your backend. To achieve this, you can pass a function to the errorNotification prop that takes the data and values as arguments and returns an object with the customized message, description, and type. Here's an example from the useCustom hook:

useCustom({  
 errorNotification: (data, values) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

useCustom({  
 errorNotification: (data, values) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

You can apply similar logic to other hooks as well. Make sure to have the NotificationProvider (https://refine.dev/docs/api-reference/core/providers/notification-provider/) in your application for the errorNotification prop to work. You can either modify the data provider to return friendly error messages or use a custom notification provider to tweak the error messages based on your requirements. The key is to utilize the errorNotification prop in the hooks to customize the error notifications according to your Laravel Lighthouse GraphQL backend's error structure. For more information, you can refer to the following documentation pages:

Notification Provider | refine

refine let's you set a notification API by providing the notificationProvider property to the `` component.

kapa.ai•16mo ago

useCustom | refine

useCustom is an extended version of TanStack Query's useQuery. It supports all the features of useQuery and adds some extra features.

useCustomMutation | refine

useCustomMutation is an extended version of TanStack Query's useMutation. It supports all the features of useMutation and adds some extra features.

useUpdateMany | refine

useUpdateMany is an extended version of TanStack Query's useMutation. It supports all the features of useMutation and adds some extra features.

useUpdate | refine

useUpdate is an extended version of TanStack Query's useMutation. It supports all the features of useMutation and adds some extra features.

useDeleteMany | refine

useDeleteMany is an extended version of TanStack Query's useMutation. It supports all the features of useMutation and adds some extra features.

kapa.ai•16mo ago

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

foreign-sapphire•16mo ago

@kapa.ai do you have any examples custom data provider error messages handling to work by default with the mantine notifications provider

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•16mo ago

---------------------- I'm sorry, but the information extracts provided do not contain any specific examples of custom data provider error messages handling with the Mantine notifications provider. However, I can guide you on how to approach this based on the available information. You can create a custom data provider that handles error messages from your backend and then use the errorNotification prop in hooks like useCustom, useCustomMutation, and others to customize the error notifications for Mantine. Here's a general outline of the steps you can follow: 1. Create a custom data provider that handles error messages from your backend. You can refer to the custom data provider documentation (https://refine.dev/docs/api-reference/providers/data-provider#custom-data-provider) for more information on creating a custom data provider. 2. In your custom data provider, handle the error messages from your backend and return them in a specific format that can be used by the hooks. 3. Use the errorNotification prop in the hooks to customize the error notifications based on the error messages returned by your custom data provider. For example:

useCustom({  
 errorNotification: (data, values) => {  
 return {  
 message: `Custom error message: ${data.errorMessage}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

useCustom({  
 errorNotification: (data, values) => {  
 return {  
 message: `Custom error message: ${data.errorMessage}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

4. Make sure to have the NotificationProvider (https://refine.dev/docs/api-reference/core/providers/notification-provider/) in your application for the errorNotification prop to work.

Notification Provider | refine

refine let's you set a notification API by providing the notificationProvider property to the `` component.

kapa.ai•16mo ago

Please note that this is a general outline, and you'll need to adapt it to your specific use case and the Mantine notifications provider. Unfortunately, I cannot provide a more specific example based on the information extracts available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•16mo ago

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

foreign-sapphire•16mo ago

Thank you @kapa.ai you guidance has been very helpful and you are learning very well 😄 this is the link to the solution https://refine.dev/docs/api-reference/core/providers/data-provider/#error-format

Data Provider | refine

The data provider acts as a data layer for your app that makes the HTTP requests and encapsulates how the data is retrieved. refine consumes these methods via data hooks.

kapa.ai•16mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad you found the guidance helpful! Based on the link you provided, here's an example of how to implement error handling in your custom 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);
    }
  },
  // ...
});

Additionally, you can use Axios interceptors 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
});

You can use this error handling approach in your custom data provider to handle error messages from your backend and return them in a specific format that can be used by the hooks.

kapa.ai•16mo ago

For more information, refer to the Error Format section in the Data Provider documentation (https://refine.dev/docs/api-reference/core/providers/data-provider/#error-format). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Data Provider | refine

The data provider acts as a data layer for your app that makes the HTTP requests and encapsulates how the data is retrieved. refine consumes these methods via data hooks.

kapa.ai•16mo ago

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