WAITLIST_SIGNUP_DEBUG_PLAN.md

Waitlist Signup Debug Plan

❌ ATTEMPTED FIX FAILED (2025-06-22)

Issue: Silent signup failures with generic "An unexpected error occurred" message masking real API errors.

Attempted Solution: Updated API and client-side error handling to surface actual error messages in /app/api/lead/route.js and /app/waitlist/[slug]/components/DynamicForm.jsx.

Result: FAILED - The changes did not resolve the signup issue. Users still cannot successfully sign up.

What Was Tried:

1. Modified API error handling to return e.message instead of generic error
2. Enhanced client-side error extraction to check data.error || data.details || data.message
3. Added detailed error logging for debugging
4. Code built successfully but problem persists

For Future Claude Sessions: The error handling improvements were implemented but did not address the core signup failure. The real issue likely lies elsewhere in the signup flow.

---

Problem Summary

• Waitlist URLs load correctly (e.g., http://vibe-list.com/waitlist/digitalseobull-g--yln)
• Signup form appears and users can enter their information
• When users click "Sign Up", spinner shows for a few seconds
• No success screen appears - signup fails silently
• Console error: Error joining waitlist: Error: An unexpected error occurred
• Additional error: POST https://www.vibe-list.com/ingest/e/?ip=1&_=1750634497612&ver=1.245.1 net::ERR_BLOCKED_BY_CLIENT

Remaining Investigation Needed

Critical Clues for Next Claude Session:

1. Analytics Blocking: The net::ERR_BLOCKED_BY_CLIENT error suggests analytics/tracking requests are being blocked, which might be interfering with the signup flow
2. Real API Testing Needed: Need to test the actual API endpoint with curl/Postman to see if it's working at all
3. Network Tab Analysis: Check the actual HTTP response status and body when signup fails
4. Database Connection: Verify if the issue is database connectivity vs application logic

Root Cause Analysis

UPDATED: The error handling fixes did not resolve the issue, suggesting the problem is deeper in the signup flow. Most likely causes are:

1. Analytics Trigger Database Errors (High Priority)

• Issue: SQL GROUP BY errors in analytics triggers cause API failures
• Location: /api/lead/route.js line ~80-90
• Evidence: Code has fallback logic to disable analytics triggers
• Impact: 500 errors during signup, but errors not shown to user

2. Client-Side Error Handling (High Priority)

• Issue: JavaScript errors not properly displayed to users
• Location: /app/waitlist/[slug]/components/DynamicForm.jsx
• Impact: API failures result in silent failures instead of error messages

3. CORS/Network Issues (Medium Priority)

• Issue: Cross-origin requests failing
• Location: API endpoint configuration
• Impact: Form submissions failing due to network/CORS problems

4. Rate Limiting False Positives (Medium Priority)

• Issue: In-memory rate limiting may trigger incorrectly
• Location: /api/lead/route.js rate limiting logic
• Impact: Legitimate signups blocked without clear error message

Debugging Steps (Execute in Order)

Phase 1: Immediate Diagnostics

Step 1: Check Browser Console Errors

# Open browser dev tools on a failing signup
# Look for:
# - JavaScript errors
# - Failed network requests (API calls)
# - CORS errors
# - 500/400/429 status codes

Step 2: Test API Endpoint Directly

# Test the lead API with curl
curl -X POST http://vibe-list.com/api/lead \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "name": "Test User",
    "waitlistId": "e0a3e3af-9a50-4463-98b0-58617c8b5219"
  }'

Step 3: Check Supabase Logs

# Check for database errors in Supabase dashboard
# Look for:
# - SQL constraint violations
# - Trigger execution errors
# - RLS policy violations

Phase 2: Code Fixes

Fix 1: Improve Error Handling in DynamicForm

File: /app/waitlist/[slug]/components/DynamicForm.jsx

Problem: Errors from API not properly displayed to users

Solution: Add comprehensive error handling:

// Add error state and display
const [error, setError] = useState(null);

// In form submission handler:
try {
  const response = await fetch('/api/lead', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData)
  });
  
  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.error || `HTTP ${response.status}`);
  }
  
  // Success handling...
} catch (error) {
  console.error('Signup error:', error);
  setError(error.message);
  setLoading(false); // Stop spinner
}

// Add error display in render:
{error && (
  <div className="error-message text-red-600 mb-4">
    {error}
  </div>
)}

Fix 2: Enhance API Error Responses

File: /api/lead/route.js

Problem: Generic error responses don't help with debugging

Solution: Add detailed error logging and responses:

// Add detailed error logging
console.error('Signup error details:', {
  error: error.message,
  waitlistId,
  email,
  timestamp: new Date().toISOString(),
  stack: error.stack
});

// Return specific error messages
if (error.message.includes('duplicate')) {
  return Response.json(
    { error: 'You are already signed up for this waitlist' },
    { status: 409 }
  );
}

if (error.message.includes('analytics')) {
  return Response.json(
    { error: 'Signup recorded but analytics update failed' },
    { status: 200 } // Still success since signup worked
  );
}

Fix 3: Add Analytics Trigger Safety

File: Database migration or /api/lead/route.js

Problem: Analytics triggers causing signup failures

Solutions:

1. Disable problematic triggers temporarily
2. Add try-catch around analytics updates
3. Make analytics updates async/optional

-- Option 1: Disable trigger temporarily
DROP TRIGGER IF EXISTS update_analytics_on_signup ON waitlist_signups;

-- Option 2: Create safer trigger
CREATE OR REPLACE FUNCTION safe_update_analytics()
RETURNS TRIGGER AS $$
BEGIN
  BEGIN
    -- Analytics update logic here
    UPDATE waitlist_analytics 
    SET total_signups = total_signups + 1
    WHERE waitlist_id = NEW.waitlist_id;
  EXCEPTION WHEN OTHERS THEN
    -- Log error but don't fail the signup
    RAISE WARNING 'Analytics update failed: %', SQLERRM;
  END;
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

Phase 3: Testing & Validation

Test 1: Manual Signup Flow

1. Open http://vibe-list.com/waitlist/digitalseobull-g--yln
2. Fill out signup form
3. Submit and monitor:
   • Browser console for errors
   • Network tab for API response
   • Success/error message display

Test 2: Database Verification

-- Check if signup was recorded despite UI failure
SELECT * FROM waitlist_signups 
WHERE email = 'your-test-email@example.com' 
ORDER BY signup_time DESC;

Test 3: Cross-Device Testing

• Test on different devices/browsers
• Test with different email addresses
• Test with various form field combinations

Phase 4: Monitoring & Prevention

Add Comprehensive Logging

// In DynamicForm.jsx - add detailed client-side logging
console.log('Form submission started:', {
  waitlistId,
  email,
  timestamp: new Date().toISOString()
});

// In /api/lead/route.js - add request logging
console.log('Signup request received:', {
  waitlistId,
  email: email.substring(0, 3) + '***', // Privacy
  userAgent: request.headers.get('user-agent'),
  origin: request.headers.get('origin')
});

Add Health Check Endpoint

// Create /api/health/route.js
export async function GET() {
  try {
    // Test database connection
    const { data } = await supabase
      .from('waitlists')
      .select('count')
      .limit(1);
      
    return Response.json({ 
      status: 'healthy', 
      database: 'connected',
      timestamp: new Date().toISOString() 
    });
  } catch (error) {
    return Response.json({ 
      status: 'unhealthy', 
      error: error.message 
    }, { status: 500 });
  }
}

❌ FAILED ATTEMPTS (Do Not Repeat)

1. Add console.error logging in DynamicForm.jsx catch blocks - COMPLETED but did not fix issue
2. Enhanced API error responses - COMPLETED but did not fix issue
3. Improved client-side error extraction - COMPLETED but did not fix issue

Next Steps for Future Claude Sessions

1. Test API endpoint directly with curl/Postman - CRITICAL FIRST STEP
2. Check browser Network tab for actual HTTP response during signup
3. Investigate analytics blocking - the ERR_BLOCKED_BY_CLIENT error may be key
4. Check Supabase logs for database errors
5. Verify database connectivity and RLS policies
6. Test with minimal payload to isolate the issue

Files Modified (That Did Not Fix The Issue)

1. /app/api/lead/route.js - Line 394: Changed error: "An unexpected error occurred" to error: e.message || "An unexpected error occurred"
2. /app/waitlist/[slug]/components/DynamicForm.jsx - Lines 239-241: Enhanced error extraction to check multiple error fields
3. /app/waitlist/[slug]/components/DynamicForm.jsx - Lines 264-268: Added detailed error logging

Expected Outcomes (If Working)

After implementing these fixes:

• Users should see specific error messages instead of generic ones
• Console should show detailed error information for debugging
• But signup failures still persist - the core issue remains unsolved

Emergency Workaround

If the issue is urgent, temporarily disable analytics triggers:

DROP TRIGGER IF EXISTS update_analytics_on_signup ON waitlist_signups;

This will allow signups to work while investigating the root cause.