Error handling ala Leo

apps/web/app/(basenames)/api/basenames/getUsernames/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 
-import type { ManagedAddressesResponse } from '../../../../../src/types/ManagedAddresses';
+import type { ManagedAddressesResponse } from 'apps/web/src/types/ManagedAddresses';
 
 export async function GET(request: NextRequest) {
   const address = request.nextUrl.searchParams.get('address');

apps/web/src/components/Basenames/ManageNames/NamesList.tsx

@@ -28,7 +28,17 @@ function NamesLayout({ children }: { children: React.ReactNode }) {
 }
 
 export default function NamesList() {
-  const { namesData, isLoading } = useNameList();
+  const { namesData, isLoading, error } = useNameList();
+
+  if (error) {
+    return (
+      <NamesLayout>
+        <div className="text-palette-error">
+          <span className="text-lg">Failed to load names. Please try again later.</span>
+        </div>
+      </NamesLayout>
+    );
+  }
 
   if (isLoading) {
     return (

apps/web/src/components/Basenames/ManageNames/hooks.tsx

@@ -9,24 +9,34 @@ import { Basename } from '@coinbase/onchainkit/identity';
 export function useNameList() {
   const { address } = useAccount();
   const chainId = useChainId();
+  const { logError } = useErrors();
 
   const network = chainId === 8453 ? 'base-mainnet' : 'base-sepolia';
 
-  const { data: namesData, isLoading } = useQuery<ManagedAddressesResponse>({
+  const {
+    data: namesData,
+    isLoading,
+    error,
+  } = useQuery<ManagedAddressesResponse>({
     queryKey: ['usernames', address, network],
     queryFn: async (): Promise<ManagedAddressesResponse> => {
-      const response = await fetch(
-        `/api/basenames/getUsernames?address=${address}&network=${network}`,
-      );
-      if (!response.ok) {
-        throw new Error('Failed to fetch usernames');
+      try {
+        const response = await fetch(
+          `/api/basenames/getUsernames?address=${address}&network=${network}`,
+        );
+        if (!response.ok) {
+          throw new Error(`Failed to fetch usernames: ${response.statusText}`);
+        }
+        return (await response.json()) as ManagedAddressesResponse;
+      } catch (err) {
+        logError(err, 'Failed to fetch usernames');
+        throw err;
       }
-      return response.json() as Promise<ManagedAddressesResponse>;
     },
     enabled: !!address,
   });
 
-  return { namesData, isLoading };
+  return { namesData, isLoading, error };
 }
 
 export function useRemoveNameFromUI(domain: Basename) {