# Nginx Configuration for Large Screenshot Payloads

## Problem
The backend-image-service is returning `413 Request Entity Too Large` errors because nginx is blocking large HTML payloads before they reach the backend service.

## Solution
Configure nginx to accept larger request bodies by increasing `client_max_body_size`.

---

## For backend-image-service

### Option 1: Direct nginx.conf Configuration

If you're managing nginx directly, add or update the following in your nginx configuration:

```nginx
http {
    # Set globally for all server blocks
    client_max_body_size 50M;  # Adjust size as needed (50MB recommended)

    # ... other http config ...
}
```

Or configure it per server block:

```nginx
server {
    listen 80;
    server_name your-domain.com;

    # Set for this specific server
    client_max_body_size 50M;

    location /images/screenshot/render {
        # Or set for specific location only
        client_max_body_size 50M;
        proxy_pass http://backend-image-service:3000;

        # Also consider these settings for large payloads:
        proxy_read_timeout 300s;
        proxy_connect_timeout 300s;
        proxy_send_timeout 300s;
    }
}
```

### Option 2: Docker/Kubernetes Configuration

#### Docker Compose
If using docker-compose with an nginx container:

```yaml
services:
  nginx:
    image: nginx:1.28.0
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    environment:
      - NGINX_CLIENT_MAX_BODY_SIZE=50M
```

#### Kubernetes ConfigMap
If using Kubernetes:

```yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: nginx-config
data:
  client-max-body-size: "50m"
---
apiVersion: v1
kind: ConfigMap
metadata:
  name: nginx-configuration
  namespace: ingress-nginx
data:
  proxy-body-size: "50m"
  client-max-body-size: "50m"
```

### Option 3: AWS Elastic Beanstalk

If your backend-image-service runs on Elastic Beanstalk, add `.ebextensions/nginx.config`:

```yaml
files:
  "/etc/nginx/conf.d/proxy.conf":
    mode: "000644"
    owner: root
    group: root
    content: |
      client_max_body_size 50M;
```

Or use `.platform/nginx/conf.d/proxy.conf`:

```
client_max_body_size 50M;
```

---

## Recommended Size

- **10M**: For typical web pages with moderate styling
- **25M**: For complex pages with many images and styles
- **50M**: For very large/complex pages (recommended)
- **100M**: If you experience issues even with 50M

## After Configuration

1. **Reload nginx** to apply changes:
   ```bash
   sudo nginx -s reload
   # or
   sudo systemctl reload nginx
   ```

2. **Verify the configuration**:
   ```bash
   sudo nginx -t
   ```

3. **Test with a large payload** to confirm the 413 error is resolved

---

## Frontend Changes (Already Implemented)

The JavaScript SDK now:
- ✅ Compresses HTML payloads using gzip before sending
- ✅ Sends compressed data as `htmlCompressed` (base64-encoded)
- ✅ Includes `compressed: true` flag in the request
- ✅ Falls back to uncompressed if compression is unavailable
- ✅ Logs payload sizes for debugging

## Backend Changes Required

The **backend-image-service** must be updated to handle compressed payloads:

```javascript
// Example for Node.js backend
const zlib = require('zlib');

app.post('/images/screenshot/render', (req, res) => {
    let html;

    if (req.body.compressed && req.body.htmlCompressed) {
        // Decompress the HTML
        const compressedBuffer = Buffer.from(req.body.htmlCompressed, 'base64');
        html = zlib.gunzipSync(compressedBuffer).toString('utf-8');
        console.log(`Decompressed HTML: ${compressedBuffer.length} -> ${html.length} bytes`);
    } else {
        html = req.body.html;
    }

    // Continue with screenshot rendering...
});
```

Or for Java/Spring backend:

```java
import java.util.Base64;
import java.util.zip.GZIPInputStream;

@PostMapping("/images/screenshot/render")
public ResponseEntity<?> renderScreenshot(@RequestBody ScreenshotRequest request) {
    String html;

    if (request.isCompressed() && request.getHtmlCompressed() != null) {
        // Decompress the HTML
        byte[] compressed = Base64.getDecoder().decode(request.getHtmlCompressed());
        try (GZIPInputStream gzis = new GZIPInputStream(new ByteArrayInputStream(compressed))) {
            html = new String(gzis.readAllBytes(), StandardCharsets.UTF_8);
        }
    } else {
        html = request.getHtml();
    }

    // Continue with screenshot rendering...
}
```

---

## Verification

After implementing both changes:

1. Check browser console for compression logs:
   ```
   [Screenshot] Original HTML size: 2500000 bytes
   [Screenshot] Compression: 2500000 -> 250000 bytes (10%)
   [Screenshot] Final payload size: 250500 bytes
   ```

2. Verify nginx accepts the request (no 413 error)

3. Verify backend successfully decompresses and processes the HTML
