前端监控日志产品

前言

流量分析的监控有：百度统计、谷歌分析、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字体的文本。这是用户第一次开始使用页面内容。

还要了解一些统计学相关的知识。