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/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,
     });
   }