Merge pull request #386 from RohitR311/browser-fix

fix: prevent page reload on run trigger to open remote browser

server/src/browser-management/classes/BrowserPool.ts

@@ -15,6 +15,8 @@ interface BrowserPoolInfo {
      * @default false
      */
     active: boolean,
+
+    isRobotRun?: boolean;
 }
 
 /**
@@ -46,17 +48,29 @@ export class BrowserPool {
      * @param browser remote browser instance
      * @param active states if the browser's instance is being actively used
      */
-    public addRemoteBrowser = (id: string, browser: RemoteBrowser, active: boolean = false): void => {
+    public addRemoteBrowser = (id: string, browser: RemoteBrowser, active: boolean = false, isRobotRun: boolean = false): void => {
         this.pool = {
             ...this.pool,
             [id]: {
                 browser,
                 active,
+                isRobotRun
             },
         }
         logger.log('debug', `Remote browser with id: ${id} added to the pool`);
     };
 
+    public hasActiveRobotRun(): boolean {
+        return Object.values(this.pool).some(info => info.isRobotRun);
+    }
+
+    public clearRobotRunState(id: string): void {
+        if (this.pool[id]) {
+            this.pool[id].isRobotRun = false;
+            logger.log('debug', `Robot run state cleared for browser ${id}`);
+        }
+    }
+
     /**
      * Removes the remote browser instance from the pool.
      * @param id remote browser instance's id
@@ -67,6 +81,8 @@ export class BrowserPool {
             logger.log('warn', `Remote browser with id: ${id} does not exist in the pool`);
             return false;
         }
+
+        this.clearRobotRunState(id);
         delete (this.pool[id]);
         logger.log('debug', `Remote browser with id: ${id} deleted from the pool`);
         return true;

server/src/browser-management/controller.ts

@@ -59,7 +59,7 @@ export const createRemoteBrowserForRun = (userId: string): string => {
     async (socket: Socket) => {
       const browserSession = new RemoteBrowser(socket);
       await browserSession.initialize(userId);
-      browserPool.addRemoteBrowser(id, browserSession, true);
+      browserPool.addRemoteBrowser(id, browserSession, true, true);
       socket.emit('ready-for-run');
     });
   return id;

server/src/routes/record.ts

@@ -16,6 +16,7 @@ import stealthPlugin from 'puppeteer-extra-plugin-stealth';
 import logger from "../logger";
 import { getDecryptedProxyConfig } from './proxy';
 import { requireSignIn } from '../middlewares/auth';
+import { browserPool } from '../server';
 
 export const router = Router();
 chromium.use(stealthPlugin());
@@ -33,6 +34,17 @@ router.all('/', requireSignIn, (req, res, next) => {
     next() // pass control to the next handler
 })
 
+router.use('/', requireSignIn, (req: AuthenticatedRequest, res: Response, next) => {
+    if (browserPool.hasActiveRobotRun()) {
+        logger.log('debug', 'Preventing browser initialization - robot run in progress');
+        return res.status(403).json({
+            error: 'Cannot initialize recording browser while a robot run is in progress'
+        });
+    }
+    next();
+});
+
+
 /**
  * GET endpoint for starting the remote browser recording session.
  * returns session's id

server/src/workflow-management/classes/Interpreter.ts

@@ -332,6 +332,8 @@ export class WorkflowInterpreter {
       }, {})
     }
 
+    this.socket.emit('run-completed', "success");
+
     logger.log('debug', `Interpretation finished`);
     this.clearState();
     return result;

src/pages/MainPage.tsx

@@ -68,13 +68,14 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
   const readyForRunHandler = useCallback((browserId: string, runId: string) => {
     interpretStoredRecording(runId).then(async (interpretation: boolean) => {
       if (!aborted) {
-        if (interpretation) {
+        // if (interpretation) {
-          notify('success', t('main_page.notifications.interpretation_success', { name: runningRecordingName }));
+        //   notify('success', t('main_page.notifications.interpretation_success', { name: runningRecordingName }));
-        } else {
+        // } else {
-          notify('success', t('main_page.notifications.interpretation_failed', { name: runningRecordingName }));
+        //   notify('success', t('main_page.notifications.interpretation_failed', { name: runningRecordingName }));
-          // destroy the created browser
+        //   // destroy the created browser
-          await stopRecording(browserId);
+        //   await stopRecording(browserId);
-        }
+        // }
+        if (!interpretation) await stopRecording(browserId);
       }
       setRunningRecordingName('');
       setCurrentInterpretationLog('');
@@ -89,6 +90,12 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
 
   const handleRunRecording = useCallback((settings: RunSettings) => {
     createRunForStoredRecording(runningRecordingId, settings).then(({ browserId, runId }: CreateRunResponse) => {
+      localStorage.setItem('runInfo', JSON.stringify({
+        browserId,
+        runId,
+        recordingName: runningRecordingName
+      }));
+
       setIds({ browserId, runId });
       const socket =
         io(`${apiUrl}/${browserId}`, {
@@ -98,6 +105,18 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
       setSockets(sockets => [...sockets, socket]);
       socket.on('ready-for-run', () => readyForRunHandler(browserId, runId));
       socket.on('debugMessage', debugMessageHandler);
+
+      socket.on('run-completed', (status) => {
+        if (status === 'success') {
+            notify('success', t('main_page.notifications.interpretation_success', { name: runningRecordingName }));
+        } else {
+            notify('error', t('main_page.notifications.interpretation_failed', { name: runningRecordingName }));
+        }
+        setRunningRecordingName('');
+        setCurrentInterpretationLog('');
+        setRerenderRuns(true);
+      });
+
       setContent('runs');
       if (browserId) {
         notify('info', t('main_page.notifications.run_started', { name: runningRecordingName }));
@@ -108,6 +127,7 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
     return (socket: Socket, browserId: string, runId: string) => {
       socket.off('ready-for-run', () => readyForRunHandler(browserId, runId));
       socket.off('debugMessage', debugMessageHandler);
+      socket.off('run-completed');
     }
   }, [runningRecordingName, sockets, ids, readyForRunHandler, debugMessageHandler])
 
@@ -122,6 +142,49 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
       });
   }
 
+  useEffect(() => {
+    const storedRunInfo = localStorage.getItem('runInfo');
+    console.log('storedRunInfo', storedRunInfo);
+
+    if (storedRunInfo) {
+      // Parse the stored info
+      const { browserId, runId, recordingName } = JSON.parse(storedRunInfo);
+      
+      // Reconnect to the specific browser's namespace
+      setIds({ browserId, runId });
+      const socket = io(`${apiUrl}/${browserId}`, {
+          transports: ["websocket"],
+          rejectUnauthorized: false
+      });
+
+      // Update component state with stored info
+      setRunningRecordingName(recordingName);
+      setSockets(sockets => [...sockets, socket]);
+
+      // Set up event listeners
+      socket.on('ready-for-run', () => readyForRunHandler(browserId, runId));
+      socket.on('debugMessage', debugMessageHandler);
+      socket.on('run-completed', (status) => {
+          if (status === 'success') {
+              notify('success', t('main_page.notifications.interpretation_success', { name: recordingName }));
+          } else {
+              notify('error', t('main_page.notifications.interpretation_failed', { name: recordingName }));
+          }
+          setRunningRecordingName('');
+          setCurrentInterpretationLog('');
+          setRerenderRuns(true);
+          localStorage.removeItem('runInfo'); // Clean up stored info
+      });
+
+      // Cleanup function
+      return () => {
+          socket.off('ready-for-run', () => readyForRunHandler(browserId, runId));
+          socket.off('debugMessage', debugMessageHandler);
+          socket.off('run-completed');
+      };
+    }
+  }, []);
+
   const DisplayContent = () => {
     switch (content) {
       case 'robots':