harsh-harlequin•8mo ago

Show API error code

If my API returns a 400 or 500 error, I want the fly-in error popup in Refine to show the error code, ideally along with the message. Currently it just says error code undefined

5 Replies

kapa.ai•8mo ago

Hi @chris. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure that your fly-in error popup in Refine shows the error code along with the message when your API returns a 400 or 500 error, you need to properly format the error object in your data provider and customize the error notification. Step 1: Format the Error Object in Data Provider Ensure that your data provider returns an error object that extends from HttpError. This will allow Refine to correctly interpret the error and display the appropriate message and status code. Here's an 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);
    }
  },
  // ...
});

Step 2: Customize the Error Notification You can customize the error notification by using the errorNotification prop in your form or data fetching hooks. This prop allows you to define how the error notification should be displayed. Here's an example of how to customize the error notification in a form:

useForm({
  refineCoreProps: {
    action: "create",
    resource: "post",
    errorNotification: (data, values, resource) => {
      return {
        message: `Error (status code: ${data.statusCode}): ${data.message}`,
        description: "Error",
        type: "error",
      };
    },
  },
});

useForm({
  refineCoreProps: {
    action: "create",
    resource: "post",
    errorNotification: (data, values, resource) => {
      return {
        message: `Error (status code: ${data.statusCode}): ${data.message}`,
        description: "Error",
        type: "error",
      };
    },
  },
});

Default Error Notification Values By default, Refine uses the following format for error notifications:

{
  "message": "Error when updating <resource-name> (status code: ${err.statusCode})" or "Error when creating <resource-name> (status code: ${err.statusCode})",
  "description": "Error",
  "type": "error",
}

{
  "message": "Error when updating <resource-name> (status code: ${err.statusCode})" or "Error when creating <resource-name> (status code: ${err.statusCode})",
  "description": "Error",
  "type": "error",
}

References - Error Format in Data Provider (https://refine.dev/docs/data/data-provider/#error-format) - Customizing Error Notification in useForm (https://refine.dev/docs/packages/react-hook-form/use-form/#errornotification) By following these steps, you should be able to display the error code along with the message in the fly-in error popup when your API returns a 400 or 500 error. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

harsh-harlequinOP•8mo ago

@kapa.ai Does the provided simple rest dataprovider include error handling or would I need to swizzle or create a custom one?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The provided Simple REST data provider in Refine does not include built-in error handling that conforms to the HttpError interface out of the box. You would need to customize it to handle errors properly. Customizing the Simple REST Data Provider To customize the Simple REST data provider for error handling, you can use the swizzle command to create a custom data provider. Here are the steps: 1. Run the swizzle command in the project directory:

    npm run refine swizzle

    npm run refine swizzle

2. Select @refinedev/simple-rest from the list of available data providers. 3. Edit the /rest-data-provider/index.ts file to customize the data provider. Here is an example of how you can customize the data provider to include error handling:

    import { DataProvider, HttpError } from "@refinedev/core";
    import baseDataProvider from "@refinedev/simple-rest";

    const dataProvider = {
        ...baseDataProvider("<https://api.fake-rest.refine.dev">),
        create: async ({ resource, variables }) => {
            try {
                const response = await fetch(`<https://api.fake-rest.refine.dev/${resource}`,> {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(variables),
                });

                if (!response.ok) {
                    const error: HttpError = {
                        message: response.statusText,
                        statusCode: response.status,
                    };
                    return Promise.reject(error);
                }
return {
                    data: await response.json(),
                };
            } catch (error) {
                const customError: HttpError = {
                    message: error?.message || "Something went wrong",
                    statusCode: error?.status || 500,
                };
                return Promise.reject(customError);
            }
        },
        // Add similar error handling for other methods like getOne, update, deleteOne, etc.
    };

    export default dataProvider;

    import { DataProvider, HttpError } from "@refinedev/core";
    import baseDataProvider from "@refinedev/simple-rest";

    const dataProvider = {
        ...baseDataProvider("<https://api.fake-rest.refine.dev">),
        create: async ({ resource, variables }) => {
            try {
                const response = await fetch(`<https://api.fake-rest.refine.dev/${resource}`,> {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify(variables),
                });

                if (!response.ok) {
                    const error: HttpError = {
                        message: response.statusText,
                        statusCode: response.status,
                    };
                    return Promise.reject(error);
                }
return {
                    data: await response.json(),
                };
            } catch (error) {
                const customError: HttpError = {
                    message: error?.message || "Something went wrong",
                    statusCode: error?.status || 500,
                };
                return Promise.reject(customError);
            }
        },
        // Add similar error handling for other methods like getOne, update, deleteOne, etc.
    };

    export default dataProvider;

4. Pass the customized data provider to the dataProvider prop of the Refine component:

    import { Refine } from "@refinedev/core";
    import { dataProvider } from "./rest-data-provider";

    const App = () => {
        return (
            <Refine
                dataProvider={dataProvider}
                /* ... */
            />
        );
    };

    import { Refine } from "@refinedev/core";
    import { dataProvider } from "./rest-data-provider";

    const App = () => {
        return (
            <Refine
                dataProvider={dataProvider}
                /* ... */
            />
        );
    };

References - Customizing the Simple REST Data Provider (https://refine.dev/docs/data/packages/simple-rest/#customizing-the-data-provider-) - Error Format in Data Provider (https://refine.dev/docs/data/data-provider/#error-format) By following these steps, you can ensure that your Simple REST data provider includes proper error handling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

Show API error code

Did you find this page helpful?