Add comprehensive logging for add family functionality

- Backend: Log all requests with timestamps
- Backend: Log POST /api/families with validation details
- Frontend: Log fetch requests and responses
- Frontend: Better error messages with status codes
- Frontend: Handle non-JSON responses gracefully

backend/server.js

@@ -13,6 +13,15 @@ app.use(cors());
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
+// Request logging middleware
+app.use((req, res, next) => {
+  console.log(`[${new Date().toISOString()}] ${req.method} ${req.path}`);
+  if (req.method === 'POST' || req.method === 'PUT') {
+    console.log('  Body:', JSON.stringify(req.body));
+  }
+  next();
+});
+
 // Connect to MongoDB
 connectDB();
 
@@ -59,18 +68,23 @@ app.get('/api/families', async (req, res) => {
 // Create new family
 app.post('/api/families', async (req, res) => {
   try {
+    console.log('📝 POST /api/families - Creating new family');
     const { family, city, lat, lng } = req.body;
+    console.log(`  Data: ${family}, ${city}, (${lat}, ${lng})`);
     
     // Validation
     if (!family || !city || lat === undefined || lng === undefined) {
+      console.log('  ❌ Validation failed: Missing fields');
       return res.status(400).json({ 
         error: 'Missing required fields',
-        required: ['family', 'city', 'lat', 'lng']
+        required: ['family', 'city', 'lat', 'lng'],
+        received: { family: !!family, city: !!city, lat: lat !== undefined, lng: lng !== undefined }
       });
     }
     
     // Validate coordinates
     if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
+      console.log('  ❌ Validation failed: Invalid coordinates');
       return res.status(400).json({ 
         error: 'Invalid coordinates',
         message: 'Latitude must be between -90 and 90, Longitude between -180 and 180'
@@ -79,13 +93,14 @@ app.post('/api/families', async (req, res) => {
     
     const newFamily = new Family({ family, city, lat, lng });
     await newFamily.save();
+    console.log(`  ✅ Family created successfully: ${newFamily._id}`);
     
     res.status(201).json({
       message: 'Family added successfully',
       family: newFamily
     });
   } catch (error) {
-    console.error('Create family error:', error);
+    console.error('❌ Create family error:', error);
     res.status(500).json({ error: 'Failed to create family', message: error.message });
   }
 });

frontend/public/script.js

@@ -151,7 +151,10 @@ async function addFamily(event) {
   messageEl.textContent = 'Adding family...';
   messageEl.className = 'form-message info';
   
+  console.log('📝 Adding family:', { familyName, cityName, latitude, longitude });
+  
   try {
+    console.log('🌐 Sending POST request to /api/families');
     const response = await fetch('/api/families', {
       method: 'POST',
       headers: {
@@ -165,9 +168,23 @@ async function addFamily(event) {
       })
     });
     
-    const data = await response.json();
+    console.log('📡 Response status:', response.status, response.statusText);
+    console.log('📡 Response headers:', Object.fromEntries(response.headers.entries()));
+    
+    const contentType = response.headers.get('content-type');
+    let data;
+    
+    if (contentType && contentType.includes('application/json')) {
+      data = await response.json();
+      console.log('📦 Response data:', data);
+    } else {
+      const text = await response.text();
+      console.error('⚠️ Non-JSON response:', text);
+      data = { error: 'Server returned non-JSON response', details: text.substring(0, 200) };
+    }
     
     if (response.ok) {
+      console.log('✅ Family added successfully!');
       messageEl.textContent = '✅ Family added successfully!';
       messageEl.className = 'form-message success';
       
@@ -183,12 +200,13 @@ async function addFamily(event) {
         toggleAddFamilyForm();
       }, 2000);
     } else {
-      messageEl.textContent = `❌ Error: ${data.error || data.message}`;
+      console.error('❌ Server error:', data);
+      messageEl.textContent = `❌ Error (${response.status}): ${data.error || data.message || 'Unknown error'}`;
       messageEl.className = 'form-message error';
     }
   } catch (error) {
-    console.error('Add family error:', error);
+    console.error('❌ Add family error:', error);
-    messageEl.textContent = '❌ Failed to add family. Please try again.';
+    messageEl.textContent = `❌ Failed: ${error.message || 'Network error'}`;
     messageEl.className = 'form-message error';
   }
 }