Initial commit - Church Music Database
This commit is contained in:
194
legacy-site/documentation/txt-files/WEBSOCKET_FINAL_FIX.txt
Normal file
194
legacy-site/documentation/txt-files/WEBSOCKET_FINAL_FIX.txt
Normal file
@@ -0,0 +1,194 @@
|
||||
╔════════════════════════════════════════════════════════════════╗
|
||||
║ WEBSOCKET ERROR FIX - FINAL RESOLUTION ✅ ║
|
||||
║ ║
|
||||
║ Issue: webpack-dev-server running alongside production ║
|
||||
║ Status: RESOLVED - December 17, 2025 ║
|
||||
╚════════════════════════════════════════════════════════════════╝
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ ROOT CAUSE IDENTIFIED │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
Multiple react-scripts dev servers were running on port 5100,
|
||||
serving the development build with webpack-dev-server embedded.
|
||||
|
||||
The production systemd service couldn't bind to port 5100, OR
|
||||
the dev server was taking priority and serving bundle.js with
|
||||
insecure WebSocket (ws://) connections on HTTPS pages.
|
||||
|
||||
Processes found:
|
||||
• PID 17302: react-scripts start
|
||||
• PID 17328: webpack-dev-server
|
||||
• PID 17418: react-scripts start
|
||||
• PID 17419: react-scripts start
|
||||
• PID 17431: webpack-dev-server
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ THE COMPLETE FIX │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
Step 1: Kill ALL development servers
|
||||
$ pkill -9 -f "react-scripts"
|
||||
$ pkill -9 -f "webpack-dev-server"
|
||||
|
||||
Step 2: Verify port 5100 is free
|
||||
$ sudo lsof -i :5100
|
||||
(Should return nothing)
|
||||
|
||||
Step 3: Start production service
|
||||
$ sudo systemctl start church-music-frontend.service
|
||||
|
||||
Step 4: Verify correct bundle
|
||||
$ curl http://localhost:5100/ | grep "\.js"
|
||||
(Should show main.6bb0b276.js, NOT bundle.js)
|
||||
|
||||
Step 5: Test HTTPS
|
||||
$ curl https://houseofprayer.ddns.net/ | grep "\.js"
|
||||
(Should show main.6bb0b276.js, NOT bundle.js)
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ VERIFICATION RESULTS │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
✅ Frontend service: Active (running)
|
||||
✅ Serving: main.6bb0b276.js (production build)
|
||||
✅ webpack-dev-server references: 0
|
||||
✅ Port 5100: Only production serve process
|
||||
✅ HTTPS: Serving correct production bundle
|
||||
✅ WebSocket error: RESOLVED
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ WHY THIS HAPPENED │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
1. Development servers started (npm start / react-scripts)
|
||||
2. Left running in background (not properly stopped)
|
||||
3. Continued serving even after production service started
|
||||
4. Multiple instances accumulated over time
|
||||
5. Production build was correct, but wrong server was used
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ SAFEGUARDS ADDED │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
Enhanced cleanup-ports.sh:
|
||||
• Now detects and kills react-scripts processes
|
||||
• Kills webpack-dev-server processes
|
||||
• Reports what was found and cleaned
|
||||
|
||||
Enhanced stop-dev-mode.sh:
|
||||
• Kills react-scripts start processes
|
||||
• Force kills webpack-dev-server (-9 signal)
|
||||
• Ensures clean shutdown
|
||||
|
||||
Enhanced start-dev-mode.sh:
|
||||
• Checks for running production services
|
||||
• Warns about conflicts
|
||||
• Kills old dev processes before starting new
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ NEVER DO THIS IN PRODUCTION │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
❌ npm start (runs webpack-dev-server)
|
||||
❌ react-scripts start (development mode)
|
||||
❌ Leaving dev servers running in background
|
||||
❌ Running dev and prod simultaneously
|
||||
|
||||
✅ npm run build (creates production bundle)
|
||||
✅ systemctl start church-music-frontend
|
||||
✅ Always stop dev servers before production
|
||||
✅ Use cleanup-ports.sh before deploying
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ QUICK TROUBLESHOOTING │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
If you see "bundle.js" error:
|
||||
|
||||
1. Kill development servers:
|
||||
$ pkill -9 -f "react-scripts"
|
||||
$ pkill -9 -f "webpack-dev-server"
|
||||
|
||||
2. Verify they're gone:
|
||||
$ ps aux | grep -E "react-scripts|webpack"
|
||||
(Should show nothing)
|
||||
|
||||
3. Restart production service:
|
||||
$ sudo systemctl restart church-music-frontend
|
||||
|
||||
4. Clear browser cache:
|
||||
• Ctrl+Shift+Delete (select "Cached images and files")
|
||||
• Or hard reload: Ctrl+Shift+R
|
||||
|
||||
5. Verify fix:
|
||||
$ curl http://localhost:5100/ | grep "\.js"
|
||||
(Should show main.*.js, NOT bundle.js)
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ AUTOMATED CLEANUP │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
Use the cleanup script:
|
||||
$ ./cleanup-ports.sh
|
||||
|
||||
This will automatically:
|
||||
• Check ports 8080 and 5100
|
||||
• Kill rogue processes
|
||||
• Clean up PID files
|
||||
• Kill development servers
|
||||
• Report all actions taken
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ BROWSER TESTING │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
1. Clear all browser data:
|
||||
• Ctrl+Shift+Delete
|
||||
• Select "Cached images and files"
|
||||
• Select "Last hour" or "All time"
|
||||
• Click "Clear data"
|
||||
|
||||
2. Force reload:
|
||||
• Windows/Linux: Ctrl+Shift+R
|
||||
• Mac: Cmd+Shift+R
|
||||
|
||||
3. Open developer console:
|
||||
• Press F12
|
||||
• Go to Console tab
|
||||
|
||||
4. Navigate to site:
|
||||
• https://houseofprayer.ddns.net
|
||||
|
||||
5. Verify:
|
||||
• No "WebSocket" errors
|
||||
• No "webpack-dev-server" errors
|
||||
• No "bundle.js" errors
|
||||
• App loads and works normally
|
||||
|
||||
┌────────────────────────────────────────────────────────────────┐
|
||||
│ CURRENT STATUS │
|
||||
└────────────────────────────────────────────────────────────────┘
|
||||
|
||||
Services:
|
||||
✅ Backend: Active (Gunicorn on port 8080)
|
||||
✅ Frontend: Active (serve on port 5100)
|
||||
✅ Production build: main.6bb0b276.js
|
||||
✅ No development servers running
|
||||
|
||||
Build Verification:
|
||||
✅ 0 webpack-dev-server references
|
||||
✅ 0 insecure WebSocket connections
|
||||
✅ Clean production bundle
|
||||
✅ Correct index.html being served
|
||||
|
||||
╔════════════════════════════════════════════════════════════════╗
|
||||
║ ✅ WEBSOCKET ERROR COMPLETELY RESOLVED ║
|
||||
║ ║
|
||||
║ The issue was NOT in the build, but in having multiple ║
|
||||
║ development servers running that served the wrong content. ║
|
||||
║ ║
|
||||
║ Solution: Kill all dev servers, use only production service ║
|
||||
╚════════════════════════════════════════════════════════════════╝
|
||||
|
||||
Next time: Always use ./cleanup-ports.sh before starting services!
|
||||
Reference in New Issue
Block a user