fix(form): handle exceptions in form

cern-sis · Nov 4, 2024 · 0e2ab21 · 0e2ab21
1 parent deb3720
commit 0e2ab21
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 43 deletions.
diff --git a/formule-demo/src/main.tsx b/formule-demo/src/main.tsx
@@ -3,11 +3,16 @@ import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import { ConfigProvider } from "antd";
 import { theme } from "./theme.ts";
+import { Alert } from "antd";
+
+const { ErrorBoundary } = Alert;
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <ConfigProvider theme={theme}>
-      <App />
+      <ErrorBoundary>
+        <App />
+      </ErrorBoundary>
     </ConfigProvider>
   </React.StrictMode>,
 );
diff --git a/formule-demo/yarn.lock b/formule-demo/yarn.lock
@@ -3497,7 +3497,7 @@ react-dom@^18.2.0:
     scheduler "^0.23.2"
 
 "react-formule@file:..":
-  version "1.1.1"
+  version "1.2.0"
   dependencies:
     "@ant-design/pro-layout" "^7.16.4"
     "@codemirror/lang-json" "^6.0.1"

diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx
@@ -15,6 +15,9 @@ import { useContext } from "react";
 import { Provider, useDispatch } from "react-redux";
 import store from "../store/configureStore";
 import { updateFormData } from "../store/schemaWizard";
+import { Alert, Typography } from "antd";
+
+const { ErrorBoundary } = Alert;
 
 const RJSFForm = ({
   formRef,
@@ -56,48 +59,88 @@ const RJSFForm = ({
 
   return (
     <Provider store={store}>
-      <Form
-        className={["__Form__", className].join(" ")}
-        ref={formRef}
-        schema={schema}
-        uiSchema={uiSchema}
-        tagName={tagName}
-        formData={formData}
-        fields={{
-          ...CAPFields,
-          ...customizationContext.customFields,
-          ...fields,
-          ...(isPublished && PublishedFields),
-          ...(isPublished && customizationContext.customPublishedFields),
-        }}
-        widgets={{
-          ...CAPWidgets,
-          ...customizationContext.customWidgets,
-          ...widgets,
-          ...(isPublished && PublishedWidgets),
-          ...(isPublished && customizationContext.customPublishedWidgets),
-        }}
-        templates={templates}
-        liveValidate={liveValidate}
-        showErrorList={showErrorList}
-        noHtml5Validate={true}
-        onError={() => {}}
-        onBlur={() => {}}
-        customValidate={validate}
-        validator={validator}
-        extraErrors={extraErrors}
-        onChange={handleChange}
-        readonly={readonly || isPublished}
-        transformErrors={transformErrors}
-        formContext={{
-          formRef,
-          ...formContext,
-          hideAnchors,
-        }}
-        idSeparator={customizationContext.separator}
+      <ErrorBoundary
+        description={
+          <div style={{ whiteSpace: "normal" }}>
+            <Typography.Text strong>
+              Why am I getting this error?
+            </Typography.Text>
+            <Typography.Paragraph ellipsis={{ rows: 12, expandable: true }}>
+              Your schema might not be following the{" "}
+              <a
+                href="https://json-schema.org/specification"
+                target="_blank"
+                rel="noreferrer"
+              >
+                JSONSchema specification
+              </a>
+              . This usually happens when you have manually modified the JSON
+              schema and introduced some errors. Please make sure the schema
+              follows the specification and try again.
+              <br />
+              Notes:
+              <ul>
+                <li>
+                  Formule adds some custom properties to the schema not present
+                  in the JSONSchema specification, but these should not cause
+                  issues.
+                </li>
+                <li>
+                  When you get this error, you usually want to be looking at
+                  clear violations of the JSON Schema principles. For example,
+                  list or object fields not containing a type or containing
+                  children as direct descendants instead of within a{" "}
+                  <code>properties</code>
+                  or <code>items</code> object.
+                </li>
+              </ul>
+            </Typography.Paragraph>
+          </div>
+        }
       >
-        <span />
-      </Form>
+        <Form
+          className={["__Form__", className].join(" ")}
+          ref={formRef}
+          schema={schema}
+          uiSchema={uiSchema}
+          tagName={tagName}
+          formData={formData}
+          fields={{
+            ...CAPFields,
+            ...customizationContext.customFields,
+            ...fields,
+            ...(isPublished && PublishedFields),
+            ...(isPublished && customizationContext.customPublishedFields),
+          }}
+          widgets={{
+            ...CAPWidgets,
+            ...customizationContext.customWidgets,
+            ...widgets,
+            ...(isPublished && PublishedWidgets),
+            ...(isPublished && customizationContext.customPublishedWidgets),
+          }}
+          templates={templates}
+          liveValidate={liveValidate}
+          showErrorList={showErrorList}
+          noHtml5Validate={true}
+          onError={() => {}}
+          onBlur={() => {}}
+          customValidate={validate}
+          validator={validator}
+          extraErrors={extraErrors}
+          onChange={handleChange}
+          readonly={readonly || isPublished}
+          transformErrors={transformErrors}
+          formContext={{
+            formRef,
+            ...formContext,
+            hideAnchors,
+          }}
+          idSeparator={customizationContext.separator}
+        >
+          <span />
+        </Form>
+      </ErrorBoundary>
     </Provider>
   );
 };