第一章：前端日志监控体系概述

1.1：为什么要搭建自己的前端监控体系

市面上可选的前端日志监控系统有很多，比如：webfunny, fundebug等，我们可以到它们的网站上注册一个账号，很方便的接入这些第三方的前端日志体系。

但是，天下没有免费的午餐，除了基础的功能之外，使用的项目数量多少及时间长短都是需要付费的。

对于一个公司来说，如果项目数量很多，需要的功能很多，那么成本就会不知不觉增加很多。

此外，如果我们使用了第三方的监控系统，除非我们使用了私有化部署，否则我们项目产生的数据将会存储在第三方的数据库上，不在自己的数据库，多多少少会有些安全上的隐患。当然，最重要的是，即便进行了私有化部署，那么也是需要花钱的。

对于开发者来说，如果我们把公司内部前端监控的需求大致梳理清楚，基于我们技术团队自身的技术能力，以及我们梳理出来的需求，我们完全可以开发一套适应公司业务需求的前端监控体系。

一来为公司节约了成本，二来锻炼了自己的编码能力，同时也将公司正在运行中的项目统一纳入了规范的监管之中。

一石三鸟，何乐而不为呢？

1.2 前端监控体系包含哪些方面

我们可以从两方向思考这个问题： ●监控什么 ●如何监控 监控什么是指我们要监控的应用是什么样的应用。比如：web应用、小程序、客户端应用，或者node应用。 监控什么从另个层次上还可以理解为具体监控应用的哪些信息，对于应用程序来讲，我们通常需要监控代码的一下信息： ●代码运行错误 ●应用界面的加载性能 ●某个时刻的内存消耗 ●用户的操作行为 ●应用的访问量 PV \ UV ●等等 当然，不同应用、或者不同平台的应用监控的内容多少会有些不同，但只要我们能实现对上述问题的监控，其他需要监控的内容，我们都可以用类似的方式实现。

1.3 实现前端监控体系需要了解哪些知识

了解了前端监控体系包含的内容之后，我们就可以根据这些内容去整理我们实现监控体系所需的知识。

例如，我们需要监控js运行错误。那么我们需要对JS常见的运行错误有非常深刻的理解，JS中常见的错误可以分为四种：

• uncaught error 。这种错误通常情况下发生在我们的开发过程中。理论上不需要我们进行上报。
• runtime error。 运行时错误，这种错误会触发window.onerror事件，我们可以通过监听onerror事件，获取相关的信息进行上报。
• 资源错误。例如图片简直失败，js文件加载失败等，它也会触发onerror事件。
• 四是unhandledregection错误，这种错误由promise触发，我们可以监听onunhandledrejection方法获取相关信息进行上报。

以上是监控代码运行错误我们需要了解的一些内容，除此之外，我们通常还需要监控接口的请求情况。比如，什么时间请求了什么接口，这个接口什么时间发起的请求，请求结果什么时候返回，接口请求的过程消耗了多长时间，接口返回的状态及数据是什么？

想要实现对接口的监控，就需要我们对XMLHttpRequest对象有非常深刻的理解。假设我们要实现对接口的监控，我们需要监控XMLHttpRequest对象的哪些具体的方法，如何监控请求的开始以及结束，如何计算接口花费的时间等等，这些都是我们需要考虑的问题。

另外，对页面上用户行为的监控，也是我们需要考虑的问题之一，如何实现对用户行为的监控，也需要我们了解相关的知识。

还有对页面性能的监控，我们需要了解性能相关的指标，比如：

• First paint 页面导航与浏览器将该网页的第一个像素渲染到屏幕上所用的间时，渲染是任何与输入网页导航前的屏幕上的内容不同的内容。
• First meaningful paint 页面完成布局后，加载了web 字体。
• First contentFul paint （FCP）是浏览器从DOM中呈现第一位内容，向用户提供页面实际加载的第一个反馈。First Contentful Paint时间戳是浏览器首次渲染任何文本、图像（包括背景图像）、视频、已绘制到的画布或非空SVG的时间。这排除了iframes的任何内容，但包括带有挂起的Web字体的文本。这是用户第一次开始使用页面内容。

此外，还要统计用户行为相关的内容，我们需要了解用户触发了哪些事件，用户在这个界面停留了多长时间，这个也面被多少用户访问过，访问的次数是多少等等。

这些都需要我们对特定的知识点有一定的了解才能写出相关的统计方法去进行统计。