Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 17 commits into
base: develop
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
fa11a93
feat: check if robot is running
amhsirak Jan 24, 2025
7328ec3
feat: route to check if robot is running
amhsirak Jan 24, 2025
0093340
feat: notify on robot run after page reload
amhsirak Jan 24, 2025
31840c8
feat: update status as true on run creation
amhsirak Jan 24, 2025
3fe2033
feat: emit run completed socket event
amhsirak Jan 24, 2025
5d636ad
feat: execute robot run as a seperate job
RohitR311 Jan 25, 2025
1a55090
feat: add support to execute manual run
RohitR311 Jan 25, 2025
f957a7c
feat: rm readyRunHandler
RohitR311 Jan 25, 2025
058d512
Merge pull request #391 from RohitR311/reload-fix
amhsirak Jan 25, 2025
9d3c55b
feat: rm local storage run info
RohitR311 Jan 27, 2025
302ccd1
feat: revert browser id changes
RohitR311 Jan 27, 2025
de2d828
feat: modify worker to handle manual run
RohitR311 Jan 27, 2025
279612d
feat: handle robot run for workers
RohitR311 Jan 27, 2025
13d52a4
feat: emit socket event to display run status
RohitR311 Jan 28, 2025
8c0a832
feat: notify on page reload
RohitR311 Jan 28, 2025
e077306
Merge branch 'develop' into reload-fix
RohitR311 Feb 4, 2025
8bb2ed3
feat: add robot met id in local storage
RohitR311 Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions server/src/browser-management/classes/BrowserPool.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ interface BrowserPoolInfo {
* @default false
*/
active: boolean,

isRobotRun?: boolean;
}

/**
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -97,4 +113,4 @@ export class BrowserPool {
logger.log('warn', `No active browser in the pool`);
return null;
};
}
}
4 changes: 2 additions & 2 deletions server/src/browser-management/controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -154,4 +154,4 @@ export const stopRunningInterpretation = async () => {
} else {
logger.log('error', 'Cannot stop interpretation: No active browser or generator.');
}
};
};
14 changes: 13 additions & 1 deletion server/src/routes/record.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand All @@ -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();
});
Comment on lines +37 to +45
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Race condition risk confirmed in browser pool management

The current implementation of BrowserPool lacks proper synchronization mechanisms. Multiple concurrent requests could potentially pass the hasActiveRobotRun check before any of them sets the robot run state, as the operations are not atomic. While Node.js's event loop provides some protection, it's not guaranteed to be safe in high-concurrency scenarios.

Suggested improvements:

  • Implement proper locking mechanism or semaphore for robot run state changes
  • Consider using atomic operations for state transitions
  • Add request queuing to serialize the robot run initialization
🔗 Analysis chain

Preventing parallel sessions on robot runs.

Blocking new browser sessions when hasActiveRobotRun is true is a solid approach. For high-traffic scenarios, consider if multiple requests might pass this check simultaneously (race condition) before the run is registered. If needed, use a lock or queue to serialize these events and avoid edge cases.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Gather usage references to see how `hasActiveRobotRun` is being checked.
rg -A 4 "hasActiveRobotRun"

Length of output: 878

Script:

#!/bin/bash
# Find where robot runs are initiated and how isRobotRun is set
ast-grep --pattern 'isRobotRun = true'
rg -B 2 -A 4 "isRobotRun.*=.*true"

# Look for any synchronization mechanisms
rg -i "lock|mutex|semaphore|atomic"

Length of output: 3944

Script:

#!/bin/bash
# Get the complete BrowserPool implementation
cat server/src/browser-management/classes/BrowserPool.ts

# Find robot run related code
rg -B 2 -A 4 "robotRun|robot.*run"

Length of output: 14625



/**
* GET endpoint for starting the remote browser recording session.
* returns session's id
Expand Down Expand Up @@ -131,4 +143,4 @@ router.get('/interpret', requireSignIn, async (req, res) => {
router.get('/interpret/stop', requireSignIn, async (req, res) => {
await stopRunningInterpretation();
return res.send('interpretation stopped');
});
});
4 changes: 3 additions & 1 deletion server/src/workflow-management/classes/Interpreter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,8 @@ export class WorkflowInterpreter {
}, {})
}

this.socket.emit('run-completed', "success");

logger.log('debug', `Interpretation finished`);
this.clearState();
return result;
Expand All @@ -354,4 +356,4 @@ export class WorkflowInterpreter {
this.socket = socket;
this.subscribeToPausing();
};
}
}
77 changes: 70 additions & 7 deletions src/pages/MainPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
notify('success', t('main_page.notifications.interpretation_success', { name: runningRecordingName }));
} else {
notify('success', t('main_page.notifications.interpretation_failed', { name: runningRecordingName }));
// destroy the created browser
await stopRecording(browserId);
}
// if (interpretation) {
// notify('success', t('main_page.notifications.interpretation_success', { name: runningRecordingName }));
// } else {
// notify('success', t('main_page.notifications.interpretation_failed', { name: runningRecordingName }));
// // destroy the created browser
// await stopRecording(browserId);
// }
if (!interpretation) await stopRecording(browserId);
}
setRunningRecordingName('');
setCurrentInterpretationLog('');
Expand All @@ -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}`, {
Expand All @@ -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 }));
Expand All @@ -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');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Use identical function references to remove socket listeners.
Calling socket.off('run-completed', () => ...) with a new inline arrow function won’t remove the original listener. This can lead to memory leaks or multiple event fires. Store the listener in a variable and pass the same reference to both on and off.

- socket.on('run-completed', (status) => { ... });
- socket.off('run-completed', () => { ... });
+ const handleRunCompleted = (status) => { ... };
+ socket.on('run-completed', handleRunCompleted);
+ socket.off('run-completed', handleRunCompleted);

Committable suggestion skipped: line range outside the PR's diff.

}
}, [runningRecordingName, sockets, ids, readyForRunHandler, debugMessageHandler])

Expand All @@ -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');
};
}
}, []);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Ensure cleanup functions use the same listener references.
Inside the useEffect, the cleanup relies on arrow callbacks that differ from those in socket.on(...). Reacting to new runs or re-renders may result in unremoved listeners. As with line 130, store references to your event handlers, then pass them consistently to on and off.


const DisplayContent = () => {
switch (content) {
case 'robots':
Expand Down