errorAdapter

The errorAdapter is a function that transforms API error responses into a standardized format that ReactForm can display. It acts as a translator between your backend's error structure and ReactForm's internal error state.

Different APIs return errors in different formats. The errorAdapter normalizes these different structures into a single format ReactForm understands.

default

{
  errorAdapter: (error) => {
    throw error;
  };
}

How It Works

1. A CRUD method (create, read, update, etc.) throws an error or API returns error response
2. The error is automatically intercepted
3. Your custom errorAdapter transforms the error into ReactForm's format
4. Processed errors populate the context.error object
5. You can now show field-specific errors in your UI

If you want to customize it then this pattern keeps your CRUD methods clean while ensuring consistent error handling across all operations.

{
  errorAdapter: (error) => {
    // Write your error mapping here.
    return {
      name: error.name || "Unknown Error",
      message: error.message || "There was an unknown error. Please try again.",
      fieldErrors: error.errors || {}, // An object containing {key:value} pairs of each field
    };
  };
}

Display Errors

<ReactForm schema={schema} create={create}>
  {({ context }) => (
    <>
      <input
        value={context.values.email || ""}
        onChange={(e) => context.setValue("email", e.target.value)}
      />
      {context.error?.fieldErrors?.email && (
        <span className="error">{context.error.fieldErrors.email}</span>
      )}
    </>
  )}
</ReactForm>

Or using <ReactFormError>:

<ReactFormError>
  {({ error }) =>
    error && (
      <div className="error-banner">
        <h4>{error.name}</h4>
        <p>{error.message}</p>
      </div>
    )
  }
</ReactFormError>

Catch Errors

Important

Do not catch errors in your create, read, update, delete, archive, or unarchive methods. ReactForm's errorAdapter automatically catches and processes unhandled errors from these functions. If you must catch: Re-throw the error.

const create = (context) => {
  return fetch("/api/users/")
    .then((res) => {
      if (!res.ok) {
        throw new Error("Failed to create user");
      }
      return res.json();
    })
    .then((data) => {
      return {
        values: data,
      };
    })
    .catch((err) => {
      // Your logic
      throw err; // Re-throw to let errorAdapter handle it
    });
};

Usage

Via ReactFormProvider (Global)

<ReactFormProvider
  errorAdapter={(error) => {
    return {
      name: error?.name || "RequestError",
      message: error?.message || "Request failed",
      fieldErrors: error?.errors || {},
    };
  }}
>
  <App />
</ReactFormProvider>

Via ReactForm (Form-specific)

<ReactForm
  schema={schema}
  errorAdapter={(error) => {
    // Custom error handling for this form
    if (error.response?.status === 422) {
      return {
        name: "ValidationError",
        message: "Please check the form for errors",
        fieldErrors: error.response.data.errors || {},
      };
    }
    return {
      name: error.name || "Unknown Error",
      message: error.message || "An error occurred",
      fieldErrors: {},
    };
  }}
  create={create}
  update={update}
>
  {({ context }) => (
    // Form content
  )}
</ReactForm>