Fix team page loading issues and Next.js config warnings

- Add timeout handling and error display to team members/invitations
- Improve proxy error handling with 15s timeout and better URL format handling
- Fix useState -> useEffect bug in team page
- Remove deprecated instrumentationHook from Next.js config
- Add outputFileTracingRoot to match turbopack.root

Author: StephaneWamba

frontend/app/dashboard/team/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -58,8 +58,8 @@ type InviteFormValues = z.infer<typeof inviteSchema>
 
 export default function TeamPage() {
   const router = useRouter()
-  const { data: members, isLoading: membersLoading } = useTeamMembers()
-  const { data: invitations, isLoading: invitationsLoading } = useInvitations()
+  const { data: members, isLoading: membersLoading, error: membersError } = useTeamMembers()
+  const { data: invitations, isLoading: invitationsLoading, error: invitationsError } = useInvitations()
   const inviteUser = useInviteUser()
   const deleteInvitation = useDeleteInvitation()
   const updateMemberRole = useUpdateMemberRole()
@@ -146,7 +146,7 @@ export default function TeamPage() {
   // Get current user to check permissions
   const [currentUser, setCurrentUser] = useState<{ id: string; role: string } | null>(null)
 
-  useState(() => {
+  useEffect(() => {
     const supabase = createClient()
     supabase.auth.getUser().then(({ data: { user } }) => {
       if (user) {
@@ -160,7 +160,7 @@ export default function TeamPage() {
           })
       }
     })
-  })
+  }, [])
 
   const canManageTeam = currentUser?.role === 'owner' || currentUser?.role === 'admin'
 
@@ -190,8 +190,21 @@ export default function TeamPage() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          {membersLoading ? (
-            <div className="text-center py-8 text-muted-foreground">Loading...</div>
+          {membersError ? (
+            <div className="text-center py-8">
+              <p className="text-destructive mb-2">Failed to load team members</p>
+              <p className="text-sm text-muted-foreground">{membersError.message}</p>
+              <Button 
+                variant="outline" 
+                size="sm" 
+                className="mt-4"
+                onClick={() => window.location.reload()}
+              >
+                Retry
+              </Button>
+            </div>
+          ) : membersLoading ? (
+            <div className="text-center py-8 text-muted-foreground">Loading team members...</div>
           ) : members && members.length > 0 ? (
             <Table>
               <TableHeader>
@@ -266,8 +279,13 @@ export default function TeamPage() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            {invitationsLoading ? (
-              <div className="text-center py-8 text-muted-foreground">Loading...</div>
+            {invitationsError ? (
+              <div className="text-center py-8">
+                <p className="text-destructive mb-2">Failed to load invitations</p>
+                <p className="text-sm text-muted-foreground">{invitationsError.message}</p>
+              </div>
+            ) : invitationsLoading ? (
+              <div className="text-center py-8 text-muted-foreground">Loading invitations...</div>
             ) : invitations && invitations.length > 0 ? (
               <Table>
                 <TableHeader>

frontend/lib/api/proxy.ts

@@ -46,7 +46,21 @@ export async function proxyRequest(
     const method = options.method || request.method
     const url = new URL(request.url)
     const queryString = url.searchParams.toString()
-    const targetUrl = `${options.serviceUrl}${options.path}${queryString ? `?${queryString}` : ''}`
+    
+    // Ensure serviceUrl doesn't have trailing slash and path starts with /
+    // Handle URLs with or without protocol
+    let serviceUrl = options.serviceUrl.replace(/\/$/, '')
+    if (!serviceUrl.startsWith('http://') && !serviceUrl.startsWith('https://')) {
+      serviceUrl = `https://${serviceUrl}`
+    }
+    const path = options.path.startsWith('/') ? options.path : `/${options.path}`
+    const targetUrl = `${serviceUrl}${path}${queryString ? `?${queryString}` : ''}`
+    
+    logger.debug('Proxying request', {
+      targetUrl,
+      method,
+      path: options.path,
+    })
 
     const headers: HeadersInit = {
       Authorization: `Bearer ${ctx.session.access_token}`,
@@ -72,11 +86,33 @@ export async function proxyRequest(
       }
     }
 
-    const response = await fetch(targetUrl, {
-      method,
-      headers,
-      body,
-    })
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 15000) // 15 second timeout
+    
+    let response: Response
+    try {
+      response = await fetch(targetUrl, {
+        method,
+        headers,
+        body,
+        signal: controller.signal,
+      })
+      clearTimeout(timeoutId)
+    } catch (error: any) {
+      clearTimeout(timeoutId)
+      if (error.name === 'AbortError') {
+        logger.error('Request timeout to backend service', {
+          serviceUrl: options.serviceUrl,
+          path: options.path,
+          method,
+        })
+        return NextResponse.json(
+          { error: 'Request timeout', details: 'The service is taking too long to respond' },
+          { status: 504 }
+        )
+      }
+      throw error
+    }
 
     // Check content type before parsing
     const contentType = response.headers.get('content-type')
@@ -108,6 +144,13 @@ export async function proxyRequest(
       const nested = (data as Record<string, unknown>)[options.extractNestedData]
       if (nested !== undefined) {
         data = nested
+      } else {
+        // If nested data not found, log warning but return original data
+        logger.warn('Nested data not found in response', {
+          extractNestedData: options.extractNestedData,
+          responseKeys: Object.keys(data as Record<string, unknown>),
+          path: options.path,
+        })
       }
     }
 

frontend/lib/api/team.ts

@@ -38,23 +38,65 @@ export interface UpdateMemberRoleInput {
 
 // API functions
 async function fetchTeamMembers(): Promise<TeamMember[]> {
-  const response = await fetch('/api/team/members')
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Failed to fetch team members' }))
-    throw new Error(error.error || 'Failed to fetch team members')
+  try {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 10000) // 10 second timeout
+    
+    const response = await fetch('/api/team/members', {
+      signal: controller.signal,
+    })
+    
+    clearTimeout(timeoutId)
+    
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Failed to fetch team members' }))
+      throw new Error(error.error || `Failed to fetch team members: ${response.status}`)
+    }
+    
+    const data = await response.json()
+    // Response is already extracted by proxy (extractNestedData: 'members')
+    // So data is either the array directly or { members: [...] }
+    if (Array.isArray(data)) {
+      return data
+    }
+    return data.members || []
+  } catch (error: any) {
+    if (error.name === 'AbortError') {
+      throw new Error('Request timeout: Team service is not responding')
+    }
+    throw error
   }
-  const data = await response.json()
-  return data.members || []
 }
 
 async function fetchInvitations(): Promise<TeamInvitation[]> {
-  const response = await fetch('/api/team/invitations')
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ error: 'Failed to fetch invitations' }))
-    throw new Error(error.error || 'Failed to fetch invitations')
+  try {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 10000) // 10 second timeout
+    
+    const response = await fetch('/api/team/invitations', {
+      signal: controller.signal,
+    })
+    
+    clearTimeout(timeoutId)
+    
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Failed to fetch invitations' }))
+      throw new Error(error.error || `Failed to fetch invitations: ${response.status}`)
+    }
+    
+    const data = await response.json()
+    // Response is already extracted by proxy (extractNestedData: 'invitations')
+    // So data is either the array directly or { invitations: [...] }
+    if (Array.isArray(data)) {
+      return data
+    }
+    return data.invitations || []
+  } catch (error: any) {
+    if (error.name === 'AbortError') {
+      throw new Error('Request timeout: Team service is not responding')
+    }
+    throw error
   }
-  const data = await response.json()
-  return data.invitations || []
 }
 
 async function inviteUser(input: InviteUserInput): Promise<{ invitation: TeamInvitation; token?: string }> {
@@ -120,13 +162,21 @@ export function useTeamMembers() {
   return useQuery({
     queryKey: ['team', 'members'],
     queryFn: fetchTeamMembers,
+    retry: 1,
+    retryDelay: 2000,
+    staleTime: 30000, // 30 seconds
+    gcTime: 5 * 60 * 1000, // 5 minutes
   })
 }
 
 export function useInvitations() {
   return useQuery({
     queryKey: ['team', 'invitations'],
     queryFn: fetchInvitations,
+    retry: 1,
+    retryDelay: 2000,
+    staleTime: 30000, // 30 seconds
+    gcTime: 5 * 60 * 1000, // 5 minutes
   })
 }
 

frontend/next.config.ts

@@ -41,9 +41,10 @@ const nextConfig: NextConfig = {
   // Ensure CSS is properly compiled with Tailwind v4
   experimental: {
     optimizeCss: true,
-    // Enable instrumentation hook for Sentry
-    instrumentationHook: true,
   },
+  // Set output file tracing root to match turbopack root
+  // This ensures consistent behavior between webpack and turbopack
+  outputFileTracingRoot: frontendRoot,
   // Transpile shared package for Next.js
   transpilePackages: ['@syntera/shared'],
   // Image optimization configuration