前言
流量分析的监控有:百度统计、谷歌分析、GrowingIo、友盟
错误统计的监控有:sentry、fundebug、frontJs、岳鹰
前端监控产品:OneApm、听云
开源的:logan web、Matomo
PS:加粗的是博主用过的,sentry还可以和Hubspot搭配使用
前端监控体系包含哪些方面
我们可以从两方向思考这个问题:
监控什么是指我们要监控的应用是什么样的应用。比如:web应用、小程序(微信公众平台有自己的日志系统,但不够强大)、客户端应用,或者node应用。
监控什么从另个层次上还可以理解为具体监控应用的哪些信息,对于应用程序来讲,我们通常需要监控代码的一下信息:
- 代码运行错误
- 应用界面的加载性能
- 某个时刻的内存消耗
- 用户的操作行为
- 应用的访问量 PV \ UV
前端监控体系
JS中常见的错误:
- uncaught error :这种错误通常情况下发生在我们的开发过程中,理论上不需要我们进行上报。
- runtime error:运行时错误,这种错误会触发
window.onerror
事件,我们可以通过监听onerror事件
,获取相关的信息进行上报。 - 资源错误:例如图片简直失败,js文件加载失败等,它也会触发
onerror事件
。 - unhandledregection:这种错误由promise触发,我们可以监听onunhandledrejection方法获取相关信息进行上报。
- 当然可能还有框架的错误,例如 vue 的
Vue.config.errorHandler
,可看我之前 vue项目如何捕获错误进行上报
监听接口:
比如,
- 请求发起的时间、响应时间、请求耗时情况;
- 请求参数和响应参数,包括请求头、方式等;
- 触发请求的信息,如网址路由,DOM节点信息;
其他:
行为监听:用户触发了哪些事件,如点击的按钮,访问的页面,停留的时长;
性能上报,如:
- First paint 页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的间时,渲染是任何与输入网页导航前的屏幕上的内容不同的内容。
- First meaningful paint 页面完成布局后,加载了web 字体。
- First contentFul paint (FCP)是浏览器从DOM中呈现第一位内容,向用户提供页面实际加载的第一个反馈。First Contentful Paint时间戳是浏览器首次渲染任何文本、图像(包括背景图像)、视频、已绘制到的画布或非空SVG的时间。这排除了iframes的任何内容,但包括带有挂起的Web字体的文本。这是用户第一次开始使用页面内容。
还要了解一些统计学相关的知识。