console.log errors only when they aren't visible

[simplecommerce]

Hi,

I was wondering if there was any way to console.log errors for fields that aren't displayed or rendered in a form?

For example, if I have a form that requires and id and a name, and the name field is a text field but the id is passed to the model internally, if the id field is empty for whatever reason, I would like to be able to console.log and indicate that the field is missing since its not rendered on screen.

This is just a simple scenario, but I would like to make it generic, since right now if a field isn't rendered, errors are caught and not throw/shown so sometimes it makes it difficult to debug.

Any ideas is appreciated, thanks!

[radekmie]

Hi @simplecommerce. There's no such a feature, so let's do it without actually changing the package.

The idea would be that we have to know three things:

1. What fields are available [1].
2. What fields are rendered [2].
3. What fields are "errored", i.e., have errors.

Step 1. is easy - we walk the schema using getSubfields. Step 3. is also simple, as we can hook into onValidate and remember which of the available fields have errors (using getError). Step 2. is the hardest one, as it involves rendering. What we can do is to utilize any of the bridge methods used in useField. By hooking into them we can know that someone is rendering a field [2]. As a result, we can know which fields have errors and are not rendered.

[1] There's a problem with arrays, as the schema does not know how many elements will be there. It could be added as well by extending the available fields dynamically.
[2] To make it simpler, I assumed that fields are never disappearing. Disappearing fields can be handled in at least two ways: first, clear the rendered fields and trigger a full re-render of the form (using key), second, creating a custom AutoField that would notify a React Context when it's (un)mounted.

Here's the code.

import React, { useMemo, useState } from "react";
import SimpleSchema from "simpl-schema";
import { Bridge, joinName } from "uniforms";
import { SimpleSchema2Bridge } from "uniforms-bridge-simple-schema-2";
import { AutoFields, AutoForm, SubmitField } from "uniforms-unstyled";

const schema = new SimpleSchema({
  x: { type: String, min: 1 },
  y: Object,
  "y.a": { type: String, min: 1 },
  "y.b": { type: String, min: 1 },
  z: { type: String, minCount: 1 },
  "z.$": Object,
  "z.$.a": { type: String, min: 1 },
  "z.$.b": { type: String, min: 1 }
});

function useDebug(makeBridge: () => Bridge, dependencies?: unknown[]) {
  const [fieldsErrored, setFieldsErrored] = useState([]);
  const [fieldsRendered, setFieldsRendered] = useState([]);
  const { bridge, fieldsAvailable, onValidate } = useMemo(() => {
    const bridge = makeBridge();

    const getField = bridge.getField.bind(bridge);
    bridge.getField = (name) => {
      if (joinName(null, name).slice(-1)[0] !== "$") {
        setFieldsRendered((fields) =>
          fields.includes(name) ? fields : fields.concat(name).sort()
        );
      }

      return getField(name);
    };

    // Remember about .slice() as getSubfields is memoized.
    const fieldsAvailable = bridge.getSubfields().slice().sort();
    function gatherFieldsAvailable(field: string) {
      const subfields = bridge.getSubfields(field).slice();
      if (!subfields.includes("$")) {
        try {
          bridge.getField(joinName(field, "$"));
          subfields.push("$");
        } catch (error) {
          // It's fine.
        }
      }

      subfields.forEach((subfield) => {
        subfield = joinName(field, subfield);
        if (!fieldsAvailable.includes(subfield)) {
          fieldsAvailable.push(subfield);
          gatherFieldsAvailable(subfield);
        }
      });
    }

    fieldsAvailable.forEach(gatherFieldsAvailable);
    fieldsAvailable.sort();

    function onValidate(model: unknown, error: unknown) {
      setFieldsErrored(
        fieldsAvailable.filter(
          (field) => !!bridge.getErrorMessage(field, error)
        )
      );
      return error;
    }

    return { bridge, fieldsAvailable, onValidate };
  }, dependencies);

  return {
    bridge,
    fieldsAvailable,
    fieldsErrored,
    fieldsRendered,
    onValidate
  };
}

export function App() {
  const {
    bridge,
    fieldsAvailable,
    fieldsErrored,
    fieldsRendered,
    onValidate
  } = useDebug(() => new SimpleSchema2Bridge(schema), []);

  return (
    <>
      <pre>
        <code>
          {"fieldsAvailable                 = " + fieldsAvailable.join(", ")}
          <br />
          {"fieldsErrored                   = " + fieldsErrored.join(", ")}
          <br />
          {"fieldsRendered                  = " + fieldsRendered.join(", ")}
          <br />
          {"fieldsErrored \\ fieldsRendered  = " +
            fieldsErrored
              .filter((field) => !fieldsRendered.includes(field))
              .join(", ")}
        </code>
      </pre>
      <AutoForm
        placeholder
        onValidate={onValidate}
        schema={bridge}
        onSubmit={(model) => alert(JSON.stringify(model, null, 2))}
      >
        <AutoFields fields={["x"]} />
        <SubmitField />
      </AutoForm>
    </>
  );
}

We also briefly discussed it internally, and maybe we'll add it as a feature in the future. @wadamek65: you had some idea - could you share it here?

[simplecommerce]

Thank you for taking the time to reply with an example code, I appreciate it!