Fix error logging and metadata

src/components/admin/ErrorDetailsModal.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -5,6 +6,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Copy, ExternalLink } from 'lucide-react';
 import { format } from 'date-fns';
 import { toast } from 'sonner';
+import { supabase } from '@/integrations/supabase/client';
 
 interface Breadcrumb {
   timestamp: string;
@@ -39,6 +41,8 @@ interface ErrorDetailsModalProps {
 }
 
 export function ErrorDetailsModal({ error, onClose }: ErrorDetailsModalProps) {
+  // Use breadcrumbs from error object if already fetched, otherwise they'll be empty
+  const breadcrumbs = error.request_breadcrumbs || [];
   const copyErrorId = () => {
     navigator.clipboard.writeText(error.request_id);
     toast.success('Error ID copied to clipboard');
@@ -150,9 +154,9 @@ ${error.error_stack ? `Stack Trace:\n${error.error_stack}` : ''}
           </TabsContent>
 
           <TabsContent value="breadcrumbs">
-            {error.request_breadcrumbs && error.request_breadcrumbs.length > 0 ? (
+            {breadcrumbs && breadcrumbs.length > 0 ? (
               <div className="space-y-2">
-                {error.request_breadcrumbs
+                {breadcrumbs
                   .sort((a, b) => (a.sequence_order || 0) - (b.sequence_order || 0))
                   .map((crumb, index) => (
                     <div key={index} className="border-l-2 border-primary pl-4 py-2">