Fix remaining component imports

docs/ERROR_LOGGING_COMPLETE.md

@@ -51,12 +51,40 @@ Implemented automatic breadcrumb tracking across the application:
 #### API Call Tracking (NEW)
 - Created `src/lib/supabaseClient.ts` with automatic tracking
 - Wraps Supabase client with Proxy for transparent tracking
+- **CRITICAL:** All frontend code MUST import from `@/lib/supabaseClient` (not `@/integrations/supabase/client`)
+- 175+ files updated to use wrapped client
 - Tracks:
   - Database queries (`supabase.from('table').select()`)
   - RPC calls (`supabase.rpc('function_name')`)
   - Storage operations (`supabase.storage.from('bucket')`)
 - Automatically captures success and error status codes
 
+### 4. Critical: Import Standardization ✅
+**Status:** FIXED
+
+Updated 175+ files across the application to use the wrapped Supabase client:
+
+**Before:**
+```typescript
+import { supabase } from '@/integrations/supabase/client';
+```
+
+**After:**
+```typescript
+import { supabase } from '@/lib/supabaseClient';
+```
+
+**Why This Matters:**
+- The wrapped client automatically tracks all API calls as breadcrumbs
+- Without this change, ZERO API breadcrumbs would be captured
+- This is essential for debugging - breadcrumbs show the sequence of events leading to errors
+
+**Exceptions (4 files that intentionally use base client):**
+1. `src/integrations/supabase/client.ts` - Base client definition
+2. `src/lib/supabaseClient.ts` - Creates the wrapper
+3. `src/lib/errorHandler.ts` - Uses base client to avoid circular dependencies when logging errors
+4. `src/lib/requestTracking.ts` - Uses base client to avoid infinite tracking loops
+
 ## How to Use the Enhanced System
 
 ### 1. Handling Errors
@@ -91,8 +119,8 @@ import { Button } from '@/components/ui/button';
 
 ### 3. API Calls (Automatic)
 ```typescript
-// Just use supabase normally - tracking is automatic
-import { supabase } from '@/integrations/supabase/client';
+// CRITICAL: Import from @/lib/supabaseClient (NOT @/integrations/supabase/client)
+import { supabase } from '@/lib/supabaseClient';
 
 const { data, error } = await supabase
   .from('parks')
@@ -105,6 +133,8 @@ Breadcrumbs automatically record:
 - Method: `SELECT`
 - Status: 200 or 400/500 on error
 
+**Important:** Using the wrong import (`@/integrations/supabase/client`) means NO API calls will be tracked as breadcrumbs!
+
 ### 4. Manual Breadcrumbs (When Needed)
 ```typescript
 import { breadcrumb } from '@/lib/errorBreadcrumbs';
@@ -163,6 +193,11 @@ breadcrumb.userAction('submitted', 'ContactForm', { subject: 'Support' });
 - [x] Breadcrumbs captured automatically for navigation
 - [x] Breadcrumbs captured for button clicks (when labeled)
 - [x] API calls tracked automatically
+- [x] All 175+ files updated to use wrapped client
+- [x] Verified only 4 files use base client (expected exceptions)
+- [ ] **Test error generated at `/test-error-logging`**
+- [ ] **Verify breadcrumbs contain API calls**
+- [ ] **Verify timezone and referrer fields populated**
 - [x] Error Monitoring Dashboard displays all data
 - [x] Error Details Modal shows breadcrumbs in correct order
 - [x] Error Lookup finds errors by reference ID