fix: avatar/logo display diagnostics and upload error handling

Add error logging to silent catch blocks in avatar/logo URL generation,
show user avatar on admin member detail page, and surface specific error
messages for upload failures (CORS/network issues) instead of generic errors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(admin)/admin/members/[id]/page.tsx

@@ -47,6 +47,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
+import { UserAvatar } from '@/components/shared/user-avatar'
 import {
   ArrowLeft,
   Save,
@@ -196,6 +197,8 @@ export default function MemberDetailPage() {
       </div>
 
       <div className="flex items-start justify-between">
+        <div className="flex items-center gap-4">
+          <UserAvatar user={user} avatarUrl={user.avatarUrl} size="lg" />
           <div>
             <h1 className="text-2xl font-semibold tracking-tight">
               {user.name || 'Unnamed Member'}
@@ -207,6 +210,7 @@ export default function MemberDetailPage() {
               </Badge>
             </div>
           </div>
+        </div>
         {(user.status === 'NONE' || user.status === 'INVITED') && (
           <Button
             variant="outline"

src/components/shared/avatar-upload.tsx

@@ -139,16 +139,23 @@ export function AvatarUpload({
       })
 
       // Upload cropped blob directly to storage
-      const uploadResponse = await fetch(uploadUrl, {
+      let uploadResponse: Response
+      try {
+        uploadResponse = await fetch(uploadUrl, {
           method: 'PUT',
           body: croppedBlob,
           headers: {
             'Content-Type': 'image/jpeg',
           },
         })
+      } catch (fetchError) {
+        console.error('Avatar upload network error (possible CORS issue):', fetchError)
+        throw new Error('Network error uploading file. The storage server may not be reachable.')
+      }
 
       if (!uploadResponse.ok) {
-        throw new Error('Failed to upload file')
+        console.error('Avatar upload failed:', uploadResponse.status, uploadResponse.statusText)
+        throw new Error(`Upload failed (${uploadResponse.status}). Please try again.`)
       }
 
       // Confirm upload

src/components/shared/logo-upload.tsx

@@ -142,16 +142,23 @@ export function LogoUpload({
       })
 
       // Upload cropped blob directly to storage
-      const uploadResponse = await fetch(uploadUrl, {
+      let uploadResponse: Response
+      try {
+        uploadResponse = await fetch(uploadUrl, {
           method: 'PUT',
           body: croppedBlob,
           headers: {
             'Content-Type': 'image/png',
           },
         })
+      } catch (fetchError) {
+        console.error('Logo upload network error (possible CORS issue):', fetchError)
+        throw new Error('Network error uploading file. The storage server may not be reachable.')
+      }
 
       if (!uploadResponse.ok) {
-        throw new Error('Failed to upload file')
+        console.error('Logo upload failed:', uploadResponse.status, uploadResponse.statusText)
+        throw new Error(`Upload failed (${uploadResponse.status}). Please try again.`)
       }
 
       // Confirm upload with the provider type that was used

src/components/shared/project-logo-upload.tsx

@@ -128,14 +128,21 @@ export function ProjectLogoUpload({
         contentType: 'image/png',
       })
 
-      const uploadResponse = await fetch(uploadUrl, {
+      let uploadResponse: Response
+      try {
+        uploadResponse = await fetch(uploadUrl, {
           method: 'PUT',
           body: croppedBlob,
           headers: { 'Content-Type': 'image/png' },
         })
+      } catch (fetchError) {
+        console.error('Logo upload network error (possible CORS issue):', fetchError)
+        throw new Error('Network error uploading file. The storage server may not be reachable.')
+      }
 
       if (!uploadResponse.ok) {
-        throw new Error('Failed to upload file')
+        console.error('Logo upload failed:', uploadResponse.status, uploadResponse.statusText)
+        throw new Error(`Upload failed (${uploadResponse.status}). Please try again.`)
       }
 
       await confirmUpload.mutateAsync({ projectId, key, providerType })

src/server/routers/user.ts

@@ -5,7 +5,7 @@ import { UserRole } from '@prisma/client'
 import { router, protectedProcedure, adminProcedure, superAdminProcedure, publicProcedure } from '../trpc'
 import { sendInvitationEmail, sendMagicLinkEmail } from '@/lib/email'
 import { hashPassword, validatePassword } from '@/lib/password'
-import { attachAvatarUrls } from '@/server/utils/avatar-url'
+import { attachAvatarUrls, getUserAvatarUrl } from '@/server/utils/avatar-url'
 import { logAudit } from '@/server/utils/audit'
 import { generateInviteToken, getInviteExpiryHours, getInviteExpiryMs } from '@/server/utils/invite'
 
@@ -353,7 +353,8 @@ export const userRouter = router({
           },
         },
       })
-      return user
+      const avatarUrl = await getUserAvatarUrl(user.profileImageKey, user.profileImageProvider)
+      return { ...user, avatarUrl }
     }),
 
   /**

src/server/utils/avatar-url.ts

@@ -14,7 +14,8 @@ export async function getUserAvatarUrl(
     const providerType = (profileImageProvider as StorageProviderType) || 's3'
     const provider = createStorageProvider(providerType)
     return await provider.getDownloadUrl(profileImageKey)
-  } catch {
+  } catch (error) {
+    console.error('[AvatarURL] Failed to generate URL for key:', profileImageKey, error)
     return null
   }
 }

src/server/utils/project-logo-url.ts

@@ -14,7 +14,8 @@ export async function getProjectLogoUrl(
     const providerType = (logoProvider as StorageProviderType) || 's3'
     const provider = createStorageProvider(providerType)
     return await provider.getDownloadUrl(logoKey)
-  } catch {
+  } catch (error) {
+    console.error('[LogoURL] Failed to generate URL for key:', logoKey, error)
     return null
   }
 }