feat: render zod issues better

src/app/(dashboard)/[guildUrlName]/[pageUrlName]/page.tsx

@@ -6,14 +6,15 @@ import { Button } from "@/components/ui/Button";
 import { Card } from "@/components/ui/Card";
 import { ScrollArea } from "@/components/ui/ScrollArea";
 import { Skeleton } from "@/components/ui/Skeleton";
-import { CustomError, FetchError } from "@/lib/error";
+import { CustomError } from "@/lib/error";
 import { rewardBatchOptions, roleBatchOptions } from "@/lib/options";
 import type { Schemas } from "@guildxyz/types";
 import { Lock } from "@phosphor-icons/react/dist/ssr";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { useParams } from "next/navigation";
 import { Suspense } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { ZodError } from "zod";
 
 const GuildPage = () => {
   const { pageUrlName, guildUrlName } = useParams<{
@@ -47,11 +48,12 @@ const GuildPage = () => {
 const RoleCard = ({ role }: { role: Schemas["Role"] }) => {
   const blacklistedRoleName = "Member";
   if (role.name === blacklistedRoleName) {
-    throw new FetchError({
-      recoverable: true,
-      message: `Failed to show ${role.name} role`,
-      cause: FetchError.expected`${{ roleName: role.name }} to not match ${{ blacklistedRoleName }}`,
-    });
+    throw new ZodError([]);
+    //throw new FetchError({
+    //  recoverable: true,
+    //  message: `Failed to show ${role.name} role`,
+    //  cause: FetchError.expected`${{ roleName: role.name }} to not match ${{ blacklistedRoleName }}`,
+    //});
   }
   const { data: rewards } = useSuspenseQuery(
     rewardBatchOptions({ roleId: role.id }),

src/components/GenericError.tsx

@@ -27,7 +27,9 @@ export const GenericError = ({ error }: { error: CustomError | ZodError }) => {
               Read more about what went wrong
             </CollapsibleTrigger>
             <CollapsibleContent>
-              <Markdown>{convergedError.cause}</Markdown>
+              <Markdown className="prose dark:prose-invert">
+                {convergedError.cause}
+              </Markdown>
             </CollapsibleContent>
           </Collapsible>
         )}

src/lib/error.ts

@@ -116,13 +116,17 @@ export class ValidationError extends CustomError {
       );
     });
 
-    result.causeRaw = [
-      [
-        "Zod validation to pass, but failed at:  \n",
-        ...parsedIssues.slice(2).flatMap(() => [" occured at ", " with ", "."]),
-      ],
-      ...parsedIssues,
-    ];
+    if (error.issues.length) {
+      result.causeRaw = [
+        [
+          "Zod validation to pass, but failed at:  \n",
+          ...parsedIssues
+            .slice(error.issues.length * 2)
+            .flatMap(() => [" occured at ", " with ", ".  \n"]),
+        ],
+        ...parsedIssues,
+      ];
+    }
 
     return result;
   }