absent-sapphire•2mo ago

Better Error notifications on Supabase Provider

How can I get a more user friendly message from supabase database provider for things like a unique constraint error message? For example I get this message now:

duplicate key value violates unique constraint

duplicate key value violates unique constraint

But would be nice to give something specific to the field or at least friendly to the user.

8 Replies

kapa.ai•2mo ago

Hi @Jonathan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To provide more user-friendly error messages when using the Supabase data provider in refine, you can customize the error format. This allows you to intercept and modify the error messages before they are displayed to the user. Here's how you can achieve this: 1. Customize the Error Format: You can customize the error format in the data provider to provide more user-friendly messages. The checkError method can be used to handle errors and display custom notifications. 2. Use Notification Provider: Utilize the notification provider to show custom error messages to the user. Here is an example of how you can customize the error format:

import { DataProvider } from "@pankod/refine-supabase";
import { notificationProvider } from "@pankod/refine-core";

const supabaseDataProvider = DataProvider(supabaseClient, {
    checkError: (error) => {
        let userFriendlyMessage = "An error occurred";

        if (error.message.includes("duplicate key value violates unique constraint")) {
            userFriendlyMessage = "This value already exists. Please use a different value.";
        }

        notificationProvider.open({
            type: "error",
            message: "Error",
            description: userFriendlyMessage,
        });

        return Promise.reject(error);
    },
});

import { DataProvider } from "@pankod/refine-supabase";
import { notificationProvider } from "@pankod/refine-core";

const supabaseDataProvider = DataProvider(supabaseClient, {
    checkError: (error) => {
        let userFriendlyMessage = "An error occurred";

        if (error.message.includes("duplicate key value violates unique constraint")) {
            userFriendlyMessage = "This value already exists. Please use a different value.";
        }

        notificationProvider.open({
            type: "error",
            message: "Error",
            description: userFriendlyMessage,
        });

        return Promise.reject(error);
    },
});

In this example, the checkError method intercepts the error and checks if it contains the message "duplicate key value violates unique constraint". If it does, it sets a more user-friendly message and uses the notification provider to display it. For more details, you can refer to the Error Format section of the Data Provider documentation (https://refine.dev/docs/api-reference/core/providers/data-provider/#error-format). By customizing the error format and using the notification provider, you can ensure that users receive more understandable and helpful error messages. If you need further assistance, feel free to check the built-in notification providers documentation (https://refine.dev/docs/api-reference/core/providers/notification-provider/#built-in-notification-providers) for more customization options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

absent-sapphire•7d ago

The supabase DataProvider seems to no longer support this @kapa.ai I managed to get this to work but is there a way to just have it show the error on the form, not the notification message

kapa.ai•7d ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To display the error directly on the form instead of showing a notification message, you can use the setErrors method to set the form errors based on the response from the server. This approach allows you to show the error messages inline with the form fields. Here's how you can achieve this: 1. Use setErrors Method: Define a method to set the form errors based on the server response. 2. Customize useForm Hook: Use the useForm hook and handle the errors by setting them on the form fields. Here is an example of how you can implement this:

import { useForm } from "@refinedev/core";
import { FormInstance } from "antd";

export const setErrors = (
  errorData: { [key: string]: string[] },
  form?: FormInstance,
) => {
  Object.entries(errorData).forEach(([field, errors]) => {
    form?.setFields([{ name: field, errors: errors ?? [] }]);
  });
};

const MyFormComponent = () => {
  const { form, mutationResult } = useForm({
    refineCoreProps: {
      action: "create",
      resource: "post",
    },
  });

  useEffect(() => {
    if (mutationResult.isError) {
      setErrors(mutationResult.error.response.data, form);
    }
  }, [mutationResult.isError]);

  return (
    // Your form JSX here
  );
};

import { useForm } from "@refinedev/core";
import { FormInstance } from "antd";

export const setErrors = (
  errorData: { [key: string]: string[] },
  form?: FormInstance,
) => {
  Object.entries(errorData).forEach(([field, errors]) => {
    form?.setFields([{ name: field, errors: errors ?? [] }]);
  });
};

const MyFormComponent = () => {
  const { form, mutationResult } = useForm({
    refineCoreProps: {
      action: "create",
      resource: "post",
    },
  });

  useEffect(() => {
    if (mutationResult.isError) {
      setErrors(mutationResult.error.response.data, form);
    }
  }, [mutationResult.isError]);

  return (
    // Your form JSX here
  );
};

In this example, the setErrors method is used to map the server response errors to the form fields. The useEffect hook listens for errors in the mutation result and sets the form errors accordingly. This way, the errors will be displayed directly on the form fields, providing a more user-friendly experience without showing a notification message. For more details, you can refer to the GitHub issue discussing error propagation to forms (https://github.com/refinedev/refine/issues/2131). If you need further assistance, feel free to check the useForm documentation (https://refine.dev/docs/data/hooks/use-form/#errornotification) for more customization options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

absent-sapphire•7d ago

@kapa.ai with the supabase provider, is there a to handle it better

kapa.ai•7d ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To handle errors better with the Supabase provider in refine, you can customize the error handling logic to display errors directly on the form fields. This approach ensures that users receive clear and specific error messages related to the form inputs. Here's how you can achieve this: 1. Customize the Error Handling: Modify the error handling logic in the Supabase data provider to set form errors. 2. Use useForm Hook: Utilize the useForm hook to manage form state and handle errors. Here is an example of how you can implement this:

import { useForm } from "@refinedev/core";
import { FormInstance } from "antd";
import { DataProvider } from "@refinedev/supabase";
import { supabaseClient } from "utility";

const supabaseDataProvider = DataProvider(supabaseClient, {
    checkError: (error) => {
        let userFriendlyMessage = "An error occurred";

        if (error.message.includes("duplicate key value violates unique constraint")) {
            userFriendlyMessage = "This value already exists. Please use a different value.";
        }

        return Promise.reject({
            ...error,
            userFriendlyMessage,
        });
    },
});

export const setErrors = (
  errorData: { [key: string]: string[] },
  form?: FormInstance,
) => {
  Object.entries(errorData).forEach(([field, errors]) => {
    form?.setFields([{ name: field, errors: errors ?? [] }]);
  });
};

const MyFormComponent = () => {
  const { form, mutationResult } = useForm({
    refineCoreProps: {
      action: "create",
      resource: "post",
      dataProvider: supabaseDataProvider,
    },
  });
useEffect(() => {
    if (mutationResult.isError) {
      const errorResponse = mutationResult.error.response.data;
      const errorData = {
        fieldName: [mutationResult.error.userFriendlyMessage],
      };
      setErrors(errorData, form);
    }
  }, [mutationResult.isError]);

  return (
    // Your form JSX here
  );
};

import { useForm } from "@refinedev/core";
import { FormInstance } from "antd";
import { DataProvider } from "@refinedev/supabase";
import { supabaseClient } from "utility";

const supabaseDataProvider = DataProvider(supabaseClient, {
    checkError: (error) => {
        let userFriendlyMessage = "An error occurred";

        if (error.message.includes("duplicate key value violates unique constraint")) {
            userFriendlyMessage = "This value already exists. Please use a different value.";
        }

        return Promise.reject({
            ...error,
            userFriendlyMessage,
        });
    },
});

export const setErrors = (
  errorData: { [key: string]: string[] },
  form?: FormInstance,
) => {
  Object.entries(errorData).forEach(([field, errors]) => {
    form?.setFields([{ name: field, errors: errors ?? [] }]);
  });
};

const MyFormComponent = () => {
  const { form, mutationResult } = useForm({
    refineCoreProps: {
      action: "create",
      resource: "post",
      dataProvider: supabaseDataProvider,
    },
  });
useEffect(() => {
    if (mutationResult.isError) {
      const errorResponse = mutationResult.error.response.data;
      const errorData = {
        fieldName: [mutationResult.error.userFriendlyMessage],
      };
      setErrors(errorData, form);
    }
  }, [mutationResult.isError]);

  return (
    // Your form JSX here
  );
};

In this example: - The checkError method in the Supabase data provider is customized to include a user-friendly error message. - The setErrors function maps the error messages to the form fields. - The useForm hook is used to manage the form state and handle errors by setting them on the form fields. This approach ensures that errors are displayed directly on the form fields, providing a more user-friendly experience. For more details, you can refer to the Supabase data provider documentation (https://refine.dev/docs/data/packages/supabase/) and the useForm documentation (https://refine.dev/docs/data/hooks/use-form/#errornotification). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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