Error returns the message as an array instead of a string

this is my api response

{"statusCode":400,"message":"This name is already taken","error":"Bad Request","errors":{"name":["This name is already taken"]}}

{"statusCode":400,"message":"This name is already taken","error":"Bad Request","errors":{"name":["This name is already taken"]}}

but when i call the following function

  async function onSubmit(values) {
    try {
      await mutate(
        { values },
        {
          onError: (error) => {
              //TODO: Handle error with notifcationprovider
            console.log(error)
          },
          onSuccess: (data) => {
            setOpen(false)
            router.push(
              `/groups/${data?.data?.id}`,
            )
          },
        },
      )
    } catch (error) {
      //TODO: Handle error with notifcationprovider
      console.error(error)
    }
  }

  async function onSubmit(values) {
    try {
      await mutate(
        { values },
        {
          onError: (error) => {
              //TODO: Handle error with notifcationprovider
            console.log(error)
          },
          onSuccess: (data) => {
            setOpen(false)
            router.push(
              `/groups/${data?.data?.id}`,
            )
          },
        },
      )
    } catch (error) {
      //TODO: Handle error with notifcationprovider
      console.error(error)
    }
  }

the onError returns

{
  "statusCode": 400,
  "message": "Bad Request",
  "errors": {
    "": [
      "T",
      "h",
      "i",
      "s",
      " ",
      "n",
      "a",
      "m",
      "e",
      " ",
      "i",
      "s",
      " ",
      "a",
      "l",
      "r",
      "e",
      "a",
      "d",
      "y",
      " ",
      "t",
      "a",
      "k",
      "e",
      "n"
    ]
  }
}

{
  "statusCode": 400,
  "message": "Bad Request",
  "errors": {
    "": [
      "T",
      "h",
      "i",
      "s",
      " ",
      "n",
      "a",
      "m",
      "e",
      " ",
      "i",
      "s",
      " ",
      "a",
      "l",
      "r",
      "e",
      "a",
      "d",
      "y",
      " ",
      "t",
      "a",
      "k",
      "e",
      "n"
    ]
  }
}

i'm using nextjscrud dataprovider and useCreate mutation

2 Replies

kapa.ai•2w ago

Hi @delaways. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like you're experiencing an issue with error handling in refine where the error message is being split into an array of individual characters instead of being preserved as a string. This is likely happening because of how the error is being processed in the data provider. Refine expects errors to be extended from HttpError with a specific format, and it seems there's a transformation issue happening with your error message. How to fix this issue: You need to ensure your data provider correctly formats the error object. Refine expects errors to follow the HttpError interface format:

const customError: HttpError = {
  message: error.response?.data?.message,
  statusCode: error.response?.status,
  errors: {
    // Field-specific errors should be properly formatted here
    fieldName: "Error message as string"
  }
};

const customError: HttpError = {
  message: error.response?.data?.message,
  statusCode: error.response?.status,
  errors: {
    // Field-specific errors should be properly formatted here
    fieldName: "Error message as string"
  }
};

Solution: You can modify your data provider to properly handle the error format. Here's how you can implement error handling in your data provider:

import axios from "axios";
import { DataProvider, HttpError } from "@refinedev/core";

// Create an axios instance with an interceptor
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,
    };
    
    // Ensure errors are properly formatted
    if (error.response?.data?.errors) {
      customError.errors = {};
      
      // Process each error field
      Object.entries(error.response.data.errors).forEach(([key, value]) => {
        // If the value is an array, join it into a string
        if (Array.isArray(value)) {
          customError.errors[key] = value.join("");
        } else {
          customError.errors[key] = value;
        }
      });
    }
    
    return Promise.reject(customError);
  },
);

import axios from "axios";
import { DataProvider, HttpError } from "@refinedev/core";

// Create an axios instance with an interceptor
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,
    };
    
    // Ensure errors are properly formatted
    if (error.response?.data?.errors) {
      customError.errors = {};
      
      // Process each error field
      Object.entries(error.response.data.errors).forEach(([key, value]) => {
        // If the value is an array, join it into a string
        if (Array.isArray(value)) {
          customError.errors[key] = value.join("");
        } else {
          customError.errors[key] = value;
        }
      });
    }
    
    return Promise.reject(customError);
  },
);

This approach ensures that any array-based error messages are properly joined into strings before being passed to refine's error handling system. For server-side validation, refine expects the error object to have a specific structure with the errors property containing field-specific error messages, which will then be displayed in the corresponding form fields Server-side validation. If you're using a custom data provider, make sure it properly formats the error response according to refine's expected HttpError format Error Format. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Error returns the message as an array instead of a string

Did you find this page helpful?