error handling for unparsed zod input (iway1#64)

Author: aidansunbury

packages/dev-app/src/router.ts

@@ -58,6 +58,7 @@ const postsRouter = createTRPCRouter({
       };
     }),
 });
+const discriminatedFieldEnum = z.enum(["One", "Two"]);
 
 export const appRouter = createTRPCRouter({
   postsRouter,
@@ -156,6 +157,26 @@ export const appRouter = createTRPCRouter({
         content,
       };
     }),
+  discriminatedUnionInput: procedure
+    .input(
+      z.object({
+        aDiscriminatedUnion: z.discriminatedUnion("discriminatedField", [
+          z.object({
+            discriminatedField: discriminatedFieldEnum.extract(["One"]), // <-- this doesn't work
+            aFieldThatOnlyShowsWhenValueIsOne: z.string(),
+          }),
+          z.object({
+            discriminatedField: z.literal("Two"),
+            aFieldThatOnlyShowsWhenValueIsTwo: z.object({
+              someTextFieldInAnObject: z.string(),
+            }),
+          }),
+        ]),
+      }),
+    )
+    .query(({ input }) => {
+      return input;
+    }),
   procedureWithDescription: procedure
     .meta({
       description:

packages/trpc-ui/src/react-app/components/form/fields/ObjectField.tsx

@@ -34,12 +34,9 @@ export function ObjectField({
       </div>
     );
   }
-  return (
-    <InputGroupContainer
-      title={label}
-      iconElement={overrideIconElement ?? <ObjectIcon className="mr-1" />}
-    >
-      {Object.entries(node.children).map(([childFieldName, e]) => (
+  const renderField = () => {
+    try {
+      return Object.entries(node.children).map(([childFieldName, e]) => (
         <Field
           inputNode={{
             ...e,
@@ -48,7 +45,35 @@ export function ObjectField({
           control={control}
           key={childFieldName}
         />
-      ))}
+      ));
+    } catch (e) {
+      return (
+        <div>
+          <h1 className="font-semibold text-error text-xl">
+            Field Rendering Error
+          </h1>
+          Unfortunately, trpc-ui is unable to render the requested zod field.
+          Not all zod validators are fully supported.{" "}
+          <a
+            href="https://github.com/aidansunbury/trpc-ui/issues/new?template=bug_report.md"
+            target="_blank"
+            rel="noreferrer"
+            className="text-blue-600 underline visited:text-purple-600"
+          >
+            open an issue ↗
+          </a>{" "}
+          with the zod schema that caused this error so that it can be fixed.
+        </div>
+      );
+    }
+  };
+
+  return (
+    <InputGroupContainer
+      title={label}
+      iconElement={overrideIconElement ?? <ObjectIcon className="mr-1" />}
+    >
+      {renderField()}
     </InputGroupContainer>
   );
 }