refactor: simplify API fetch error handling in aa-chains route

Author: joaquim-verges

apps/portal/src/app/api/aa-chains/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from "next/server";
-import type { ChainMetadata } from "thirdweb/chains";
+import { defineChain, getChainMetadata } from "thirdweb/chains";
 
 export const maxDuration = 300; // max timeout 300 seconds (5min)
 export const revalidate = 86400; // Revalidate every 24 hours (86400 seconds)
@@ -9,28 +9,14 @@ type ApiResponseType = {
 };
 
 export async function GET() {
-  const [chainsWithServices, allChains] = await Promise.all([
-    fetch("https://api.thirdweb.com/v1/chains/services", {
+  const chainsWithServices = await fetch(
+    "https://api.thirdweb.com/v1/chains/services",
+    {
       headers: {
         "Content-Type": "application/json",
       },
-    })
-      .then((res) => res.json() as Promise<ApiResponseType>)
-      .catch((error) => {
-        console.error(error);
-        return { data: {} as ApiResponseType["data"] };
-      }),
-    fetch("https://api.thirdweb.com/v1/chains", {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-      .then((res) => res.json() as Promise<{ data: ChainMetadata[] }>)
-      .catch((error) => {
-        console.error(error);
-        return { data: [] as ChainMetadata[] };
-      }),
-  ]);
+    },
+  ).then((res) => res.json() as Promise<ApiResponseType>);
 
   const aaChains = Object.entries(chainsWithServices.data)
     .filter(([, services]) =>
@@ -41,14 +27,30 @@ export async function GET() {
     )
     .map(([chainId]) => Number(chainId));
 
-  const intersectedChains = allChains.data
-    .filter((chain) =>
-      aaChains.some((aaChainId) => aaChainId === chain.chainId),
-    )
+  const chunkSize = 5;
+  // dont fetch all chains at once to avoid rate limiting
+  const allChains = await Promise.all(
+    Array.from(
+      { length: Math.ceil(aaChains.length / chunkSize) },
+      async (_, i) => {
+        if (i > 0) {
+          await new Promise((resolve) => setTimeout(resolve, 300));
+        }
+        return Promise.all(
+          aaChains
+            .slice(i * chunkSize, (i + 1) * chunkSize)
+            .map((id) => getChainMetadata(defineChain({ id }))),
+        );
+      },
+    ),
+  );
+
+  const cleanedUpChains = allChains
+    .flat()
     .filter((c) => c.name)
     .sort((a, b) => a.name.localeCompare(b.name));
 
   return NextResponse.json({
-    data: intersectedChains,
+    data: cleanedUpChains,
   });
 }

apps/portal/src/components/Document/AAChainList.tsx

@@ -7,12 +7,13 @@ async function getChains(): Promise<ChainMetadata[]> {
   try {
     const chains = await fetch(`${getBaseUrl()}/api/aa-chains`);
     if (!chains.ok) {
+      console.error("Failed to fetch chains", chains.statusText);
       return [];
     }
     const result = (await chains.json()) as { data: ChainMetadata[] };
     return result.data;
   } catch (error) {
-    console.error(error);
+    console.error("Failed to fetch chains", error);
     return [];
   }
 }