harsh-harlequin•4mo ago

CreateButton catching error

My createButton automatically generated for my list works for creating new entries but does not detect errors when server requests fails. it opens a form to add input, then when we confirm the form the data is sent to the server, and wether it fails or succeed the success pop up is shown. how can i adjust this behaviour?

3 Replies

kapa.ai•4mo ago

Hi @ian3131. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you're experiencing an issue with error handling in your refine application's form submission process. When the server request fails, you're still seeing a success notification instead of an error message. This is likely related to how error handling is implemented in your form submission flow. In refine, server-side errors should be properly propagated to the form and UI components. How to Fix Error Handling in Forms Refine provides built-in support for handling server-side validation errors through the HttpError interface. When your data provider returns a rejected promise with an errors field, refine's form hooks will automatically update the error state. 1. Make sure your data provider properly rejects promises with error information Your data provider should return a rejected promise with the proper error structure when the server request fails:

// Example of how a data provider should handle errors
return Promise.reject({
    message: "This is an error from the server",
    statusCode: 400,
    errors: {
        fieldName: "Error message for this field",
        // other field errors
    },
} as HttpError);

// Example of how a data provider should handle errors
return Promise.reject({
    message: "This is an error from the server",
    statusCode: 400,
    errors: {
        fieldName: "Error message for this field",
        // other field errors
    },
} as HttpError);

2. Ensure your form is set up to handle errors The useForm hook in refine automatically handles server-side validation errors when they're properly formatted:

const { formProps, saveButtonProps, mutation: { error } } = useForm();

// You can access the errors from the error object
const { errors } = error ?? {};

const { formProps, saveButtonProps, mutation: { error } } = useForm();

// You can access the errors from the error object
const { errors } = error ?? {};

3. Check your authProvider implementation Make sure your authProvider.onError method is properly implemented to handle errors from the data provider:

const authProvider: AuthProvider = {
    onError: async (error: HttpError) => {
        if (error.statusCode === 401) {
            // Handle unauthorized errors
        }
        return {};
    },
    // other authProvider methods
};

const authProvider: AuthProvider = {
    onError: async (error: HttpError) => {
        if (error.statusCode === 401) {
            // Handle unauthorized errors
        }
        return {};
    },
    // other authProvider methods
};

4. Catch promise rejections If you're using the form submission directly, make sure to catch promise rejections:

onFinish(variables).catch(() => {})

onFinish(variables).catch(() => {})

Examples for Different UI Libraries Refine provides examples of server-side form validation for various UI libraries: - Ant Design server-side validation example - Material UI server-side validation example - Mantine server-side validation example - Chakra UI server-side validation example For more detailed information on handling server-side validation errors, check out the server-side validation documentation. If you're still experiencing issues, you might need to check if there's a specific issue with your UI framework's integration or if there's a custom implementation in your code that's overriding the default error handling behavior. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1071817719462252564> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

harsh-harlequinOP•4mo ago

so response.status === 500 will not trigger an error rendering ?

CreateButton catching error

Did you find this page helpful?