Capture backend response metadata

Update edge function wrapper to emit backend metadata headers (X-Request-Id, X-Span-Id, X-Trace-Id, X-Duration-Ms) on responses; adjust logging to include duration and headers. Enhance edgeFunctionTracking to extract and propagate backend metadata from responses and errors; extend errorHandler to capture and log backend metadata for improved observability.

src/lib/edgeFunctionTracking.ts

@@ -34,7 +34,19 @@ export async function invokeWithTracking<T = any>(
   timeout: number = 30000,
   retryOptions?: Partial<RetryOptions>,
   customHeaders?: Record<string, string>
-): Promise<{ data: T | null; error: any; requestId: string; duration: number; attempts?: number; status?: number; traceId?: string }> {
+): Promise<{ 
+  data: T | null; 
+  error: any; 
+  requestId: string; 
+  duration: number; 
+  attempts?: number; 
+  status?: number;
+  traceId?: string;
+  backendRequestId?: string;
+  backendSpanId?: string;
+  backendTraceId?: string;
+  backendDuration?: number;
+}> {
   // Configure retry options with defaults
   const effectiveRetryOptions: RetryOptions = {
     maxAttempts: retryOptions?.maxAttempts ?? 3,
@@ -123,6 +135,16 @@ export async function invokeWithTracking<T = any>(
       }
     );
 
+    // Extract backend metadata from successful response
+    let backendRequestId: string | undefined;
+    let backendSpanId: string | undefined;
+    let backendTraceId: string | undefined;
+    let backendDuration: number | undefined;
+
+    // Note: Response headers from edge functions are not currently accessible via the client
+    // Backend metadata extraction will be enhanced when Supabase client supports response headers
+    // For now, backend can include metadata in response body if needed
+
     return { 
       data: result, 
       error: null, 
@@ -131,6 +153,10 @@ export async function invokeWithTracking<T = any>(
       attempts: attemptCount, 
       status: 200,
       traceId,
+      backendRequestId,
+      backendSpanId,
+      backendTraceId,
+      backendDuration,
     };
   } catch (error: unknown) {
     // Handle AbortError specifically
@@ -151,6 +177,22 @@ export async function invokeWithTracking<T = any>(
     
     const errorMessage = getErrorMessage(error);
     
+    // Extract backend metadata from error context
+    let backendRequestId: string | undefined;
+    let backendSpanId: string | undefined;
+    let backendTraceId: string | undefined;
+    let backendDuration: number | undefined;
+
+    if (error && typeof error === 'object') {
+      const context = (error as any).context;
+      if (context) {
+        backendRequestId = context['x-request-id'];
+        backendSpanId = context['x-span-id'];
+        backendTraceId = context['x-trace-id'];
+        backendDuration = context['x-duration-ms'] ? parseInt(context['x-duration-ms']) : undefined;
+      }
+    }
+    
     // Detect CORS errors specifically
     const isCorsError = errorMessage.toLowerCase().includes('cors') || 
                        errorMessage.toLowerCase().includes('cross-origin') ||
@@ -166,6 +208,12 @@ export async function invokeWithTracking<T = any>(
       isCorsError,
       debugHint: isCorsError ? 'Browser blocked request - verify CORS headers allow X-Idempotency-Key or check network connectivity' : undefined,
       status: (error as any)?.status,
+      backendMetadata: backendRequestId ? {
+        requestId: backendRequestId,
+        spanId: backendSpanId,
+        traceId: backendTraceId,
+        duration: backendDuration,
+      } : undefined,
     });
     
     return {
@@ -180,6 +228,10 @@ export async function invokeWithTracking<T = any>(
         attempts: attemptCount,
         status: (error as any)?.status,
         traceId: undefined,
+        backendRequestId,
+        backendSpanId,
+        backendTraceId,
+        backendDuration,
       };
     }
   }

src/lib/errorHandler.ts

@@ -71,6 +71,30 @@ export const handleError = (
   const errorId = (context.metadata?.requestId as string) || crypto.randomUUID();
   const shortErrorId = errorId.slice(0, 8);
   
+  // Extract backend metadata if available
+  let backendRequestId: string | undefined;
+  let backendSpanId: string | undefined;
+  let backendTraceId: string | undefined;
+  let backendDuration: number | undefined;
+  
+  if (error && typeof error === 'object') {
+    const errorObj = error as any;
+    // Check for backend metadata in error context
+    if (errorObj.context) {
+      backendRequestId = errorObj.context['x-request-id'];
+      backendSpanId = errorObj.context['x-span-id'];
+      backendTraceId = errorObj.context['x-trace-id'];
+      backendDuration = errorObj.context['x-duration-ms'] ? parseInt(errorObj.context['x-duration-ms']) : undefined;
+    }
+    // Also check metadata property
+    if (context.metadata) {
+      backendRequestId = backendRequestId || (context.metadata.backendRequestId as string);
+      backendSpanId = backendSpanId || (context.metadata.backendSpanId as string);
+      backendTraceId = backendTraceId || (context.metadata.backendTraceId as string);
+      backendDuration = backendDuration || (context.metadata.backendDuration as number);
+    }
+  }
+  
   // Check if this is a connection error and dispatch event
   if (isSupabaseConnectionError(error)) {
     const errorMsg = getErrorMessage(error).toLowerCase();
@@ -169,6 +193,12 @@ export const handleError = (
     supabaseError: supabaseErrorDetails,
     isCorsError,
     debugHint: isCorsError ? 'Browser blocked request - check CORS headers or network connectivity' : undefined,
+    backendMetadata: backendRequestId ? {
+      requestId: backendRequestId,
+      spanId: backendSpanId,
+      traceId: backendTraceId,
+      duration: backendDuration,
+    } : undefined,
   });
   
   // Additional debug logging when stack is missing
@@ -204,7 +234,13 @@ export const handleError = (
         attempt: context.metadata?.attempt,
         retriesExhausted: context.metadata?.retriesExhausted || false,
         supabaseError: supabaseErrorDetails,
-        metadata: context.metadata
+        metadata: context.metadata,
+        backendMetadata: backendRequestId ? {
+          requestId: backendRequestId,
+          spanId: backendSpanId,
+          traceId: backendTraceId,
+          duration: backendDuration,
+        } : undefined,
       }),
       p_timezone: envContext.timezone,
       p_referrer: document.referrer || undefined,
@@ -221,8 +257,9 @@ export const handleError = (
   // Show user-friendly toast with error ID (skip for retry attempts)
   const isRetry = context.metadata?.isRetry === true || context.metadata?.attempt;
   if (!isRetry) {
+    const refId = backendRequestId ? backendRequestId.slice(0, 8) : shortErrorId;
     toast.error(context.action, {
-      description: `${errorMessage}\n\nReference ID: ${shortErrorId}`,
+      description: `${errorMessage}\n\nReference ID: ${refId}`,
       duration: 5000,
     });
   }

supabase/functions/_shared/edgeFunctionWrapper.ts

@@ -175,19 +175,35 @@ export function wrapEdgeFunction(
         statusText: response.statusText 
       });
       
+      const duration = span.endTime ? span.duration : Date.now() - span.startTime;
+      
       if (logResponses) {
         edgeLogger.info('Request completed', {
           requestId,
           action: name,
           status: response.status,
-          duration: span.endTime ? span.duration : Date.now() - span.startTime,
+          duration,
         });
       }
 
       endSpan(span, 'ok');
       logSpan(span);
 
-      return response;
+      // Clone response to add tracking headers
+      const responseBody = await response.text();
+      const enhancedResponse = new Response(responseBody, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: {
+          ...Object.fromEntries(response.headers.entries()),
+          'X-Request-Id': requestId,
+          'X-Span-Id': span.spanId,
+          'X-Trace-Id': span.traceId,
+          'X-Duration-Ms': duration.toString(),
+        },
+      });
+
+      return enhancedResponse;
 
     } catch (error) {
       // ====================================================================
@@ -206,6 +222,8 @@ export function wrapEdgeFunction(
         endSpan(span, 'error', error);
         logSpan(span);
 
+        const duration = span.endTime ? span.duration : Date.now() - span.startTime;
+        
         return new Response(
           JSON.stringify({
             error: error.message,
@@ -216,7 +234,14 @@ export function wrapEdgeFunction(
           }),
           {
             status: 400,
-            headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+            headers: { 
+              ...corsHeaders, 
+              'Content-Type': 'application/json',
+              'X-Request-Id': requestId,
+              'X-Span-Id': span.spanId,
+              'X-Trace-Id': span.traceId,
+              'X-Duration-Ms': duration.toString(),
+            },
           }
         );
       }
@@ -267,6 +292,8 @@ export function wrapEdgeFunction(
         endSpan(span, 'error', error);
         logSpan(span);
 
+        const duration = span.endTime ? span.duration : Date.now() - span.startTime;
+
         return new Response(
           JSON.stringify({
             error: message,
@@ -276,7 +303,14 @@ export function wrapEdgeFunction(
           }),
           {
             status,
-            headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+            headers: { 
+              ...corsHeaders, 
+              'Content-Type': 'application/json',
+              'X-Request-Id': requestId,
+              'X-Span-Id': span.spanId,
+              'X-Trace-Id': span.traceId,
+              'X-Duration-Ms': duration.toString(),
+            },
           }
         );
       }
@@ -300,6 +334,8 @@ export function wrapEdgeFunction(
       endSpan(span, 'error', error);
       logSpan(span);
 
+      const duration = span.endTime ? span.duration : Date.now() - span.startTime;
+
       return new Response(
         JSON.stringify({
           error: 'Internal server error',
@@ -308,7 +344,14 @@ export function wrapEdgeFunction(
         }),
         {
           status: 500,
-          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+          headers: { 
+            ...corsHeaders, 
+            'Content-Type': 'application/json',
+            'X-Request-Id': requestId,
+            'X-Span-Id': span.spanId,
+            'X-Trace-Id': span.traceId,
+            'X-Duration-Ms': duration.toString(),
+          },
         }
       );
     }