在线项目中，需要统计用户在产品中的行为和使用情况，从用户和产品的角度了解用户群体，从而对产品进行升级迭代，使其更贴近用户。可以通过前端数据监控获取用户行为数据。另外，前端还需要实现性能监控和异常监控。性能监控包括首屏加载时间、白屏时间、http请求时间和http响应时间。异常监控包括前端脚本执行报错等。实现前端监控分三个步骤：前端埋报、数据处理、数据分析。本文针对整个前端监控设计了一个适用的解决方案。本文主要内容分为：前端监控为什么需要通用的前端监控方案？前端跟踪方案选择和前端报表方案设计总结github.com/forthealll...如果有帮助，你的star就是对我最好的鼓励~1.为什么需要前端监控？以数据为基础，指明产品优化的方向。前端监控可以分为三类：数据监控、性能监控、异常监控。让我们一一看看。(1)数据监控数据监控，顾名思义，就是对用户行为进行监控。常见的数据监控包括：PV/UV：PV（pageview），即浏览量或点击量。UV：指访问某个站点或点击某条新闻的不同IP地址的数量。用户在每个页面上的停留时间。用户使用什么门户访问网页。用户在相应页面触发的行为统计是有意义的，比如知道用户来自哪个渠道，就可以进行产品的推广，知道用户在每个页面停留的时间，对停留时间长的页面增加广告推送等.(2)性能监控性能监控是指监控前端的性能，主要包括监控网页或产品在用户端的体验。常见的性能监控数据包括：不同用户、不同机型、不同系统的首屏加载时间、白屏时间、http等请求的响应时间、静态资源整体下载时间、页面渲染时间、页面交互动画完成时间、这些性能监控结果，可以展示前端性能的好坏，并根据性能监控的结果进一步优化前端性能，比如兼容低版本浏览器的动画效果，加快加载第一个屏幕，等等。（3）异常监控另外，产品的前端代码在执行过程中也会出现异常，因此需要引入异常监控。及时报告异常情况，避免在线故障。虽然大多数异常都可以用trycatch捕获，但是像内存泄漏等偶发异常是很难捕获的。常见需要监控的异常包括：Javascript异常监控风格缺失异常监控二、前端常见埋点方案总结上一节介绍了前端监控的功能，那么如何实现前端监控，实现前端监控的步骤是：前端埋点上报，数据处理，数据分析。第一步是前端埋点上报，也就是数据采集阶段。数据采集??的丰富性和准确性会影响产品上线效果的判断结果。目前常见的前端埋点方式有代码埋点、可视埋点和无痕埋点三种。下面一一介绍每种埋点的方法。(1)代码埋入代码埋入是以嵌入代码的形式嵌入代码。比如你需要监听用户的点击事件，你会选择在用户点击的时候插入一段代码来保存监听行为或者直接将监听行为转换成某种数据格式直接传给服务器。另外，比如当需要统计产品的PV和UV时，需要在网页初始化的时候发送用户的访问信息。代码埋点的优点：可以随时准确发送或??保存所需的数据信息。缺点：工作量比较大，需要在每个组件的嵌入点添加相应的代码。(2)视觉嵌入点通过视觉交互的方式替代代码嵌入点。业务代码与埋点代码分离，提供可视化交互页面，作为业务代码录入。通过这个可视化系统，可以在业务代码中添加自定义的嵌入点事件等，最终输出的代码与业务代码耦合，埋点代码。视觉埋点听上去比较高大上，其实和代码埋点没太大区别。也就是用一个系统来实现手动插入代码埋点的过程。缺点：可视化嵌入点可嵌入的控件有限，无法手动自定义。(3)无埋点无埋点不是说不需要埋点，而是所有的埋点，前端的任何事件都绑定一个标识，所有的事件都不记录。通过定时上传记录文件，配合文件分析，分析出我们想要的数据，生成可视化报表进行专业分析，实现“无埋点”统计。从语言层面做到无埋点也很简单。比如从页面的js代码中找出dom上绑定的事件，然后进行全量埋点。无埋点优点：由于采集的是全量数据，因此在产品迭代过程中无需关注埋点逻辑，不会出现漏埋、误埋等现象。随着服务器压力的增加，无法灵活定制每个事件需要上传的数据。三、前端埋点方案选择和前端上报方案设计。点的常用方式，本文是根据需要定制我们??的埋报方案。(1)监控数据首先我们需要指定一个产品或者网页，一般需要监控上报数据。监控分为三个阶段：用户进入网页首页，用户在网页内进行交互，交互过程中报错。每个阶段需要监控上报的数据如下图所示：(2)埋点方案考虑了实际项目中上报数据的灵活定制，减轻了数据传输和服务器的压力。需要的埋点不多这种情况下，常见的方式就是埋点代码。以用户进入首页为例。首页渲染完成后，我们会将事件类型和类型相关的数据发送给服务器，告知首页的监控信息。(3)上报周期和上报数据类型如果埋点事件不多，可以定时上报。例如监控用户交互事件，可以在用户触发事件后立即上报用户触发的事件类型。如果埋点事件比较多，或者网页内部交互比较频繁，可以先通过本地存储缓存上报信息，然后定时上报。接下来，确定需要埋点和上报的数据。上报的信息包括用户个人信息和用户行为。主要数据可以分为：who：appid（系统或应用id），userAgent（用户系统，网络等信息）when：timestamp（上报时间戳）fromwhere：currentUrl（用户当前url），fromUrl（来自whichpagetojumptothecurrentpage),type(上报事件的类型),element(触发上报事件的元素)what:reported自定义扩展数据data:{},扩展数据可以根据需求自定义，对于例如，上报数据的包含uid等信息的对象为：{--------------上报接口本身提供--------------------currentUrl,fromUrl,timestamp,userAgent:{os,netWord,}----------------业务代码配置和自定义上报数据-----------type,appid,element,data:{uid,uname}}(4)嵌入上报示例下面以首屏加载事件为例，DOM提供了文档的DOMContentLoaded事件来监听dommount，并提供window的load事件监听页面所有资源加载渲染完成。(5)前端嵌入式系统前后端通信加密在上报数据的前后端通信中，需要与服务器协商加密机制，通过以下方式实现加密使用OpenSSL库。OpenSSL已经是一种广泛采用的加密算法。前端可以使用节点的加密模块。先看hash算法，crypto.createHash()创建一个Hash实例，可用的hash算法如下：md5sha1sha256sha512ripemd160以sha256算法加密为例：conststr="123445";//Fieldstobeencryptedconsthash=加密。createHash('sha256');//指定加密算法hash.update(str);//通过算法对相应的字段进行加密constresult=hash.digest('hex');//转换为16进制4.前端监控结果可视化展示系统设计后端得到前端上报的信息后-end，数据分析处理后，前端需要可视化展示数据分析的结果。可以在开源的中后台系统ant-design-pro的基础上进行二次开发。首先，信息必须清晰显示。显示的信息包括单个用户和整个应用程序。对于单个用户，需要显示的监控信息为：单个用户，交互过程中每个埋点事件被触发的次数，单个用户，一定时间内，本站的入口来源页面，单个用户，在每个子页面中需要为所有用户显示的信息是：网页在一定时间内的PV和UV，访问该网页的所有用户的设备和操作系统，某段时间内本网页的入口来源分析，以及所有访问本网页的用户的入口来源分析时间，交互过程中触发每个埋点事件的总次数。当所有用户访问该网页时，该网页上报的异常集合。删除功能采集：时间过滤：提供今天（00:00到当前时间）、本周、本月和全年用户选择：根据用户id删除提供用户行为统计信息设备选择：删除整体展示信息不同系统的
