前度监控(埋点)设计方案(代码片段)

微个日光日 微个日光日     2022-12-14     147

关键词:

目录

 

为什么需要前端监控(目的是什么)?

数据监控

性能监控

异常监控

常用的埋点方案

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

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


为什么需要前端监控(目的是什么)?

我们知道,现在互联网产品的获客成本每年都在不断的攀升;比如,淘宝app的平均获客单价在1000元左右,京东大概600左右,拼多多最低,在具有微信作为巨大流量加持下也要200左右。

然而一款好的产品不仅能降低获客成本,而且对用户留存率有很大的帮组。那么获取用户行为及产品在客户端的使用情况,并以监控数据为基础,对产品的优化方向具有很重要的指导意义。

而前端监控主要有三大部分组成,分别是:数据监控,性能监控和异常监控。

数据监控

数据监一般指的是用户在客户端的行为相关数据,常见的监控指标为:

  • pv/uv:pv是page view的缩写,指的是页面访问量或者说是点击量,uv的缩写是user view,指的是用户访问量,即有多少个IP访问了网站或者某个页面。
  • 用户在每一个页面的停留时间
  • 用户通过什么入口来访问该网页
  • 用户在相应的页面中触发的行为

统计这些数据是有意义的,比如我们知道了用户来源的渠道,可以促进产品的推广,知道用户在每一个页面停留的时间,可以针对停留较长的页面,增加广告推送等等。

性能监控

性能监控主要监控的是产品在用户使用体验,响应速度,流畅度等的数据,主要的性能指标如下:

  • 首屏加载时间:针对不同用户,不同设备,不同系统的类型
  • 白屏时间:即打开页面或者应用,从没有任何内容到内容显示出来的时间
  • http等请求的响应时间
  • 静态资源整体下载时间
  • 页面渲染时间
  • 页面交互动画完成时间

这些性能监控的结果,可以展示前端性能的好坏,根据性能监测的结果可以进一步的去优化前端性能,比如兼容低版本浏览器的动画效果,加快首屏加载等等。

异常监控

另外,产品的前端代码在执行过程中也会发生异常,因此需要引入异常监控。及时的上报异常情况,可以避免线上故障的发上。虽然大部分异常可以通过try catch的方式捕获,但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括:

  • javaScript 的异常监控
  • 样式丢失的异常监控

常用的埋点方案

代码埋点

代码埋点,就是以嵌入代码的形式进行埋点,比如需要监控用户的点击事件,会选择在用户点击时,插入一段代码,保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给server端。此外比如需要统计产品的PV和UV的时候,需要在网页的初始化时,发送用户的访问信息等。

优点:

可以在任意时刻,精确的发送或保存所需要的数据信息。

缺点:

工作量较大,每一个组件的埋点都需要添加相应的代码

可视化埋点:

通过可视化交互的手段,代替代码埋点。将业务代码和埋点代码分离,提供一个可视化交互的页面,输入为业务代码,通过这个可视化系统,可以在业务代码中自定义的增加埋点事件等等,最后输出的代码耦合了业务代码和埋点代码。

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

缺点:

可视化埋点可以埋点的控件有限,不能手动定制。

无埋点:

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

从语言层面实现无埋点也很简单,比如从页面的js代码中,找出dom上被绑定的事件,然后进行全埋点。

优点:

  • 由于采集的是全量数据,所以产品迭代过程中是不需要关注埋点逻辑的,也不会出现漏埋、误埋等现象

缺点:

  • 无埋点采集全量数据,给数据传输和服务器增加压力

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

1)监控数据

首先我们需要明确一个产品或者网页,普遍需要监控和上报的数据。监控的分为三个阶段:用户进入网页首页、用户在网页内部交互和交互中报错。

2)埋点方案

在实际项目中考虑到上报数据的灵活定制,以及减少数据传输和服务器的压力,在所需埋点处不多的情况下,常用的方式是代码埋点。

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

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

如果埋点的事件不是很多,上报可以时时进行,比如监控用户的交互事件,可以在用户触发事件后,立刻上报用户所触发的事件类型。如果埋点的事件较多,或者说网页内部交互频繁,可以通过本地存储的方式先缓存上报信息,然后定期上报。

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

  • who: appid(系统或者应用的id),userAgent(用户的系统、网络等信息)
  • when: timestamp(上报的时间戳)
  • from where: currentUrl(用户当前url),fromUrl(从哪一个页面跳转到当前页面),type(上报的事件类型),element(触发上报事件的元素)
  • what: 上报的自定义扩展数据data:,扩展数据中可以按需求定制,比如包含uid等信息

4)上报数据的对象为:

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

5)埋点和上报举例:

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

<script 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
         
     )
  );
</script>

6)前端埋点系统的前后端通信加密:

在上报数据的前后端通信中,需要和server端协商加密机制,利用 OpenSSL库来实现的加密,OpenSSL已经是一个广泛被采用的加密算法。前端可以采用node的crypto模块。

首先来看hash算法,crypto.createHash() 来创建一个Hash实例,可利用的hash算法如下:

  • md5
  • sha1
  • sha256
  • sha512
  • ripemd160

以sha256算法加密为例:

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

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

当后端得到前端上报的信息之后,经过数据分析和处理,需要前端可视化的展示数据分析后的结果。

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

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

  • 单个用户,在交互过程中触发各个埋点事件的次数
  • 单个用户,在某个时间周期内,访问本网页的入口来源
  • 单个用户,在每一个子页面的停留时间

对于全体用户需要展示的信息为:

  • 某一个时间段内网页的PV和UV
  • 全体用户访问网页的设备和操作系统分析
  • 某一个时间段内访问本网页的入口来源分析
  • 全体用户在访问本网页时,在交互过程中触发各个埋点事件的总次数
  • 全体用户在访问本网页时,网页上报异常的集合

删选功能集合:

  • 时间筛选:提供今日(00点到当前时间)、本周、本月和全年
  • 用户删选:提供根据用户id删选出用户行为的统计信息
  • 设备删选:删选不同系统的整体展示信息

前端设计文档模版(送给刚刚参加前端技术工作者们)(代码片段)

...块2合计人天三、设计方案(1)整体方案项目搭建部署方案监控方案(2)页面设计页 查看详情

ios性能监控方案设计(代码片段)

  最近在搞app的性能监控。主要从启动耗时,首屏耗时,操作耗时的几个指标进行监控,后续会增加其他维度的指标启动耗时  启动耗时主要分为冷启动,热启动。其中冷启动又分为首次启动,非首次启动。冷... 查看详情

ios性能监控方案设计(代码片段)

  最近在搞app的性能监控。主要从启动耗时,首屏耗时,操作耗时的几个指标进行监控,后续会增加其他维度的指标启动耗时  启动耗时主要分为冷启动,热启动。其中冷启动又分为首次启动,非首次启动。冷... 查看详情

aspectjxandroid中快速集成使用一款aop框架并附加数据埋点解决方案实现(代码片段)

...无侵入的在宿主中插入一些代码,做日志埋点、性能监控、动态权限控制、甚至是代码调试等。AspectJX一个基于AspectJ并在此基础上扩展出来可应用于Android开发平台的AOP框架,可作用于java源码,class文件及jar包,同... 查看详情

android实战——recyclerview条目曝光埋点(代码片段)

一、概要100行代码实现recyclerview条目曝光埋点设计二、设计思路条目露出来一半以上视为该条目曝光。在rv滚动过程中或者数据变更回调OnGlobalLayoutListener时,将符合条件1的条目记录在曝光列表、上传埋点集合里。滚动状态变... 查看详情

aspectjxandroid中快速集成使用一款aop框架并附加数据埋点解决方案实现(代码片段)

...AOPAspectJX集成使用具体配置Demo中使用拓展实现:数据埋点解决方案准备工作完整代码实现参考文章背景主要是记录学习AOP编程思想。项目中数据埋点统一方案有使用到,也是一次加深学习理解的过程。什么是AOPAOP是Aspect-O... 查看详情

aspectjxandroid中快速集成使用一款aop框架并附加数据埋点解决方案实现(代码片段)

...AOPAspectJX集成使用具体配置Demo中使用拓展实现:数据埋点解决方案准备工作完整代码实现参考文章背景主要是记录学习AOP编程思想。项目中数据埋点统一方案有使用到,也是一次加深学习理解的过程。什么是AOPAOP是Aspect-O... 查看详情

aspectjxandroid中快速集成使用一款aop框架并附加数据埋点解决方案实现(代码片段)

...AOPAspectJX集成使用具体配置Demo中使用拓展实现:数据埋点解决方案准备工作完整代码实现参考文章背景主要是记录学习AOP编程思想。项目中数据埋点统一方案有使用到,也是一次加深学习理解的过程。什么是AOPAOP是Aspect-O... 查看详情

分布式链路监控系统(代码片段)

...据模型、数据埋点以及数据存储三个方面介绍分布式链路监控系统的实现细节,其中将重点介绍Skywalking字节码增强的实现方案。背景传统的大型单体系统随着业务体量的增大已经很难满足市场对技术的需求,通过对将整... 查看详情

有道kubernetes容器api监控系统设计和实践(代码片段)

本期文章,我们将给大家分享有道容器服务API监控方案,这个方案同时具有轻量级和灵活性的特点,很好地体现了k8s集群化管理的优势,解决了静态配置的监控不满足容器服务监控的需求。并做了易用性和误报消减、可视化面板... 查看详情

前端错误监控的简单设计与实现(代码片段)

文章目录前端错误监控的简单设计与实现前端埋点错误类型异常上报的数据格式异常上报防抖处理缓存异常上报数据来限制上报频率异常上报可定制化配置前端异常监控代码后端限流异步发送邮件发送邮件阻塞问题总结参考前端... 查看详情

ios性能监控方案设计(代码片段)

  最近在搞app的性能监控。主要从启动耗时,首屏耗时,操作耗时的几个指标进行监控,后续会增加其他维度的指标启动耗时  启动耗时主要分为冷启动,热启动。其中冷启动又分为首次启动,非首次启动。冷... 查看详情

关于android性能监控matrix那些事?你知道那些(中)?(代码片段)

昨天更新了关于Android性能监控Matrix那些事?你知道那些(上)?说的的视频也更新了:微信Matrix卡顿监控实战,函数自动埋点监控方案今天我们接着聊下文:4.Hprof文件分析5.卡顿监控6.卡顿监控源码解析7.插... 查看详情

关于android性能监控matrix那些事?你知道那些(上)?(代码片段)

前两天录制了两节关于Android性能监控Matrix的视频。1.面试中问道线上性能监控怎么办,Android线上监控种种2.Matrix卡顿监控,函数自动埋点监控方案但是还没有完全录制完全。稍后出~今天先文字分析一下关于Matrix的种种文... 查看详情

android实战——recyclerview条目曝光埋点(代码片段)

一、概要100行代码实现recyclerview条目曝光埋点设计二、设计思路条目露出来一半以上视为该条目曝光。在rv滚动过程中或者数据变更回调OnGlobalLayoutListener时,将符合条件1的条目记录在曝光列表、上传埋点集合里。滚动状态变... 查看详情

android实战——recyclerview条目曝光埋点(代码片段)

一、概要100行代码实现recyclerview条目曝光埋点设计二、设计思路条目露出来一半以上视为该条目曝光。在rv滚动过程中或者数据变更回调OnGlobalLayoutListener时,将符合条件1的条目记录在曝光列表、上传埋点集合里。滚动状态变... 查看详情

关于android性能监控matrix那些事?你知道那些?(完)(代码片段)

关于Android性能监控Matrix那些事?你知道那些?(上)关于Android性能监控Matrix那些事?你知道那些(中)?视频也更新了:微信Matrix卡顿监控实战,函数自动埋点监控方案今天抽空把后面的... 查看详情

使用skywalking监控mysql工具与方案(代码片段)

注:本文适用于SkyWalkingv9.1.0。SkyWalking简介SkyWalking是一个分布式系统的应用程序性能监视(APM)工具,专为微服务、云原生架构和基于容器(K8s)架构而设计。当前版本具备了全路径跟踪、指标采集、日志... 查看详情