现在的项目需要定位错误和性能上的优化，需要一个能够定位的功能。
自动化定位问题。包含：按需录屏上报、error事件上报，console.log/info/error代理，unhandledrejection上报，接口(ajax, fetch)异常(error,abort,非200等)上报，性能(perfermence)上报
常见前端的前端的监控方法：
- 服务器日志分析
- 客户端上报
- 自动化脚本监测
- FCP: First Contentful Paint
- FMP: First Meaningful Paint
- FI: First Interctive
- TTI: Time to Interactive
- CI: Consistently Interactive
- FPS: requestAnimationFrame
| 级别 | 单位 | 指标 | 计算方法 |
|---|---|---|---|
| page | ms | request请求耗时 | requestEnd - requestStart |
| page | ms | 解析dom树耗时 | domComplete - domInteractive |
| page | ms | 白屏时间 | responseStart - navigationStart |
| page | ms | domready时间 | domContentLoadedEventEnd - navigationStart |
| page | ms | onload时间 | LoadedEventEnd - navigationStart |
| page | ms | 首次渲染时间 | performance.getEntriesByType('paint') or performance.getEntriesByType('paint')[0].startTime |
| page | ms | TTI | domInteractive - requestStart |
| page | ms | duration时间 | performance.duration |
| page | ms | fetch duration时间 | fetch start - dataResponse |
| page | ms | onRender, onFirstAjax时间 | 拿到response data时间 - 客户端开始加载webview时间 |
时间取后7位，因头3位基本上就是当天的。
node接收 日志rsyslog，es存储， 由于本应用还是基于puppeteer进行自动化测试，国内安装chromium可能会失败，两种方案
- 更换国内Chromium源
PUPPETEER_DOWNLOAD_HOST=https://storage.googleapis.com.cnpmjs.org
npm i puppeteer
- 使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i puppeteer
利用chromium模拟打开浏览器，并访问真实地址，并将dev-tools进行截图保存，出个报告
clickhouse
不同page的performance的代码相关