在 ci 中用 puppeteer 捕获浏览器崩溃日志,核心是监听 unhandledrejection/error 事件、target.page().on('error')、cdp 的 inspector.targetcrashed 等异常,并自动截图、采集环境快照与 js 覆盖率以实现可观测性。

在 CI 环境中用 Puppeteer 捕获浏览器断点崩溃日志,核心不是“触发断点”,而是捕获未处理的 JavaScript 错误、页面崩溃、资源加载失败及 DevTools 协议级异常。CI 中无法交互式调试(如手动点暂停),所以需通过 Puppeteer 的事件监听 + 日志聚合 + 无头模式适配来实现可观测性。
监听 unhandledrejection 和 error 全局事件
这是最直接、兼容性最好的方式,能捕获绝大多数前端运行时错误:
- 在页面加载前注入脚本,监听
window.onerror和window.onunhandledrejection - 将错误序列化后通过
page.evaluate()或page.exposeFunction()发送到 Node.js 端 - 注意:CI 中常启用了
--no-sandbox和--disable-setuid-sandbox,确保错误能正常抛出
启用 Puppeteer 的 browser.on('targetcreated') + target.page().on('error')
用于捕获子页面、iframe、Service Worker 等上下文中的错误(标准 page.on('error') 不覆盖这些):
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 监听新 Target 创建,对每个 Target 获取 page 实例并绑定
'error'事件 - 配合
page.on('console')捕获console.error、console.warn输出(含堆栈) - 示例:
browser.on('targetcreated', async t => { const p = await t.page(); p?.on('error', e => console.error('[PAGE ERROR]', e)); });
通过 CDP 协议捕获更底层崩溃(如 renderer crash、OOM)
当页面白屏、卡死或进程退出时,常规 JS 错误监听会失效,需依赖 Chrome DevTools Protocol:
- 使用
await page.target().createCDPSession()获取会话 - 启用
Runtime.enable()+Debugger.enable()(可选,但不推荐在 CI 开启 Debugger,性能开销大) - 重点监听
Browser.setDownloadBehavior不相关,应关注:Target.attachedToTarget、Inspector.targetCrashed、Runtime.exceptionThrown - 特别注意:CI 容器内存受限时,
Inspector.targetCrashed常伴随Out of Memory或Renderer process crashed日志,需结合browser.process().on('exit')补充判断
生成可追溯的上下文快照(非断点,但等效定位)
CI 中无法“停在断点”,但可通过自动化快照辅助复现和归因:
- 发生错误时,自动调用
page.screenshot({ path: `error-${Date.now()}.png`, fullPage: true }) - 执行
page.evaluate(() => ({ url: location.href, title: document.title, performance: performance.getEntries() }))收集环境快照 - 导出
page.coverage.stopJSCoverage()(需先 start)获取执行到哪一行——虽非断点,但能定位异常前最后活跃代码段
--auto-open-devtools-for-tabs。关键是把“崩溃现场”转化为结构化日志 + 可存档的上下文数据,让失败构建自带诊断能力。










