releasebird-javascript-sdk 1.0.58 → 1.0.62

package/.claude/settings.local.json

@@ -25,7 +25,17 @@
       "Bash(./add-ecr-policy.sh:*)",
       "Bash(aws elasticbeanstalk describe-environment-health:*)",
       "Bash(aws elasticbeanstalk describe-instances-health:*)",
-      "Bash(node -e:*)"
+      "Bash(node -e:*)",
+      "Bash(node test-compression.js:*)",
+      "Bash(node test-deployed-service.js:*)",
+      "Bash(aws elasticbeanstalk restart-app-server:*)",
+      "Bash(aws ec2 describe-instances:*)",
+      "Bash(node test-java-backend.js:*)",
+      "Read(//Users/christianzillmann/IdeaProjects/releasebook-backend/src/main/java/io/releasebook/backend/web/rest/papi/**)",
+      "Read(//Users/christianzillmann/IdeaProjects/releasebook-backend/**)",
+      "Bash(node test-full-flow.js:*)",
+      "Bash(node test-emoji-simple.js:*)",
+      "Bash(node:*)"
     ],
     "deny": [],
     "ask": []

package/NGINX_CONFIG_GUIDE.md

@@ -0,0 +1,204 @@
+# 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

package/backend-image-service/image-service/.ebextensions/04_nginx.config

@@ -0,0 +1,12 @@
+files:
+  "/etc/nginx/conf.d/proxy.conf":
+    mode: "000644"
+    owner: root
+    group: root
+    content: |
+      client_max_body_size 50M;
+      client_body_buffer_size 1M;
+
+container_commands:
+  01_reload_nginx:
+    command: "service nginx reload || true"

package/backend-image-service/image-service/.platform/nginx/conf.d/client_max_body_size.conf

@@ -0,0 +1 @@
+client_max_body_size 50M;

package/backend-image-service/image-service/Dockerfile

@@ -9,6 +9,11 @@ RUN apt-get update && apt-get install -y \
     gnupg \
     ca-certificates \
     fonts-liberation \
+    fonts-noto-color-emoji \
+    fonts-noto-cjk \
+    fonts-noto-cjk-extra \
+    fonts-dejavu-core \
+    fontconfig \
     libasound2 \
     libatk-bridge2.0-0 \
     libatk1.0-0 \
@@ -41,6 +46,12 @@ RUN npm ci --only=production
 # Copy application
 COPY server.js ./
 
+# Copy font configuration
+COPY fonts.conf /etc/fonts/local.conf
+
+# Rebuild font cache
+RUN fc-cache -fv
+
 # Expose port
 EXPOSE 3000
 

package/backend-image-service/image-service/fonts.conf

@@ -0,0 +1,39 @@
+<?xml version="1.0"?>
+<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
+<fontconfig>
+    <!-- Enable emoji rendering -->
+    <match target="pattern">
+        <test qual="any" name="family">
+            <string>sans-serif</string>
+        </test>
+        <edit name="family" mode="append" binding="weak">
+            <string>Noto Color Emoji</string>
+        </edit>
+    </match>
+
+    <match target="pattern">
+        <test qual="any" name="family">
+            <string>serif</string>
+        </test>
+        <edit name="family" mode="append" binding="weak">
+            <string>Noto Color Emoji</string>
+        </edit>
+    </match>
+
+    <match target="pattern">
+        <test qual="any" name="family">
+            <string>monospace</string>
+        </test>
+        <edit name="family" mode="append" binding="weak">
+            <string>Noto Color Emoji</string>
+        </edit>
+    </match>
+
+    <!-- Always prefer color emoji -->
+    <alias>
+        <family>emoji</family>
+        <prefer>
+            <family>Noto Color Emoji</family>
+        </prefer>
+    </alias>
+</fontconfig>

package/backend-image-service/image-service/server.js

@@ -1,10 +1,11 @@
 const express = require('express');
 const puppeteer = require('puppeteer');
+const zlib = require('zlib');
 const app = express();
 const port = process.env.PORT || 3000;
 
 // Middleware
-app.use(express.json({ limit: '50mb' })); // Large HTML payloads
+app.use(express.json({ limit: '50mb' })); // Large HTML payloads (includes compressed)
 app.use(express.urlencoded({ extended: true, limit: '50mb' }));
 
 // CORS
@@ -33,7 +34,10 @@ async function initBrowser() {
                 '--disable-accelerated-2d-canvas',
                 '--no-first-run',
                 '--no-zygote',
-                '--disable-gpu'
+                '--disable-gpu',
+                '--font-render-hinting=none',
+                '--enable-font-antialiasing',
+                '--disable-lcd-text'
             ]
         });
         console.log('[Puppeteer] Browser launched successfully');
@@ -41,18 +45,51 @@ async function initBrowser() {
     return browser;
 }
 
+/**
+ * Decompress base64-encoded gzip data
+ */
+function decompressHtml(base64CompressedHtml) {
+    try {
+        const compressedBuffer = Buffer.from(base64CompressedHtml, 'base64');
+        const decompressedBuffer = zlib.gunzipSync(compressedBuffer);
+        const html = decompressedBuffer.toString('utf-8');
+        console.log(`[Screenshot] Decompressed: ${compressedBuffer.length} -> ${html.length} bytes (${Math.round(html.length / compressedBuffer.length * 100)}%)`);
+        return html;
+    } catch (error) {
+        console.error('[Screenshot] Decompression failed:', error);
+        throw new Error('Failed to decompress HTML: ' + error.message);
+    }
+}
+
 /**
  * Render HTML to screenshot
  */
 app.post('/render', async (req, res) => {
     console.log('[Screenshot] Received render request');
 
-    const { html, width, height, url } = req.body;
-
-    if (!html) {
-        return res.status(400).json({ error: 'HTML content is required' });
+    const { html, htmlCompressed, compressed, width, height, url } = req.body;
+
+    // Handle compressed or uncompressed HTML
+    let htmlContent;
+    if (compressed && htmlCompressed) {
+        console.log('[Screenshot] Processing compressed HTML...');
+        try {
+            htmlContent = decompressHtml(htmlCompressed);
+        } catch (error) {
+            return res.status(400).json({
+                error: 'Failed to decompress HTML',
+                message: error.message
+            });
+        }
+    } else if (html) {
+        console.log('[Screenshot] Processing uncompressed HTML...');
+        htmlContent = html;
+    } else {
+        return res.status(400).json({ error: 'HTML content is required (html or htmlCompressed)' });
     }
 
+    console.log(`[Screenshot] HTML size: ${htmlContent.length} bytes`);
+
     const viewportWidth = width || 1920;
     const viewportHeight = height || 1080;
 
@@ -74,21 +111,37 @@ app.post('/render', async (req, res) => {
 
         console.log(`[Screenshot] Viewport set to ${viewportWidth}x${viewportHeight}`);
 
-        // Set content
-        await page.setContent(html, {
+        // Inject emoji font CSS into HTML
+        const emojiCSS = `
+            <style>
+                * {
+                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
+                }
+            </style>
+        `;
+
+        // Insert emoji CSS into HTML
+        let enhancedHTML = htmlContent;
+        if (htmlContent.includes('<head>')) {
+            enhancedHTML = htmlContent.replace('<head>', '<head>' + emojiCSS);
+        } else if (htmlContent.includes('<html>')) {
+            enhancedHTML = htmlContent.replace('<html>', '<html><head>' + emojiCSS + '</head>');
+        }
+
+        // Set content (using enhanced htmlContent with emoji fonts)
+        await page.setContent(enhancedHTML, {
             waitUntil: 'networkidle0', // Wait for network to be idle
             timeout: 30000
         });
 
-        console.log('[Screenshot] HTML content loaded');
+        console.log('[Screenshot] HTML content loaded with emoji font support');
 
         // Wait a bit for any animations/transitions
         await new Promise(resolve => setTimeout(resolve, 500));
 
-        // Take screenshot
+        // Take screenshot (PNG for better emoji support)
         const screenshot = await page.screenshot({
-            type: 'jpeg',
-            quality: 90,
+            type: 'png',
             fullPage: false, // Only visible viewport
             encoding: 'base64'
         });
@@ -96,7 +149,7 @@ app.post('/render', async (req, res) => {
         console.log('[Screenshot] Screenshot captured successfully');
 
         // Return as data URL
-        const dataUrl = `data:image/jpeg;base64,${screenshot}`;
+        const dataUrl = `data:image/png;base64,${screenshot}`;
 
         res.json({
             screenshot: dataUrl,

package/backend-image-service/test-compression.js

@@ -0,0 +1,120 @@
+#!/usr/bin/env node
+
+/**
+ * Test script for compression/decompression
+ * Run with: node test-compression.js
+ */
+
+const zlib = require('zlib');
+
+// Sample HTML (similar to what the frontend sends)
+const testHtml = `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        h1 {
+            color: white;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <h1>Test Screenshot with Compression</h1>
+    <p>This is a test HTML document to verify compression works correctly.</p>
+</body>
+</html>
+`;
+
+console.log('=== Compression Test ===\n');
+console.log(`Original HTML size: ${testHtml.length} bytes`);
+
+// Compress like the frontend does
+const compressed = zlib.gzipSync(Buffer.from(testHtml, 'utf-8'));
+const base64Compressed = compressed.toString('base64');
+
+console.log(`Compressed size: ${compressed.length} bytes`);
+console.log(`Base64 compressed size: ${base64Compressed.length} bytes`);
+console.log(`Compression ratio: ${Math.round(compressed.length / testHtml.length * 100)}%`);
+
+// Decompress like the backend does
+const decompressedBuffer = zlib.gunzipSync(Buffer.from(base64Compressed, 'base64'));
+const decompressed = decompressedBuffer.toString('utf-8');
+
+console.log(`\nDecompressed size: ${decompressed.length} bytes`);
+console.log(`Match: ${decompressed === testHtml ? '✅ SUCCESS' : '❌ FAILED'}`);
+
+// Test with image-service endpoint
+console.log('\n=== Testing Image Service ===\n');
+
+const http = require('http');
+
+const testPayload = {
+    htmlCompressed: base64Compressed,
+    compressed: true,
+    width: 1280,
+    height: 720,
+    url: 'http://test.local'
+};
+
+const payloadJson = JSON.stringify(testPayload);
+console.log(`Payload size: ${payloadJson.length} bytes`);
+
+const options = {
+    hostname: 'localhost',
+    port: 3000,
+    path: '/render',
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': Buffer.byteLength(payloadJson)
+    }
+};
+
+console.log('Sending request to http://localhost:3000/render...\n');
+
+const req = http.request(options, (res) => {
+    console.log(`Status: ${res.statusCode}`);
+
+    let data = '';
+
+    res.on('data', (chunk) => {
+        data += chunk;
+    });
+
+    res.on('end', () => {
+        try {
+            const response = JSON.parse(data);
+            if (response.screenshot) {
+                console.log('✅ Screenshot generated successfully!');
+                console.log(`Screenshot size: ${response.screenshot.length} characters`);
+                console.log(`Image dimensions: ${response.width}x${response.height}`);
+            } else if (response.error) {
+                console.error('❌ Error:', response.error);
+                if (response.message) {
+                    console.error('Message:', response.message);
+                }
+            }
+        } catch (e) {
+            console.error('❌ Failed to parse response:', e.message);
+            console.error('Raw response:', data);
+        }
+    });
+});
+
+req.on('error', (error) => {
+    console.error('❌ Request failed:', error.message);
+    console.error('\n⚠️  Make sure the image service is running:');
+    console.error('   cd backend-image-service/image-service');
+    console.error('   npm start');
+});
+
+req.write(payloadJson);
+req.end();

package/backend-image-service/test-deployed-service.js

@@ -0,0 +1,126 @@
+#!/usr/bin/env node
+
+/**
+ * Test deployed image service with compression
+ */
+
+const zlib = require('zlib');
+const https = require('https');
+
+const SERVICE_URL = 'https://image.releasebird.com';
+
+// Test HTML
+const testHtml = `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 40px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        h1 {
+            text-align: center;
+            font-size: 48px;
+        }
+        .box {
+            background: rgba(255,255,255,0.1);
+            padding: 20px;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <h1>✅ Deployment Successful!</h1>
+    <div class="box">
+        <h2>Backend Image Service</h2>
+        <p>Version: v20251028-193852</p>
+        <p>Compression: Enabled</p>
+    </div>
+</body>
+</html>
+`;
+
+console.log('=== Testing Deployed Image Service ===\n');
+console.log(`Service URL: ${SERVICE_URL}`);
+console.log(`Original HTML: ${testHtml.length} bytes\n`);
+
+// Compress HTML
+const compressed = zlib.gzipSync(Buffer.from(testHtml, 'utf-8'));
+const base64Compressed = compressed.toString('base64');
+
+console.log(`Compressed: ${compressed.length} bytes (${Math.round(compressed.length / testHtml.length * 100)}%)`);
+console.log(`Base64: ${base64Compressed.length} bytes\n`);
+
+// Prepare request
+const requestData = {
+    htmlCompressed: base64Compressed,
+    compressed: true,
+    width: 1280,
+    height: 720,
+    url: 'http://test.deployment.local'
+};
+
+const requestBody = JSON.stringify(requestData);
+console.log(`Request payload: ${requestBody.length} bytes\n`);
+
+const url = new URL(`${SERVICE_URL}/render`);
+const options = {
+    hostname: url.hostname,
+    port: url.port || (url.protocol === 'https:' ? 443 : 80),
+    path: url.pathname,
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': Buffer.byteLength(requestBody)
+    }
+};
+
+console.log('Sending request...\n');
+
+const req = (url.protocol === 'https:' ? https : require('http')).request(options, (res) => {
+    console.log(`Status: ${res.statusCode} ${res.statusMessage}`);
+    console.log(`Headers:`, res.headers);
+    console.log('');
+
+    let data = '';
+
+    res.on('data', (chunk) => {
+        data += chunk;
+    });
+
+    res.on('end', () => {
+        try {
+            const response = JSON.parse(data);
+
+            if (response.screenshot) {
+                console.log('✅ Screenshot generated successfully!');
+                console.log(`Screenshot data URL length: ${response.screenshot.length} characters`);
+                console.log(`Dimensions: ${response.width}x${response.height}`);
+                console.log('\n=== Test PASSED ===');
+            } else if (response.error) {
+                console.error('❌ Error from service:', response.error);
+                if (response.message) {
+                    console.error('Message:', response.message);
+                }
+                console.log('\n=== Test FAILED ===');
+            }
+        } catch (e) {
+            console.error('❌ Failed to parse response:', e.message);
+            console.error('Raw response (first 500 chars):', data.substring(0, 500));
+            console.log('\n=== Test FAILED ===');
+        }
+    });
+});
+
+req.on('error', (error) => {
+    console.error('❌ Request failed:', error.message);
+    console.log('\n=== Test FAILED ===');
+});
+
+req.write(requestBody);
+req.end();