fix the problem doesn't allow for screenshot

Author: pengyu

docker/project-base-image/Dockerfile

@@ -5,12 +5,14 @@ WORKDIR /app
 # Pre-install common frontend dependencies to speed up project startup
 RUN npm install -g npm@latest vite@latest
 
-# Create a non-root user to run the app
-RUN groupadd -r appuser && useradd -r -g appuser -m appuser
-RUN chown -R appuser:appuser /app
+#TODO: Uncomment this when we have a non-root usr (Allen)
+# #Create a non-root user to run the app
+# RUN groupadd -r appuser && useradd -r -g appuser -m appuser
+# RUN chown -R appuser:appuser /app
+# RUN chmod -R u+w /app
 
-# Switch to non-root user for security
-USER appuser
+# # Switch to non-root user for security
+# USER appuser
 
 EXPOSE 5173
 

frontend/src/app/api/screenshot/route.ts

@@ -14,6 +14,8 @@ async function getBrowser(): Promise<Browser> {
       protocolTimeout: 240000,
       args: ['--no-sandbox', '--disable-setuid-sandbox'],
     });
+  } else {
+    logger.info('Reusing existing browser instance...');
   }
   return browserInstance;
 }
@@ -24,45 +26,51 @@ export async function GET(req: Request) {
   let page = null;
 
   if (!url) {
+    logger.warn('No URL provided in query parameters');
     return NextResponse.json(
       { error: 'URL parameter is required' },
       { status: 400 }
     );
   }
 
+  logger.info(`Starting screenshot for URL: ${url}`);
+
   try {
     // Get browser instance
     const browser = await getBrowser();
+    logger.info('Browser instance acquired');
 
     // Create a new page
     page = await browser.newPage();
+    logger.info('New page created');
 
-    // Set viewport to a reasonable size
-    await page.setViewport({
-      width: 1600,
-      height: 900,
-    });
+    // Set viewport
+    await page.setViewport({ width: 1600, height: 900 });
+    logger.info('Viewport set to 1600x900');
 
-    // Navigate to URL with increased timeout and more reliable wait condition
+    // Navigate to the URL
+    logger.info(`Navigating to URL: ${url}`);
     await page.goto(url, {
-      waitUntil: 'domcontentloaded', // Less strict than networkidle0
-      timeout: 60000, // Increased timeout to 60 seconds
+      waitUntil: 'domcontentloaded',
+      timeout: 60000,
     });
+    logger.info('Page loaded (DOMContentLoaded)');
 
-    await new Promise((resolve) => setTimeout(resolve, 2000)); // Waits for 2 seconds
+    // Extra wait for rendering
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    logger.info('Waited 2 seconds for rendering');
 
     // Take screenshot
     const screenshot = await page.screenshot({
       type: 'png',
       fullPage: true,
     });
+    logger.info('Screenshot captured');
 
-    // Always close the page when done
-    if (page) {
-      await page.close();
-    }
+    // Clean up
+    if (page) await page.close();
+    logger.info('Page closed');
 
-    // Return the screenshot as a PNG image
     return new Response(screenshot, {
       headers: {
         'Content-Type': 'image/png',
@@ -72,24 +80,24 @@ export async function GET(req: Request) {
   } catch (error: any) {
     logger.error('Screenshot error:', error);
 
-    // Ensure page is closed even if an error occurs
     if (page) {
       try {
         await page.close();
+        logger.info('Closed page after error');
       } catch (closeError) {
         logger.error('Error closing page:', closeError);
       }
     }
 
-    // If browser seems to be in a bad state, recreate it
     if (
-      error.message.includes('Target closed') ||
-      error.message.includes('Protocol error') ||
-      error.message.includes('Target.createTarget')
+      error.message?.includes('Target closed') ||
+      error.message?.includes('Protocol error') ||
+      error.message?.includes('Target.createTarget')
     ) {
       try {
         if (browserInstance) {
           await browserInstance.close();
+          logger.warn('Browser instance was closed due to protocol error');
           browserInstance = null;
         }
       } catch (closeBrowserError) {
@@ -104,12 +112,12 @@ export async function GET(req: Request) {
   }
 }
 
-// Handle process termination to close browser
+// Gracefully close the browser when the process exits
 process.on('SIGINT', async () => {
   if (browserInstance) {
-    logger.info('Closing browser instance...');
+    logger.info('SIGINT received. Closing browser instance...');
     await browserInstance.close();
     browserInstance = null;
   }
   process.exit(0);
-});
+});

frontend/src/components/chat/code-engine/project-context.tsx

@@ -635,8 +635,9 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
 
         const blob = new Blob([arrayBuffer], { type: 'image/png' });
         const file = new File([blob], 'screenshot.png', { type: 'image/png' });
+        
+        //change to true work 
 
-        if (isMounted.current) {
           logger.debug(`[screenshot] Calling mutation to update photoUrl for Project ${projectId}`);
           await updateProjectPhotoMutation({
             variables: {
@@ -647,7 +648,7 @@ export function ProjectProvider({ children }: { children: ReactNode }) {
             },
           });
           logger.debug(`[screenshot] photoUrl updated successfully for Project ${projectId}`);
-        }
+        
       } catch (error) {
         logger.error(`[screenshot] Error for Project ${projectId}:`, error);
       } finally {