Error Handling: TypeScript compliancy - set const with error content

General
1

I have an import:

import type { ErrorObject } from "ajv";

A const:

const [validationErrors, setValidationErrors] = useState<Array<ErrorObject>>([]);

And code to return the errors to the const

<JsonForms
    schema={schema}
    uischema={uiSchema}
    data={document}
    renderers={materialRenderers}
    cells={materialCells}
    onChange={({ data, errors }) => {
      setDocument(data);
      if (errors != undefined) {
        setValidationErrors(errors);
      }
    }}
/>

The ajv ErrorObject doesn’t appear to have additional properties such as .interfacePath and .parentSchema.title

Firstly is there an enhanced ErrorObject local to JSONForms I should be using?

Secondly TS doesn’t like my setValidationErrors(errors):

Argument of type ‘ErrorObject<string, Record<string, any>, unknown>’ is not assignable to parameter of type ‘SetStateAction<ErrorObject>’.
Type ‘ErrorObject<string, Record<string, any>, unknown>’ is not assignable to type ‘ErrorObject’.
Property ‘dataPath’ is missing in type ‘ErrorObject<string, Record<string, any>, unknown>’ but required in type ‘ErrorObject’.ts(2345)
ajv.d.ts(300, 5): ‘dataPath’ is declared here.
(parameter) errors: ErrorObject<string, Record<string, any>, unknown>

Has anyone tried to do similar? I’m passing the Array of ErrorObject’s to a banner component to then display the errors as a list.

Any thoughts greatly appreciated.

Rob.

2

Never mind I decided to go in a different direction:

New interface for the fields I’m interested in:

export interface JsonFormError {
  path: string;
  title?: string;
  message: string;
}

const [validationErrors, setValidationErrors] = useState<Array<JsonFormError>>([]);

<JsonForms
  schema={schema}
  uischema={uiSchema}
  data={document}
  renderers={materialRenderers}
  cells={materialCells}
  onChange={({ data, errors }) => {
    setDocument(data);
    if (errors != undefined) {
      const errorArray: Array<JsonFormError> = [];
      for (let i = 0; i < errors.length; i++) {
        errorArray.push({
          path: errors[i].instancePath,
          title: errors[i].parentSchema?.title
            ? errors[i].parentSchema?.title
            : "",
          message: errors[i].message || "",
        });
      }
      setValidationErrors(errorArray);
    } else {
      setValidationErrors([]);
    }
  }}
/>

Probably not the best way but hey ho, it works.

3

Hi @robg,

We only reuse the AJV ErrorObject and do not add/remove any properties from it. Very likely you have an AJV version conflict, e.g. v6 / v8 of AJV in your environment so that a different type is imported. This can easily happen as many development tools also have a dependency to AJV.