Common Problems

This guide covers common issues you may encounter when using SSR rendering and how to resolve them.

Server Performance Issues

Problem: Server becomes slow or unresponsive

Symptoms:

• Long response times for video processing
• Server crashes under load
• Memory usage spikes
• CPU usage at 100%

Solutions:

1. Optimize concurrent processing:

   const renderer = new SSRRenderer({
     maxConcurrent: 3, // Reduce from default
     queueTimeout: 30000
   });

2. Implement resource limits:

   const renderer = new SSRRenderer({
     memoryLimit: '2GB',
     cpuLimit: 2,
     tempDir: '/tmp/video-processing'
   });

3. Add monitoring and auto-scaling:

   • Monitor server resources
   • Implement auto-scaling based on load
   • Use load balancers for multiple instances

Memory Leaks

Problem: Server memory usage increases over time

Symptoms:

• Memory usage grows continuously
• Server restarts required frequently
• Temporary files not cleaned up
• Video processing fails after extended use

Solutions:

1. Implement proper cleanup:

   renderer.on('render:complete', async (jobId, result) => {
     // Clean up temporary files
     await renderer.cleanup(jobId);
   });
   
   renderer.on('render:error', async (jobId, error) => {
     // Clean up on error too
     await renderer.cleanup(jobId);
   });

2. Set up automatic cleanup:

   // Clean up old temporary files every hour
   setInterval(async () => {
     await renderer.cleanupOldFiles(3600000); // 1 hour
   }, 3600000);

3. Monitor memory usage:

   const used = process.memoryUsage();
   console.log(`Memory usage: ${Math.round(used.heapUsed / 1024 / 1024)} MB`);

Hydration Mismatches

Problem: Client-side hydration doesn't match server output

Symptoms:

• React hydration warnings in console
• UI inconsistencies between server and client
• Video player not working after hydration
• JavaScript errors after page load

Solutions:

1. Ensure consistent rendering:

   // Use the same video data on server and client
   const videoData = await getVideoData(); // Same source for both
   
   return (
     <VideoEditor 
       videoData={videoData}
       key={videoData.id} // Force re-render if data changes
     />
   );

2. Handle loading states:

   const [isHydrated, setIsHydrated] = useState(false);
   
   useEffect(() => {
     setIsHydrated(true);
   }, []);
   
   if (!isHydrated) {
     return <div>Loading...</div>;
   }

3. Use suppressHydrationWarning for dynamic content:

   <div suppressHydrationWarning>
     {new Date().toLocaleTimeString()}
   </div>

CORS Issues

Problem: Cross-origin requests blocked

Symptoms:

• CORS errors in browser console
• Video processing requests fail
• API calls blocked by browser
• Mixed content warnings

Solutions:

1. Configure CORS on server:

   const cors = require('cors');
   
   app.use(cors({
     origin: ['http://localhost:3000', 'https://yourdomain.com'],
     credentials: true,
     methods: ['GET', 'POST', 'PUT', 'DELETE'],
     allowedHeaders: ['Content-Type', 'Authorization']
   }));

2. Handle preflight requests:

   app.options('/api/render', cors());
   app.post('/api/render', cors(), async (req, res) => {
     // Your rendering logic
   });

3. Use proxy in development:

   // In your React app's package.json
   {
     "proxy": "http://localhost:3001"
   }

Caching Issues

Problem: Cached videos not updating or serving correctly

Symptoms:

• Old video versions served from cache
• Cache not working as expected
• Storage space issues
• Inconsistent cache behavior

Solutions:

1. Implement proper cache invalidation:

   const renderer = new SSRRenderer({
     enableCaching: true,
     cacheTTL: 3600,
     cacheKey: (input, settings) => {
       return `${input}-${JSON.stringify(settings)}`;
     }
   });
   
   // Invalidate cache when needed
   await renderer.invalidateCache(cacheKey);

2. Set up cache monitoring:

   renderer.on('cache:hit', (key) => {
     console.log(`Cache hit: ${key}`);
   });
   
   renderer.on('cache:miss', (key) => {
     console.log(`Cache miss: ${key}`);
   });

3. Configure cache storage:

   const renderer = new SSRRenderer({
     cacheDir: '/var/cache/video-editor',
     maxCacheSize: '10GB',
     cleanupInterval: 3600000 // 1 hour
   });

Debugging Tips

Enable Detailed Logging

const renderer = new SSRRenderer({
  logLevel: 'debug',
  enableMetrics: true
});

renderer.on('log', (level, message, data) => {
  console.log(`[${level}] ${message}`, data);
});

Monitor Server Resources

const os = require('os');

setInterval(() => {
  const cpuUsage = os.loadavg();
  const memUsage = process.memoryUsage();
  
  console.log('CPU Load:', cpuUsage);
  console.log('Memory Usage:', Math.round(memUsage.heapUsed / 1024 / 1024), 'MB');
}, 30000);

Common Error Codes

• ENOENT: File not found - check file paths
• EACCES: Permission denied - check file permissions
• ENOSPC: No space left - check disk space
• ECONNRESET: Connection reset - check network
• ETIMEDOUT: Request timeout - increase timeouts

Getting Help

If you're still experiencing issues:

1. Check the server logs for detailed error messages
2. Verify all dependencies are properly installed
3. Test with a minimal configuration
4. Check system resources and limits
5. Contact support with specific error messages and logs