fix(form): handle exceptions in form

* Add default error boundary for form * Allow users to provide a custom error boundary
cern-sis · Nov 13, 2024 · 8e09624 · 8e09624
1 parent deb3720
commit 8e09624
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 45 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/exposed.tsx b/src/exposed.tsx
@@ -21,6 +21,7 @@ type FormuleContextProps = {
   customPublishedWidgets?: object;
   theme?: ThemeConfig;
   separator?: string;
+  errorBoundary?: ReactNode;
   synchronizeState?: (state: SchemaWizardState) => void;
   transformSchema?: (schema: object) => object;
 };
@@ -34,6 +35,7 @@ export const FormuleContext = ({
   customPublishedWidgets,
   theme,
   separator = "::",
+  errorBoundary,
   synchronizeState,
   transformSchema = (schema) => schema,
 }: FormuleContextProps) => {
@@ -61,8 +63,9 @@ export const FormuleContext = ({
               customWidgets,
               customPublishedFields,
               customPublishedWidgets,
-              transformSchema,
               separator,
+              errorBoundary,
+              transformSchema,
             }}
           >
             {content}

diff --git a/src/forms/Form.jsx b/src/forms/Form.jsx
@@ -15,6 +15,7 @@ import { useContext } from "react";
 import { Provider, useDispatch } from "react-redux";
 import store from "../store/configureStore";
 import { updateFormData } from "../store/schemaWizard";
+import FormErrorBoundary from "./FormErrorBoundary";
 
 const RJSFForm = ({
   formRef,
@@ -54,50 +55,54 @@ const RJSFForm = ({
     ObjectFieldTemplate: Objects || ObjectFieldTemplate,
   };
 
+  const ErrorBoundary = customizationContext.errorBoundary || FormErrorBoundary;
+
   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}
-      >
-        <span />
-      </Form>
+      <ErrorBoundary>
+        <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>
   );
 };

diff --git a/src/forms/FormErrorBoundary.jsx b/src/forms/FormErrorBoundary.jsx
@@ -0,0 +1,49 @@
+import { Alert, Typography } from "antd";
+
+const { ErrorBoundary } = Alert;
+
+const FormErrorBoundary = ({ children }) => (
+  <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>
+            <li>
+              These errors could also be coming from the uiSchema (e.g.
+              non-existing widget/field).
+            </li>
+          </ul>
+        </Typography.Paragraph>
+      </div>
+    }
+  >
+    {children}
+  </ErrorBoundary>
+);
+
+export default FormErrorBoundary;