MyClub/DOCS/FRONTEND_404_ERRORS_FIX.md

Frontend 404 Errors - Missing Static Files

Date: October 21, 2025
Status: ⚠️ Non-Critical (Cosmetic Only)

---

🔍 Problem Summary

The frontend Nginx logs show 404 errors for missing image files. These errors don't affect functionality - they just mean placeholder/default images aren't showing up.

Missing Files:

1. /images/club-logo.png - Club logo
2. /images/club-opponent.png - Opponent team logo placeholder
3. /images/news/placeholder.jpg - News article placeholder
4. /dist/img/logo-club-empty.svg - Empty club logo SVG

---

🎯 Root Cause

These files are requested by the React frontend but:

• Not included in the Docker build (frontend/public/ directory content gets built into /usr/share/nginx/html)
• Should come from backend uploads (dynamic content) OR
• Should have fallback placeholders in the frontend build

---

✅ Solution Applied

Created placeholder files in frontend/public/ directory:

frontend/public/
├── images/
│   ├── club-logo.png (empty - to be replaced)
│   ├── club-logo-placeholder.svg ✅ Created
│   ├── club-opponent.svg ✅ Created
│   └── news/
│       ├── placeholder.jpg (empty - to be replaced)
│       └── placeholder.svg ✅ Created
└── dist/
    └── img/
        └── logo-club-empty.svg ✅ Copied from /static

---

🚀 Next Steps

1. Rebuild Frontend Container (Required to apply fix)

cd /home/tdvorak/Desktop/PROG+HTML/Fotbal/fotbal-club

# Rebuild with new placeholder files
docker-compose build frontend

# Restart to apply changes
docker-compose restart frontend

# Clear browser cache
# Ctrl+Shift+R or Cmd+Shift+R

2. Upload Real Club Images (Optional - via Admin Panel)

Once the system is running, upload proper images through:

• /admin/nastaveni - Club settings (logo upload)
• Backend will serve them via /uploads/ directory

3. Verify Fix

Check the frontend logs after rebuild:

docker logs myclub-frontend --tail 50 | grep "404"

Should see no more 404 errors for these image paths.

---

📝 Alternative: Serve Images from Backend

Instead of including static placeholders in frontend, you could:

Option A: Proxy /images/ to Backend

Edit frontend/nginx.conf to add:

# Add before the main location / block:
location /images/ {
    proxy_pass http://backend:8080/uploads/;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    # Fallback to local if backend doesn't have it
    error_page 404 = @images_fallback;
}

location @images_fallback {
    root /usr/share/nginx/html;
    try_files $uri /images/placeholder.svg =404;
}

Option B: Backend Serves Default Images

Ensure backend has an endpoint:

// In backend routes
router.GET("/uploads/images/:filename", serveImageWithFallback)

---

🐛 Nginx Warnings (Also in logs)

These warnings are harmless and can be ignored:

[warn] the "user" directive makes sense only if the master process runs with super-user privileges
[warn] duplicate MIME type "text/html"

Why they appear:

• Running Nginx as non-root user (security best practice)
• Duplicate MIME type in config (doesn't affect functionality)

To suppress (optional): Edit frontend/nginx.conf line 12 to remove duplicate text/html from gzip_types.

---

📊 Impact Assessment

Error	Impact	Priority	Status
404 club-logo.png	Logo doesn't show	Low	✅ Placeholder created
404 club-opponent.png	Opponent logo missing	Low	✅ Placeholder created
404 placeholder.jpg	News image missing	Low	✅ Placeholder created
404 logo-club-empty.svg	SVG fallback missing	Low	✅ File copied

---

🎨 Placeholder SVG Contents

The placeholders are simple, clean SVGs that show text labels:

Club Logo Placeholder:

• 200x200 gray box with "Club Logo" text
• Professional looking, not garish

Opponent Logo:

• 200x200 light gray box with "Opponent" text

News Placeholder:

• 800x400 image-sized box with "News Placeholder" text

---

✨ Benefits After Fix

1. ✅ Clean logs - No more 404 noise in frontend logs
2. ✅ Better UX - Placeholder images instead of broken image icons
3. ✅ Professional look - SVG placeholders look intentional
4. ✅ Performance - Browser stops retrying missing files

---

🔄 Production Deployment

When deploying to production:

1. Upload real club images via admin panel first
2. Rebuild frontend with this fix
3. Configure CDN (optional) to cache uploaded images
4. Set up image optimization via backend (optional)

---

📚 Related Documentation

• Frontend Docker setup: frontend/Dockerfile
• Nginx configuration: frontend/nginx.conf
• Backend uploads: internal/controllers/upload_controller.go
• Admin settings: frontend/src/pages/admin/SettingsAdminPage.tsx

---

✅ Checklist

• Placeholder files created in frontend/public/
• logo-club-empty.svg copied from /static/img/
• Frontend container rebuilt
• Browser cache cleared
• 404 errors verified as gone
• Real club images uploaded (optional)

---

Status: Fix ready - awaiting container rebuild to take effect.