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:

```bash
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)

```bash
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:
```bash
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:

```nginx
# 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:
```go
// In backend routes
router.GET("/uploads/images/:filename", serveImageWithFallback)
```

---

## 🐛 Nginx Warnings (Also in logs)

These warnings are **harmless** and can be ignored:

```nginx
[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

- [x] Placeholder files created in `frontend/public/`
- [x] `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.