设计 前端-前端设计模式有哪些

在线上项目中，须要统计产品中用户行为和使用情况，因而可以从用户和产品的角度去了解用户群体，因而升级和迭代产品，使其愈发紧贴用户。用户行为数据可以通过后端数据监控的方法获得，除此之外，后端还须要实现性能监控和异常监控。性能监控包括首屏加载时间、白屏时间、http恳求时间和http响应时间。异常监控包括后端脚本执行报错等。

实现后端监控有三个步骤：后端埋点和上报、数据处理和数据剖析。本文针对整个后端监控，设计适用的方案。本文的主要内容分为：

原文的地址，在我的博客中：

如有帮助，您的star是对我最好的鼓励～

一、为什么须要后端监控

后端监控的目的是：获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化的方向。

后端监控可以分为三类：数据监控、性能监控和异常监控。下边我们来一一的了解。

(1)数据监控

数据监控，顾名思义就是窃听用户的行为。常见的数据监控包括：

统计那些数据是有意义的，例如我们晓得了用户来源的渠道，可以促使产品的推广，晓得用户在每一个页面逗留的时间，可以针对逗留较长的页面，降低广告推送等等。

(2)性能监控

性能监控指的是窃听后端的性能，主要包括窃听网页或则说产品在用户端的体验。常见的性能监控数据包括：

这种性能监控的结果，可以展示后端性能的优劣，依据性能检测的结果可以进一步的去优化后端性能，例如兼容低版本浏览器的动漫疗效，推动首屏加载等等。

(3)异常监控

据悉，产品的后端代码在执行过程中也会发生异常，因而须要引入异常监控。及时的上报异常情况，可以防止线上故障的发上。其实大部份异常可以通过trycatch的方法捕获，并且诸如显存泄露以及其他偶现的异常无法捕获。常见的须要监控的异常包括：

二、常用后端埋点方案总结

在上一节中介绍了后端监控的作用，这么怎样实现后端监控呢，实现后端监控的步骤为：后端埋点和上报、数据处理和数据剖析。首要的步骤就是后端埋点和上报，也就是数据的搜集阶段。数据搜集的丰富性和确切性会影响对产品线上疗效的判断结果。

目前常见的后端埋点方式分为三种：代码埋点、可视化埋点和无痕埋点。下边一一介绍每一种埋点的技巧。

(1)代码埋点

代码埋点，就是以嵌入代码的方式进行埋点，例如须要监控用户的点击风波，会选择在用户点击时，插入一段代码，保存这个窃听行为或则直接将窃听行为以某一种数据格式直接传递给server端。据悉例如须要统计产品的PV和UV的时侯，须要在网页的初始化时，发送用户的访问信息等。

代码埋点的优点：可以在任意时刻，精确的发送或保存所须要的数据信息。

缺点：工作量较大，每一个组件的埋点都须要添加相应的代码

(2)可视化埋点

通过可视化交互的手段，取代代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的降低埋点风波等等，最后输出的代码耦合了业务代码和埋点代码。

可视化埋点听上去比较高大上，实际上跟代码埋点还是区别不大。也就是用一个系统来实现自动插入代码埋点的过程。

缺点：可视化埋点可以埋点的控件有限，不能手动订制。

(3)无埋点

无埋点并不是说不须要埋点，而是全部埋点，后端的任意一个风波都被绑定一个标示，所有的风波都别记录出来。通过定期上传记录文件，配合文件解析，解析下来我们想要的数据，并生成可视化报告供专业人员剖析因而实现“无埋点”统计。

从语言层面实现无埋点也很简单，例如从页面的js代码中，找出dom上被绑定的风波，之后进行全埋点。

无埋点的优点：因为采集的是全量数据，所以产品迭代过程中是不须要关注埋点逻辑的，也不会出现漏埋、误埋等现象

缺点：

三、前端埋点方案选型和后端上报方案设计

第一章中介绍了后端所须要窃听的信息，在第二章中介绍了后端埋点的常见方法，本文来按照需求，来订制我们的埋点和上报方案。

(1)监控数据

首先我们须要明晰一个产品或则网页，普遍须要监控和上报的数据。监控的分为三个阶段：用户步入网页首页、用户在网页内部交互和交互年报错。每一个阶段须要监控和上报的数据如右图所示：

(2)埋点方案

在实际项目高考虑到上报数据的灵活订制，以及降低数据传输和服务器的压力，在所需埋点处不多的情况下，常用的方法是代码埋点。

以用户步入首页为例，我们在首页渲染完成后会发送风波类型和类型相关的数据给server端，告知首页的监控信息。

(3)上报周期和上报数据类型

倘若埋点的风波不是好多，上报可以时时进行，例如监控用户的交互风波，可以在用户触发风波后，立即上报用户所触发的风波类型。倘若埋点的风波较多，或则说网页内部交互频繁，可以通过本地储存的方法先缓存上报信息，之后定期上报。

接着来确定须要埋点上报的数据，上报的信息包括用户个人信息以及用户行为，主要数据可以分为：

上报数据的对象为：

 ? ?{ ? 
 ? ? ? ?----------------上报接口本身提供--------------------
 ? ? ? ?currentUrl, ?
 ? ? ? ?fromUrl,
 ? ? ? ?timestamp,
 ? ? ? ?userAgent:{
 ? ? ? ? ? os,
 ? ? ? ? ? netWord,
 ? ? ? ?}
 ? ? ? ?----------------业务代码配置和自定义上报数据------------
 ? ? ? ?type,
 ? ? ? ?appid,
 ? ? ? ?element,
 ? ? ? ?data:{
 ? ? ? ? ? ?uid,
 ? ? ? ? ? ?uname
 ? ? ? ?}
 ? ?}

(4)埋点和上报举例

我们以上报首屏加载风波为例，DOM提供了document的DOMContentLoaded风波来窃听dom挂载，提供了window的load风波来窃听页面所有资源加载渲染完毕。

 ? ? type="text/javascript">
 ? ? ?var start=Date.now();
 ? ? ?document.addEventListener('DOMContentLoaded', function() {
 ? ? ? ? fetch('some api',{
 ? ? ? ? ? ? type:'dom complete',
 ? ? ? ? ? ? data:{
 ? ? ? ? ? ? ? domCompletedTime:Date.now()-start
 ? ? ? ? ? ? }
 ? ? ? ? })
 ? ? ?});
 ? ? ?window.addEventListener('load', function() {
 ? ? ? ? fetch('some api',{
 ? ? ? ? ? ? type:'load complete',
 ? ? ? ? ? ? data:{
 ? ? ? ? ? ? ? LoadCompletedTime:Date.now()-start
 ? ? ? ? ? ? }
 ? ? ? ? })
 ? ? ?});
 ? ?

(5)后端埋点系统的前后端通讯加密

在上报数据的前后端通讯中，须要和server端协商加密机制，借助OpenSSL库来实现的加密，OpenSSL早已是一个广泛被采用的加密算法。后端可以采用node的crypto模块。

首先来看hash算法，crypto.createHash()来创建一个Hash实例，可借助的hash算法如下：

以sha256算法加密为例：

 ? ?const str="123445";//需要加密的字段
 ? ?const hash=crypto.createHash('sha256');//指定加密算法
 ? ?hash.update(str); //通过算法加密相应的字段
 ? ?const result=hash.digest('hex');//转化成十六进制

四、前端监控结果可视化展示系统的设计

当前端得到后端上报的信息以后，经过数据剖析和处理，须要后端可视化的展示数据剖析后的结果。

可以在开源中后台系统ant-design-pro的基础上进行二次开发，首先要明晰展示信息。展示的信息包括单个用户和整体应用。

对于单个用户来说须要展示的监控信息为：

对于全体用户须要展示的信息为：

删选功能集合：

欢迎关注SegmentFault陌陌公众号:)