Better render config error in the form itself than throwing.

Author: n1k0

playground/app.js

@@ -49,10 +49,11 @@ class Editor extends Component {
   render() {
     const {title} = this.props;
     const icon = this.state.valid ? "ok" : "remove";
+    const cls = this.state.valid ? "valid" : "invalid";
     return (
       <fieldset>
         <legend>
-          <span className={`glyphicon glyphicon-${icon}`} />
+          <span className={`${cls} glyphicon glyphicon-${icon}`} />
           {" "}
           {title}
         </legend>
@@ -99,7 +100,12 @@ class Selector extends Component {
 class App extends Component {
   constructor(props) {
     super(props);
-    this.state = {form: false, schema: {}, uiSchema: {}, formData: {}};
+    this.state = {
+      form: false,
+      schema: {},
+      uiSchema: {},
+      formData: {},
+    };
   }
 
   componentDidMount() {

playground/styles.css

@@ -19,3 +19,11 @@
 .rjsf input[type=radio] {
   margin-right: .4em;
 }
+
+.invalid {
+  color: red;
+}
+
+.valid {
+  color: green;
+}

src/components/fields/ObjectField.js

@@ -40,8 +40,17 @@ class ObjectField extends Component {
     const {schema, uiSchema, name} = this.props;
     const title = name || schema.title;
     const SchemaField = this.props.SchemaField;
-    const orderedProperties = orderProperties(
-      Object.keys(schema.properties), uiSchema.order);
+    try {
+      var orderedProperties = orderProperties(
+        Object.keys(schema.properties), uiSchema.order);
+    } catch(err) {
+      const {message} = err;
+      return (
+        <p className="config-error" style={{color: "red"}}>
+        Invalid {name || "root"} object field configuration: <em>{message}</em>.
+        </p>
+      );
+    }
     return (
       <fieldset>
         {title ? <legend>{title}</legend> : null}

test/index_test.js

@@ -81,19 +81,21 @@ describe("Form", () => {
     });
 
     it("should throw when order list length mismatches", () => {
-      expect(() => {
-        createComponent({schema, uiSchema: {
-          order: ["bar", "foo", "baz?"]
-        }});
-      }).to.Throw(Error, /should match object properties length/);
+      const {node} = createComponent({schema, uiSchema: {
+        order: ["bar", "foo", "baz?"]
+      }});
+
+      expect(node.querySelector(".config-error").textContent)
+        .to.match(/should match object properties length/);
     });
 
     it("should throw when order and properties lists differs", () => {
-      expect(() => {
-        createComponent({schema, uiSchema: {
-          order: ["bar", "wut?"]
-        }});
-      }).to.Throw(Error, /does not match object properties list/);
+      const {node} = createComponent({schema, uiSchema: {
+        order: ["bar", "wut?"]
+      }});
+
+      expect(node.querySelector(".config-error").textContent)
+        .to.match(/does not match object properties list/);
     });
   });