[Bug] Instant "Task aborted" error when executing tasks via MCP due to React re-render & PageAgent disposal

[waynez]

What happened? / 问题描述

Problem Description

When executing browser tasks through the page-agent MCP server, the task immediately fails with a "Task failed. Task aborted" error.

In the browser console of the Page Agent Hub, we can see the log:

Disposing PageAgent...
background.js:29 [RemotePageController.background] Error: Could not establish connection. Receiving end does not exist.

Root Cause Analysis

The root cause lies in a race condition between the imperative execution cycle of the Agent and the declarative lifecycle of React hooks inside the Chrome Extension.

1. MCP passes config on every execution: Inside @page-agent/mcp/src/index.js, every time execute_task is triggered, the MCP client sends the LLM environment configuration (e.g. LLM_BASE_URL, LLM_API_KEY) to the Hub via WebSocket:

const config = Object.keys(llmConfig).length > 0 ? llmConfig : undefined;
const result = await hub.executeTask(task, config);

2. Hub WS handler immediately triggers re-configuration: In useHubWs.ts (or hub-DUJlnjFc.js), when the WebSocket receives the execute event, it calls configure first, followed by execute(task):

onExecute: async (task, incomingConfig) => {
    const { execute, configure, config } = latestRef.current;
    if (incomingConfig) await configure({ ...config, ...incomingConfig }); // 1. Updates state asynchronously
    const result = await execute(task);                                     // 2. Starts execution

3. React State update unmounts the current Agent: In useAgent.ts, the hook instantiates MultiPageAgent inside a useEffect with [config] as a dependency:

useEffect(() => {
    if (!config) return;
    const agent = new MultiPageAgent({ ...config });
    agentRef.current = agent;
    // ...
    return () => {
        agent.dispose(); // ⚠️ Run cleanup whenever config reference changes!
    };
}, [config]);

4. dispose() aborts the active task: Because configure triggers setConfig, React schedules a re-render. Since config's reference has changed, the cleanup function of the previous useEffect is immediately executed. This calls agent.dispose(), which executes this.#abortController.abort(), instantly killing the task that was just started.

How to reproduce / 如何复现

1. Install chrome extension and configure MCP in AI agent, e.g., Cursor
2. Send a command in AI agent invoking the MCP

Version

No response

Browser

Chrome: 149.0.7827.116
Extension: 1.10.0

Before submitting

• I will be polite and respectful. / 我会保持礼貌与尊重。
• I have read the Code of Conduct. / 我已阅读行为准则。
• I have searched existing issues and this is not a duplicate.

[BUKOWSKIREAL]

Can confirm this bug, and I can add an empirical verification of the root cause plus a user-side workaround.

Environment

• macOS, Chromium-based browser (extension installed from Chrome Web Store)
• @page-agent/mcp 1.12.1 (via npx), MCP client: Claude Code
• MCP config had LLM_BASE_URL / LLM_MODEL_NAME set in env

Every execute_task failed instantly with Task failed. Task aborted — including trivial read-only tasks — while get_status kept reporting { connected: true, busy: false }.

Verifying the race empirically

The root cause analysis in this issue rests on one timing assumption: that execute(task) in useHubWs's onExecute starts before React flushes the useEffect([config]) cleanup that disposes the old agent. I verified this with a minimal repro that reimplements the exact logic of useAgent.ts / hub-ws.ts / PageAgentCore's abort handling, running on the same React version the extension uses (react@19.2.7, jsdom, no mocked scheduling — real ReactDOM decides the order):

1. agent#1 created
2. --- MCP sends { type:"execute", task, config } ---
3. hub onExecute: incoming config present -> await configure(...)
4. hub onExecute: configure() resolved -> calling execute(task)
5. agent#1 execute() STARTED            <- task starts on the OLD agent
6. agent#1 dispose() called             <- React only now flushes the effect cleanup
7. agent#2 created
8. agent#1 task FAILED: "Task aborted"
9. hub sends back to MCP: {"success":false,"data":"Task aborted"}

The ordering is deterministic: setConfig at the end of configure() schedules the re-render through React's scheduler (a macrotask), while the await configure(...) continuation in onExecute is a microtask — so execute(task) always wins the race and always lands on the agent that is about to be disposed. This also explains the 100% failure rate: configure() creates a new config object reference every time, so the [config] effect re-runs (and disposes the running agent) even when the values are identical.

Control run: the same task with config: undefined (no configure() call) completes normally.

repro script (node, react@19.2.7 + jsdom)

import { JSDOM } from 'jsdom'

const dom = new JSDOM('<!doctype html><html><body><div id="root"></div></body></html>')
globalThis.window = dom.window
globalThis.document = dom.window.document
Object.defineProperty(globalThis, 'navigator', { value: dom.window.navigator, configurable: true })

const { default: React } = await import('react')
const { createRoot } = await import('react-dom/client')
const { useCallback, useEffect, useRef, useState, createElement: h } = React

// chrome.storage.local stand-in: async like the real IPC-backed API
const storageData = { llmConfig: { baseURL: 'https://demo', model: 'qwen3.5-plus' } }
const storage = {
  async get(keys) {
    await new Promise((r) => setTimeout(r, 0))
    const out = {}
    for (const k of [].concat(keys)) if (k in storageData) out[k] = storageData[k]
    return out
  },
  async set(obj) {
    await new Promise((r) => setTimeout(r, 0))
    Object.assign(storageData, obj)
  },
}

let seq = 0
const log = (msg) => console.log(`${String(++seq).padStart(2)}. ${msg}`)

// FakeAgent mirroring PageAgentCore semantics (fresh AbortController per run,
// dispose() aborts it, AbortError -> { success:false, data:'Task aborted' })
let agentCount = 0
class FakeAgent extends EventTarget {
  id = ++agentCount
  disposed = false
  #abortController = new AbortController()
  constructor() {
    super()
    log(`agent#${this.id} created`)
  }
  async execute(task) {
    if (this.disposed) throw new Error('PageAgent has been disposed.')
    this.#abortController = new AbortController()
    const signal = this.#abortController.signal
    log(`agent#${this.id} execute() STARTED: "${task}"`)
    try {
      await new Promise((resolve, reject) => {
        const t = setTimeout(resolve, 50) // stands in for the LLM fetch
        signal.addEventListener('abort', () => {
          clearTimeout(t)
          const e = new Error('aborted')
          e.name = 'AbortError'
          reject(e)
        })
      })
      log(`agent#${this.id} task COMPLETED normally`)
      return { success: true, data: 'ok' }
    } catch (error) {
      const message = error?.name === 'AbortError' ? 'Task aborted' : String(error)
      log(`agent#${this.id} task FAILED: "${message}"`)
      return { success: false, data: message }
    }
  }
  dispose() {
    log(`agent#${this.id} dispose() called (aborts controller)`)
    this.disposed = true
    this.#abortController.abort()
  }
}

// useAgent.ts, same logic
function useAgent() {
  const agentRef = useRef(null)
  const [config, setConfig] = useState(null)

  useEffect(() => {
    storage.get(['llmConfig']).then((r) => setConfig({ ...r.llmConfig }))
  }, [])

  useEffect(() => {
    if (!config) return
    const agent = new FakeAgent(config)
    agentRef.current = agent
    return () => agent.dispose()
  }, [config])

  const execute = useCallback(async (task) => agentRef.current.execute(task), [])
  const configure = useCallback(async ({ ...llmConfig }) => {
    await storage.set({ llmConfig })
    await storage.set({ advancedConfig: {} })
    setConfig({ ...llmConfig }) // always a NEW object reference
  }, [])

  return { config, execute, configure }
}

// hub-ws.ts useHubWs onExecute, same logic
let onExecuteFromHub = null
function useHubWs(execute, configure, config) {
  const latestRef = useRef({ execute, configure, config })
  useEffect(() => {
    latestRef.current = { execute, configure, config }
  })
  useEffect(() => {
    onExecuteFromHub = async (task, incomingConfig) => {
      const { execute, configure, config } = latestRef.current
      if (incomingConfig) {
        log('hub onExecute: incoming config present -> await configure(...)')
        await configure({ ...config, ...incomingConfig })
        log('hub onExecute: configure() resolved -> calling execute(task)')
      }
      const result = await execute(task)
      return { success: result.success, data: result.data }
    }
  }, [])
}

function HubApp() {
  const { config, execute, configure } = useAgent()
  useHubWs(execute, configure, config)
  return h('div', null, 'hub')
}

createRoot(document.getElementById('root')).render(h(HubApp))
await new Promise((r) => setTimeout(r, 100))
log('--- MCP sends { type:"execute", task, config } ---')
const result = await onExecuteFromHub('read the page title', {
  baseURL: 'https://example.com',
  model: 'qwen3.5-plus',
})
log(`hub sends back to MCP: ${JSON.stringify(result)}`)
process.exit(0)

Workaround for MCP users hitting this today

Remove the LLM variables from the MCP server's env so it launches with an empty config:

"page-agent": {
  "command": "npx",
  "args": ["-y", "@page-agent/mcp"],
  "env": {}
}

With an empty llmConfig, @page-agent/mcp sends config: undefined, onExecute skips the configure() call, the agent is never recreated mid-task, and tasks run normally. The extension then uses whatever is configured in its own settings (or DEMO_CONFIG), so make sure the endpoint you want is configured in the extension UI.

On the fix

The direction in #587 (dispose/create the agent synchronously inside configure() instead of in a useEffect([config]) cleanup) resolves the ordering, since by the time await configure(...) returns, agentRef.current is already the new agent. An alternative/complementary guard would be to skip configure() in onExecute when the incoming config is deep-equal to the current one — that would also stop the pointless agent teardown on every task.