CIA/e-voting-system/.claude/TEST_LOGGING_QUICK_START.md

🚀 Quick Start - Test the Enhanced Logging

Time needed: 5 minutes
What you'll do: Add logging, rebuild, check console
Goal: Find the source of undefined hash error

---

Step 1: Verify Files Were Modified ✅

# Check if logging code is in place
grep -l "\[BlockchainVisualizer\]" /home/paul/CIA/e-voting-system/frontend/components/blockchain-visualizer.tsx

# Should output: /home/paul/CIA/e-voting-system/frontend/components/blockchain-visualizer.tsx

Expected: File found ✅

---

Step 2: Rebuild Frontend

cd /home/paul/CIA/e-voting-system

# Restart the frontend container
docker compose restart frontend

# Wait for it to be ready
sleep 5

echo "✅ Frontend restarted with new logging"

Expected: No errors, frontend running ✅

---

Step 3: Open Your Browser

1. Open browser (Chrome, Firefox, Edge, etc.)
2. Go to: http://localhost:3000/dashboard/blockchain
3. Press F12 to open Developer Tools
4. Click "Console" tab

Expected: Page loads, console is open ✅

---

Step 4: Select an Election

1. Look for dropdown with election names
2. Click on it (e.g., "Election Présidentielle 2025")
3. Wait for blockchain to load (5-10 seconds)
4. Watch the Console for logs

Expected: Logs appear in console ✅

---

Step 5: Look for Your Logs

Search in Console:

Press Ctrl+F and search for: [truncateHash]

You should see output like:

[BlockchainPage] Fetching blockchain for election: 1
[BlockchainPage] Fetch response status: 200
[BlockchainPage] Received blockchain data: { blocksCount: 5, ... }
[BlockchainVisualizer] Component mounted/updated { dataExists: true, ... }
[truncateHash] Called with: { hash: "genesis", type: "string", ... }
[truncateHash] Result: genesis
[truncateHash] Called with: { hash: "", type: "string", isEmpty: true, ... }
[truncateHash] Empty string received
[truncateHash] Result: N/A

---

Step 6: Check for the Problem

Look for any of these problematic entries:

[truncateHash] Called with: { hash: undefined, type: "undefined", isUndefined: true, ... }
[truncateHash] Received undefined

What this means:

• ✅ If NOT found: The fix is working! No undefined values
• ❌ If FOUND: Still getting undefined from somewhere

---

Step 7: Copy the Full Console Output

1. Right-click in console
2. Click "Save as..."
3. Save to file like console-output.txt

OR manually copy all logs:

1. Select all in console with Ctrl+A
2. Copy with Ctrl+C
3. Paste into text editor

---

📊 What Each Log Tells You

Log	Means
[BlockchainPage] Fetching...	Data is being fetched from backend ✅
Fetch response status: 200	Backend returned data successfully ✅
[BlockchainVisualizer] Component mounted	React component is rendering ✅
First block structure: { transaction_id: "genesis"... }	Data has values ✅
First block structure: { transaction_id: undefined... }	❌ Data is corrupted!
[truncateHash] Called with: { hash: "abc"... }	Working on valid hash ✅
[truncateHash] Called with: { hash: undefined... }	❌ Receiving undefined!
[truncateHash] Result: N/A	Handled empty/undefined gracefully ✅

---

🎯 Quick Checklist

• Frontend container restarted
• Opened http://localhost:3000/dashboard/blockchain
• Opened browser console (F12)
• Selected an election
• Saw logs in console
• Searched for [truncateHash]
• Found expected output
• No undefined values in truncateHash logs

---

🆘 Troubleshooting

I don't see any logs

Solution:

1. Clear browser cache: Ctrl+Shift+Del → Select "Cached images"
2. Hard refresh: Ctrl+Shift+R
3. Close and reopen console: F12
4. Check that frontend is running: docker ps

I see old logs from before rebuild

Solution:

1. Clear console: Type in console console.clear()
2. Refresh page: F5
3. Select election again

Still seeing truncateHash errors

Solution:

1. Copy the console output
2. Look at the full logs
3. Check what data is being received from backend
4. Send the logs for analysis

---

📝 What to Report

If you see truncateHash errors, copy and share:

1. The exact error message from console
2. The data structure that was logged
3. The [BlockchainPage] Received blockchain data section
4. Any undefined values you see

Example to share:

[BlockchainPage] Fetch response status: 200
[BlockchainPage] Received blockchain data: {
  blocksCount: 5,
  hasVerification: true,
  firstBlockStructure: {
    index: 0,
    transaction_id: "genesis",
    encrypted_vote: "",
    signature: ""
  }
}

[truncateHash] Called with: { hash: undefined, type: "undefined", isUndefined: true }
[truncateHash] Received undefined

---

✅ Success Criteria

✅ If you see:

[truncateHash] Result: N/A
[truncateHash] Result: abc123de...
No "undefined" entries

→ Logging is working ✅

❌ If you see:

[truncateHash] Received undefined
hash: undefined, type: "undefined"

→ Found the problem! ✅

---

🎯 Next Step

Once you've run through these steps:

1. Share the console output if you see errors
2. Confirm working if no errors
3. We can debug from there if needed

---

Time: ~5 minutes
Complexity: Simple - just observe logs
Risk: None - read-only logging
Benefit: Complete visibility into the issue

Let's find out what's happening! 🔍