Puppeteer中page.evaluate偶发长时运行如何设置超时解决

注意：你观测到的「页面无限加载时手动执行document.querySelector正常返回」，是因为浏览器页面本身的JS执行上下文始终可用，阻塞发生在Puppeteer和浏览器通信的CDP调度层——默认配置下Puppeteer会等待页面load事件触发后才调度执行evaluate传入的回调，而页面存在永远加载不完的广告、长轮询、埋点请求时，load事件永远不会触发，就会出现无限pending的情况，不是你写的选择器逻辑有问题。

• 调整点击等交互操作的等待策略，不要使用默认的waitUntil: 'load'配置，该配置会等所有页面资源（含图片、广告、第三方统计脚本）全部加载完成才resolve，遇到永远加载不完的资源就会卡住。点击操作统一改用domcontentloaded触发即可，示例：

// 原点击逻辑如果没传waitUntil配置，默认是load，改成下面的配置
await page.click(selector, {
    waitUntil: 'domcontentloaded',
    timeout: 10000 // 点击操作本身也加10秒超时
})

• 给page.evaluate包一层超时控制，用Promise.race实现，超过设定阈值直接中断，不要无限等待。包装函数示例：

/**
 * 带超时保护的evaluate执行方法
 * @param {Page} page Puppeteer页面对象
 * @param {Function} fn 要在页面上下文执行的逻辑
 * @param {number} timeout 超时阈值，单位毫秒
 * @param  {...any} args 传给页面执行函数的参数
 * @returns 
 */
async function evaluateWithTimeout(page, fn, timeout, ...args) {
    return Promise.race([
        page.evaluate(fn, ...args),
        new Promise((_, reject) => {
            setTimeout(() => reject(new Error(`page.evaluate执行超时，阈值${timeout}ms`)), timeout)
        })
    ])
}

替换原有代码即可使用：

console.log("Test");
let value = null;
try {
    // 30秒超时，可根据业务场景调整
    value = await evaluateWithTimeout(page, (sel) => {
        const element = document.querySelector(sel);
        return element ? element.innerHTML : null;
    }, 30000, selector);
} catch (err) {
    // 超时后的处理逻辑：记录日志、重试、刷新页面都可以
    console.error('执行异常:', err.message);
}
console.log("Test2");

• 从根源减少无限加载概率：开启请求拦截，直接拦截掉不需要的广告、媒体、字体、第三方统计类请求，示例：

await page.setRequestInterception(true);
page.on('request', (req) => {
    const blockResourceTypes = ['image', 'media', 'font', 'ping'];
    if (blockResourceTypes.includes(req.resourceType())) {
        return req.abort();
    }
    req.continue();
});

• 直接在带超时的包装函数里嵌入耗时统计逻辑即可——因为超时机制会打破无限pending的状态，不会出现后续逻辑几小时无法执行的问题，不管执行成功、失败还是超时，都能准确拿到耗时。改造后的包装函数如下：

async function evaluateWithTimeout(page, fn, timeout, ...args) {
    const start = Date.now();
    const taskTag = fn.name || 'anonymousEvaluate';
    try {
        const result = await Promise.race([
            page.evaluate(fn, ...args),
            new Promise((_, reject) => {
                setTimeout(() => reject(new Error('执行超时')), timeout)
            })
        ]);
        const cost = Date.now() - start;
        // 这里可以替换成你的日志上报、统计逻辑
        console.log(`[耗时统计] ${taskTag} 执行成功，耗时${cost}ms`);
        return result;
    } catch (err) {
        const cost = Date.now() - start;
        console.log(`[耗时统计] ${taskTag} 执行失败，耗时${cost}ms，错误信息：${err.message}`);
        throw err;
    }
}

• 如果不想改动每一处page.evaluate的调用代码，可以直接对原生方法做AOP切面拦截，统一注入耗时统计逻辑：

// 拿到原生evaluate方法的引用
const rawEvaluate = page.evaluate.bind(page);
// 重写page.evaluate方法
page.evaluate = async function(...args) {
    const start = Date.now();
    try {
        const res = await rawEvaluate(...args);
        console.log(`[耗时统计] page.evaluate执行成功，耗时${Date.now() - start}ms`);
        return res;
    } catch (err) {
        console.log(`[耗时统计] page.evaluate执行失败，耗时${Date.now() - start}ms，错误：${err.message}`);
        throw err;
    }
}

注意：如果不配合超时机制，直接在原生page.evaluate调用前后打时间点，遇到无限pending的场景时，结束打点的逻辑永远不会执行，根本拿不到卡住的耗时数据，必须先加超时保护。

内容的提问来源于stack exchange，提问作者Peter