JS 中怎么在 CI 环境下通过 Puppeteer 自动化捕获浏览器断点崩溃日志

胖墨小哥_5696

胖墨小哥_5696

2026-10-13

585人浏览

原创

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

js 中怎么在 ci 环境下通过 puppeteer 自动化捕获浏览器断点崩溃日志

在 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') 不覆盖这些):

Wjs Uploading Video
Wjs Uploading Video

将一个或多个视频上传至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)获取执行到哪一行——虽非断点,但能定位异常前最后活跃代码段
不需要启动 DevTools UI,也不建议在 CI 中启用 --auto-open-devtools-for-tabs。关键是把“崩溃现场”转化为结构化日志 + 可存档的上下文数据,让失败构建自带诊断能力。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4766

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1189

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4704

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

940

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1856

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3405

4

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

2023.09.12

4413

6

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

2023.09.20

2880

5

java访问控制修饰符介绍
java访问控制修饰符介绍

java访问控制修饰符有四种,分别是public、protected、private、默认访问修饰符。详细介绍:1、public,public是最宽松的访问控制修饰符,被修饰的类、方法和变量可以被任何其他类访问,当一个类、方法或变量被声明为public时,它们可以在任何地方被访问,无论是同一个包中的类还是不同包中的类;2、protected修饰符等等。

2023.09.20

928

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习