# 🚨 HTTP & Session Error Logging - Implementering

## Oversigt

Udvidelse af logging systemet til at **fange og logge alle HTTP fejl, session fejl og frontend fejl** når brugere tilgår siden. Dette giver jer komplet indsigt i problemer brugere oplever.

---

## 🎯 Hvad Logges Nu

### Backend Logging:

✅ **HTTP Fejl (4xx, 5xx)**
- 404 Not Found - Broken links, manglende sider
- 403 Forbidden - Authorization fejl
- 401 Unauthorized - Authentication fejl
- 500 Server Error - Kritiske server fejl
- Alle andre HTTP fejl koder

✅ **Session Fejl**
- Udløbne sessions
- Manglende sessions på beskyttede endpoints
- Session timeout problemer

✅ **Authentication Fejl**
- Ugyldige JWT tokens
- Udløbne tokens
- Manglende authentication

✅ **Response Fejl**
- Alle responses med status >= 400
- Selvom de ikke kastes som exceptions

### Frontend Logging:

✅ **JavaScript Fejl**
- Uncaught errors
- Unhandled promise rejections
- React component errors

✅ **Network Fejl**
- Failed API calls
- Timeout errors
- Connection errors

✅ **Session Fejl fra Frontend**
- Session timeout detecteret i frontend
- Invalid session state

---

## 📁 Nye Filer

### Backend:

1. **`backend/src/middleware/httpErrorLogger.js`** ⭐
   - `httpErrorLogger` - Logger HTTP fejl (4xx, 5xx)
   - `sessionErrorLogger` - Logger session problemer
   - `authErrorLogger` - Logger authentication fejl
   - `responseErrorLogger` - Fanger error responses

2. **`backend/routes/clientErrors.js`** ⭐
   - `POST /api/client-errors` - Log JavaScript fejl fra frontend
   - `POST /api/client-errors/network` - Log network fejl fra frontend
   - `POST /api/client-errors/session` - Log session fejl fra frontend

3. **Udvidet `backend/routes/adminLogs.js`** ⭐
   - `GET /api/admin/logs/http-errors` - Se alle HTTP fejl
   - `GET /api/admin/logs/session-errors` - Se session fejl
   - `GET /api/admin/logs/user-errors/:userId` - Fejl for specifik bruger
   - `GET /api/admin/logs/stats/http-errors` - HTTP fejl statistik
   - `GET /api/admin/logs/frontend-errors` - Fejl fra frontend

### Frontend:

1. **`frontend/src/utils/errorLogger.js`** ⭐
   - Automatisk fangning af JavaScript fejl
   - Interceptor for fetch/axios network fejl
   - Manual logging funktioner

2. **`frontend/src/ErrorBoundary.js`** ⭐
   - React Error Boundary komponent
   - Automatisk fejl håndtering

---

## 🔧 Integration i unified-server.js

Middlewares er tilføjet i korrekt rækkefølge:

```javascript
// 1. Session error logger (before processing)
app.use('/api', sessionErrorLogger);

// 2. Request logger (log all requests)
app.use('/api', requestLogger);

// 3. Response error logger (capture error responses)
app.use('/api', responseErrorLogger);

// ... routes ...

// 4. 404 handler
app.use('/api/*', notFoundHandler);

// 5. Authentication error logger
app.use('/api/*', authErrorLogger);

// 6. HTTP error logger
app.use('/api/*', httpErrorLogger);

// 7. Global error handler (must be last)
app.use('/api/*', errorHandler);
```

---

## 📊 Hvad Logges i Database

### HTTP Fejl Log Eksempel:

```json
{
  "level": "WARNING",
  "context": "HTTPError",
  "category": "NOT_FOUND",
  "message": "HTTP 404: Route not found",
  "error_code": "HTTP_404",
  "request_method": "GET",
  "request_url": "/api/nonexistent",
  "request_ip": "192.168.1.100",
  "user_id": 42,
  "metadata": {
    "statusCode": 404,
    "path": "/api/nonexistent",
    "referer": "https://tilbudgivern.dk/dashboard",
    "sessionId": "abc123",
    "userAgent": "Mozilla/5.0..."
  }
}
```

### Session Fejl Log Eksempel:

```json
{
  "level": "WARNING",
  "context": "SessionExpired",
  "category": "SESSION",
  "message": "Bruger forsøgte at tilgå med udløbet session",
  "error_code": "SESSION_EXPIRED",
  "user_id": 42,
  "metadata": {
    "sessionId": "xyz789",
    "path": "/api/projects",
    "lastActivity": "2024-11-14T10:30:00Z"
  }
}
```

---

## 🚀 Brug i Frontend

### 1. Tilføj Error Boundary til App

**`src/index.js` eller `src/App.js`:**

```javascript
import ErrorBoundary from './ErrorBoundary';
import './utils/errorLogger'; // Auto-init global error handlers

function App() {
  return (
    <ErrorBoundary>
      <YourAppContent />
    </ErrorBoundary>
  );
}
```

### 2. Setup Axios Error Logging (hvis I bruger axios)

```javascript
import axios from 'axios';
import errorLogger from './utils/errorLogger';

// Setup axios interceptor
errorLogger.setupAxiosErrorLogging(axios);
```

### 3. Manuel Fejl Logging

```javascript
import errorLogger from './utils/errorLogger';

// Log custom fejl
errorLogger.logCustomError('Noget gik galt i checkout', {
  severity: 'warning',
  additionalData: { orderId: 123 }
});

// Log session fejl
errorLogger.logSessionError('SESSION_TIMEOUT', 'Session udløb under checkout');
```

---

## 📡 Nye Admin API Endpoints

### Se HTTP Fejl:

```bash
# Alle HTTP fejl
GET /api/admin/logs/http-errors

# Filtrér på status code
GET /api/admin/logs/http-errors?statusCode=404

# Med dato range
GET /api/admin/logs/http-errors?startDate=2024-11-14&endDate=2024-11-15
```

### Se Session Fejl:

```bash
GET /api/admin/logs/session-errors
```

### Se Fejl for Specifik Bruger:

```bash
GET /api/admin/logs/user-errors/42
```

### HTTP Fejl Statistik:

```bash
GET /api/admin/logs/stats/http-errors
```

Response:
```json
{
  "success": true,
  "stats": {
    "byStatusCode": [
      {
        "error_code": "HTTP_404",
        "category": "NOT_FOUND",
        "count": 45,
        "affected_users": 12
      }
    ],
    "affectedUrls": [
      {
        "url": "/api/old-endpoint",
        "error_count": 23,
        "affected_users": 8
      }
    ]
  }
}
```

### Frontend Fejl:

```bash
GET /api/admin/logs/frontend-errors
```

---

## 🔍 Use Cases

### 1. Find Broken Links (404s)

```sql
SELECT request_url, COUNT(*) as count, COUNT(DISTINCT user_id) as users
FROM system_logs 
WHERE error_code = 'HTTP_404' 
  AND created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)
GROUP BY request_url 
ORDER BY count DESC;
```

### 2. Session Timeout Problemer

```sql
SELECT DATE(created_at) as date, COUNT(*) as count
FROM system_logs 
WHERE error_code = 'SESSION_EXPIRED'
  AND created_at >= DATE_SUB(NOW(), INTERVAL 30 DAY)
GROUP BY DATE(created_at)
ORDER BY date DESC;
```

### 3. Authorization Issues

```sql
SELECT user_id, user_email, request_url, COUNT(*) as attempts
FROM system_logs 
WHERE category = 'ACCESS_DENIED'
  AND created_at >= DATE_SUB(NOW(), INTERVAL 1 DAY)
GROUP BY user_id, user_email, request_url
ORDER BY attempts DESC;
```

### 4. Mest Påvirkede Brugere

```sql
SELECT user_id, user_email, 
       COUNT(*) as error_count,
       COUNT(DISTINCT error_code) as unique_errors
FROM system_logs 
WHERE level IN ('ERROR', 'WARNING')
  AND user_id IS NOT NULL
  AND created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)
GROUP BY user_id, user_email
ORDER BY error_count DESC
LIMIT 20;
```

### 5. Frontend vs Backend Fejl

```sql
SELECT 
  CASE 
    WHEN category LIKE 'FRONTEND%' THEN 'Frontend'
    ELSE 'Backend'
  END as source,
  COUNT(*) as count
FROM system_logs 
WHERE level = 'ERROR'
  AND created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)
GROUP BY source;
```

---

## 🎨 Dashboard Eksempel (React)

```javascript
import React, { useState, useEffect } from 'react';

function ErrorDashboard() {
  const [httpErrors, setHttpErrors] = useState([]);
  const [stats, setStats] = useState({});

  useEffect(() => {
    // Hent HTTP fejl
    fetch('/api/admin/logs/http-errors?limit=50')
      .then(res => res.json())
      .then(data => setHttpErrors(data.data));

    // Hent statistik
    fetch('/api/admin/logs/stats/http-errors')
      .then(res => res.json())
      .then(data => setStats(data.stats));
  }, []);

  return (
    <div>
      <h1>Fejl Dashboard</h1>
      
      <section>
        <h2>Top HTTP Fejl</h2>
        <table>
          <thead>
            <tr>
              <th>Fejlkode</th>
              <th>Antal</th>
              <th>Påvirkede Brugere</th>
            </tr>
          </thead>
          <tbody>
            {stats.byStatusCode?.map(stat => (
              <tr key={stat.error_code}>
                <td>{stat.error_code}</td>
                <td>{stat.count}</td>
                <td>{stat.affected_users}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      <section>
        <h2>Seneste HTTP Fejl</h2>
        <ul>
          {httpErrors.map(error => (
            <li key={error.id}>
              <strong>{error.error_code}</strong>: {error.message}
              <br />
              <small>{error.request_url} - {error.created_at}</small>
            </li>
          ))}
        </ul>
      </section>
    </div>
  );
}
```

---

## 📈 Monitoring Alerts

### Setup Email Alerts (eksempel)

Tilføj til din cron job eller scheduled task:

```bash
#!/bin/bash
# check-critical-errors.sh

# Tjek for kritiske fejl i sidste time
CRITICAL_ERRORS=$(mysql -u tilbuduser -p"${DB_PASSWORD}" tilbudgivern -sN -e "
  SELECT COUNT(*) 
  FROM system_logs 
  WHERE level='ERROR' 
    AND category IN ('SERVER_ERROR', 'DATABASE')
    AND created_at >= DATE_SUB(NOW(), INTERVAL 1 HOUR)
")

if [ "$CRITICAL_ERRORS" -gt 10 ]; then
  echo "⚠️ $CRITICAL_ERRORS kritiske fejl i sidste time!" | \
    mail -s "ALERT: Mange kritiske fejl" admin@tilbudgivern.dk
fi

# Tjek for mange 404 fejl (muligt DDoS eller broken links)
NOT_FOUND=$(mysql -u tilbuduser -p"${DB_PASSWORD}" tilbudgivern -sN -e "
  SELECT COUNT(*) 
  FROM system_logs 
  WHERE error_code='HTTP_404'
    AND created_at >= DATE_SUB(NOW(), INTERVAL 1 HOUR)
")

if [ "$NOT_FOUND" -gt 100 ]; then
  echo "⚠️ $NOT_FOUND 404 fejl i sidste time!" | \
    mail -s "ALERT: Mange 404 fejl" admin@tilbudgivern.dk
fi
```

---

## ✅ Test Det

### 1. Test HTTP Fejl Logging

```bash
# Test 404
curl http://localhost:4032/api/nonexistent

# Verificer log
mysql -u tilbuduser -p"${DB_PASSWORD}" tilbudgivern -e "
  SELECT * FROM system_logs 
  WHERE error_code='HTTP_404' 
  ORDER BY created_at DESC LIMIT 1\G
"
```

### 2. Test Frontend Error Logging

Åbn browser console og kør:

```javascript
// Test JavaScript fejl
throw new Error('Test error from console');

// Test network fejl
fetch('/api/nonexistent').catch(console.error);

// Test custom fejl
import('./utils/errorLogger').then(module => {
  module.default.logCustomError('Test custom error');
});
```

### 3. Verificer Logs

```bash
# Se alle logs fra sidste time
mysql -u tilbuduser -p"${DB_PASSWORD}" tilbudgivern -e "
  SELECT id, level, category, error_code, message, created_at
  FROM system_logs 
  WHERE created_at >= DATE_SUB(NOW(), INTERVAL 1 HOUR)
  ORDER BY created_at DESC;
"
```

---

## 🎯 Benefits

✅ **Proaktiv Fejlsøgning** - Se fejl før brugere klager  
✅ **Bruger Insight** - Hvilke brugere har problemer?  
✅ **Broken Link Detection** - Find alle 404 links automatisk  
✅ **Session Monitoring** - Optimér session timeout settings  
✅ **Frontend Stability** - Se JavaScript fejl i produktion  
✅ **Network Issue Detection** - Find API problemer hurtigt  
✅ **Complete Audit Trail** - Fuld historik af alle fejl

---

## 🔐 Sikkerhed

⚠️ **VIGTIGT:**

1. **Rate Limiting** på `/api/client-errors` endpoints (for at undgå spam)
2. **Authentication** på admin endpoints i production
3. **Sanitize** user input før logging (undgå injection)

---

**Status:** ✅ Komplet implementeret  
**Testet:** ✅ Backend middlewares  
**Frontend:** ⚠️ Skal integreres i React app  
**Dato:** 14. november 2024