feat: add partial response to error responses

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

@@ -6,15 +6,14 @@ 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 } from "@/lib/error";
+import { CustomError, FetchError } 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<{
@@ -48,12 +47,11 @@ const GuildPage = () => {
 const RoleCard = ({ role }: { role: Schemas["Role"] }) => {
   const blacklistedRoleName = "Member";
   if (role.name === 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 }}`,
-    //});
+    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/app/(dashboard)/[guildUrlName]/layout.tsx

@@ -9,7 +9,9 @@ import {
   userOptions,
 } from "@/lib/options";
 import type { DynamicRoute } from "@/lib/types";
+import { Status } from "@reflet/http";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
+import { notFound } from "next/navigation";
 import { type PropsWithChildren, Suspense } from "react";
 import { GuildTabs, GuildTabsSkeleton } from "./components/GuildTabs";
 import { JoinButton } from "./components/JoinButton";
@@ -65,8 +67,11 @@ const GuildLayout = async ({
     }).queryKey,
   );
 
-  if (guild?.error || !guild?.data) {
-    throw new Error(`Failed to fetch guild ${guild?.error?.status || ""}`);
+  if (guild?.error?.partialResponse.status === Status.NotFound) {
+    notFound();
+  }
+  if (!guild?.data) {
+    throw new Error("Failed to fetch guild");
   }
 
   return (

src/app/(dashboard)/explorer/components/InfiniteScrollGuilds.tsx

@@ -51,7 +51,7 @@ export const InfiniteScrollGuilds = () => {
           ? // biome-ignore lint: it's safe to use index as key in this case
             [...Array(PAGE_SIZE)].map((_, i) => <GuildCardSkeleton key={i} />)
           : guilds.map((guild, _i) => (
-              <GuildCard key={guild.urlName} guild={guild} />
+              <GuildCard key={guild.id} guild={guild} />
             ))}
       </div>
       <div

src/app/error.tsx

@@ -7,7 +7,8 @@ const ErrorBoundary = ({
 }: {
   error: Error & { digest?: string; statusCode?: string };
 }) => {
-  console.log(error.cause);
+  if (error.cause) console.log(error.cause);
+
   return (
     <ErrorPage
       title="Something went wrong!"

src/app/not-found.tsx

@@ -1,12 +1,14 @@
 import "server-only";
 import { ErrorPage } from "@/components/ErrorPage";
 
-export default function NotFound() {
+const NotFound = () => {
   return (
     <ErrorPage
       errorCode="404"
       title="Page not found"
       description="We couldn't find the page you were looking for"
     />
   );
-}
+};
+
+export default NotFound;

src/lib/fetchGuildApi.ts

@@ -140,8 +140,11 @@ const unpackFetcher = (fetcher: typeof fetchGuildApi) => {
   return async <Data = object, Error = ErrorLike>(
     ...args: Parameters<typeof fetchGuildApi>
   ) => {
-    const { data, status } = await fetcher<Data, Error>(...args);
-    return status === "error" ? Promise.reject(data) : data;
+    const { data, status, response } = await fetcher<Data, Error>(...args);
+    const partialResponse = { status: response.status };
+    return status === "error"
+      ? Promise.reject({ data, partialResponse })
+      : data;
   };
 };
 

src/lib/types.ts

@@ -23,9 +23,14 @@ export type DynamicRoute<T extends Record<string, string>> = {
  */
 // TODO: align this to backend when error handling gets consistent
 export type ErrorLike = {
-  message: string;
-  status?: string;
-  error?: string;
+  data: {
+    message: string;
+    status?: string;
+    error?: string;
+  };
+  partialResponse: {
+    status: number;
+  };
 };
 
 /**