浅谈前端埋点监控

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北籍前端群,可加我微信进群。

浅谈前端埋点&监控

https://www.zoo.team/article/monitor

8fa6fe4dd19cae9a434443279fd5067f.png

一、为什么需要埋点&监控

在开始正文之前,我们先想想为什么需要埋点&监控?

当我们在分析复盘一个产品是否成功的时候,不同的角色考虑的方向是不同的。

站在产品的视角,经常会问如下几个问题:

1. 产品有没有用户使用

2. 用户用得怎么样

3. 系统会不会经常出现异常

4. 如何更好地满足用户需求服务用户

当站在技术视角时,经常会问如下几个问题:

1. 系统出现异常的频率如何

2. 异常出现后如何快速进行定位追踪

3. 如何分析解决问题

而当站在老板的视角时,问题可能又会变为:

1. 我的存量用户多少,未来还有多少潜力

2. 多少用户在系统内进行了消费

当在回答了上述问题之后,埋点&监控便跃然纸上。因为要回答以上问题,只有通过对系统进行数据分析的方式才能弄清楚。

其实无论是埋点亦或是监控,二者并不是独立存在,而是相互依存的关系。

dad3422de5010bfff0289feeaa54b3fc.png

二、埋点&监控能做什么

从单个页面的常规数据角度出发我们可以通过埋点获取:访问次数(UV/PV)、地域数据(IP)、在线时长、区域点击次数等数据。

当我们将这些单点数据按照特定的纬度进行数据聚合,就可以获得全流程视角下的数据如:用户留存率/流转率、用户转化率、用户访问深度等数据。

而在埋点数据进行上报的同时,我们也可以同步收集页面基础数据/接口相关数据如:页面加载/渲染时长、页面异常、请求接口等数据。

同时对于前端监控来说,大致可以分成三个方向:数据监控、性能监控、异常监控。

数据监控

数据监控即通过数据分析用户行为,常见的监控数据包括:PV/UV、页面停留时长、通过什么入口进入、在页面触发了什么行为等。统计这些数据就是为了清楚用户来源,拓宽产品的推广渠道;了解用户在页面停留的时间情况,针对停留较短的页面进行分析改进。也就是我们常说的:who(uuid)、when(time)、from where(referrer)、where(x,y)、what (自定义拓展数据)串成的用户行为路径。

性能监控

性能监控主要是针对前端进行监控,比如不同用户在不同地区使用不同机型下的首屏加载时间、页面的白屏时间、静态资源下载时间等数据。通过针对这些性能数据进行监控,可以大概反映前端性能的好坏,根据性能监测的结果可以进一步的去优化前端性能。

异常监控

前端代码在执行过程中也可能会发生异常,因此需要引入异常监控例如 sentry 等工具及时的上报异常情况,可以避免线上故障的发上。常见的异常包括:Javascript 的异常监控、css 的异常监控等。

三、目前埋点方案&后续演进方向

现有方案

目前公司已经存在一套埋点 SDK 在运行,使用的是代码埋点方案,其埋点上报数据可大致分为三类:页面进入、事件触发、页面离开。

(1) 页面进入 (pageIn)

进入页面时,同步推送页面基础信息如:当前页面的来源页面、操作系统、浏览器、页面 url,发生时间等

{ title: '政采云', // document title pre: '', // referrer utm-url: 'a.b.c.d.e', // url 中获取的 utm utm-cnt: 'a.b.0.0.e', // 这个页面的 utm a b 值 scr: '1400x900', // 分辨率 os: 'mac', // 操作系统 k: 'webkit', // 浏览器内核 b: 'chrome/70', // 浏览器及版本 lver: '1.0.0', // js 版本 createTime: '', // 当前时间的时间戳(用户本地时间)logType: 1 // 页面进入发送数据 
}

(2) 事件触发 (Event)

触发事件时,同步推送事件类型 (click、hover 等)、鼠标位置、附加业务参数等

{ evt: 'click', // 事件类型 utm-cnt: 'a.b.c.d.e', // utm 值 bdata: '{"test": "12345" }', // 业务数据 mx: xx, // 鼠标点击位置 x my: xx, // 鼠标点击位置 y lver: '1.0.0', // js 版本 logType: 2 // 数据类型 
}

(3) 页面离开 (pageOut)

离开页面时,同步推送发生时间、页面 url 等

{ title: '政采云', // document title pre: '', // referrer utm-url: 'a.b.c.d.e', // url 中获取的 utm utm-cnt: 'a.b.0.0.e', // 这个页面的 utm a b 值 lver: '1.0.0', // js 版本 createTime: '', // 当前时间的时间戳(用户本地时间)logType: 3 // 页面离开发送数据 
}

其埋点大致逻辑如下图,通过生成独有的四段值 +pvid 即可定位某个项目的某个页面在某个区块点击了某个按钮,同时生成唯一的 pvid 记录页面的 pv 数据。具体说明可翻阅往期关于政采云埋点分析系统的文章:前端工程实践之数据埋点分析系统(一)。前端搞监控|如何实现用户行为的动态采集与分析 (https://juejin.cn/post/6844904161566261256) 

48d47cc7bdeb916f9a108ad6d71e4311.png

后续演进

在现有 SDK 的基础上我们可以发现,目前的埋点 SDK 只上报了一些用户的基础信息数据,在性能数据和异常数据的上报上还存在可拓展的空间。

(1) 性能数据上报

在获取用户基础数据的同时,后续可以通过 window.performanceAPI 获取前端性能数据,在第一次进入页面时随 pageIn 一起将页面初始性能数据进行上报。

8c1ac527c08cfaf1f8e7dbee54b4e3c0.png

可进行上报的字段包含如下:

const getPerformanceData = () => {let performance = {};try {performance = window.performance.getEntries()[0];} catch (e) {}const {domainLookupEnd = 0,domainLookupStart = 0,connectStart = 0,connectEnd = 0,requestStart = 0,responseStart = 0,// etc...} = performance;const dns = ~~(domainLookupEnd - domainLookupStart);const tcp = ~~(connectEnd - connectStart);const ttfb = ~~(responseStart - requestStart);// etc...return {// TODO...};
};

(2) 接口数据上报

除了上报性能数据外,我们也可将页面内所发的所有请求通过重写 XMLHttpRequest 进行劫持打标上报,即在当前页面下的所有请求 header 上默认加上当前页面 ID,将各个请求与当前页面的 pageId 进行绑定。

通过该类数据可以进行统计分析出某一页面的请求量、请求异常等情况判断出页面级别的请求健康度;后期甚至可与 Yapi 接口系统打通,若出现异常情况可直接将实际请求参数与文档上的请求参数进行对比,排除异常是由于请求参数错误造成的。

let req = XMLHttpRequest;
(function(open, send) {// TODO...XMLHttpRequest.prototype.open = function() {open.apply(this, arguments); }// TODO...XMLHttpRequest.prototype.send = function () {this.setRequestHeader('XXXXX', 'XXX')send.apply(this, arguments); }
})(req.prototype.open, XMLHttpRequest.prototype.send)

四、前端数据可视化

对于已经采集上来的数据经由数仓清洗之后的可视化玩法就千变万化了。可以针对不同元数据按不同指标纬度聚合,产生不同的数据分析侧重点。再通过各类可视化工具进行展示,例如:浑仪系统、小采BI等。

浑仪系统

浑仪系统(内部系统)主要针对埋点进行元数据后台管理,推进埋点平台的规范化建设。同时在此基础上,优化数据分析功能,为公司内部用户提供埋点数据自助分析平台,提升数据利用率和日常工作效率。

小采 BI

小采 BI 是可视化团队内部搭建系统,分为报表搭建、大屏搭建和看板搭建等模块。通过内部这些搭建工具直接对元数据进行展示,组合成面向不同受众、不同角色的自定义数据报表或监控大屏等。

五、结语

本文只是针对埋点系统和监控系统的融合的一点简单的介绍与探索,实际操作落地上肯定会有各种问题。比如多端情况下的数据埋点&上报,比如手动埋点增加了工作量破坏了原有代码的可读性等一系列实操上的问题,这些都需要逐步完善优化,同时我们也希望各位读者提出自己意见和建议,一起完善埋点&监控的大生态。

455753df24d78b70c4089f6b23cbe556.gif

················· 若川简介 ·················

你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经坚持写了8年,点击查看年度总结。
同时,最近组织了源码共读活动,帮助4000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。

b62d33a1f1899e6ad29d4b784e8c31b9.jpeg

扫码加我微信 lxchuan12、拉你进源码共读

今日话题

目前建有江西|湖南|湖北 籍 前端群,想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/274596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css版式_第2部分:使版式具有响应能力,并为以后的版本奠定基础

css版式The feedback I’ve received over the past week has been amazing, and matches my own excitement about this project. I’ve spent a lot of time researching, writing, and teaching about creating better typography for reading on digital devices over the …

BBS项目--登录

BBS阶段性测试总要求 django登录报错 Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。 原因分析:出现这种情况在Windows中很常见,就是端口被占用 解决措施:这时我们只需改一下端口便可以了 登录前端页面(HTML…

【声明】

我的公众号和朋友圈有时会有一些课程推广广告,微博的收入来源。我接的广告一般来说都是比自己去买会优惠不少,我也会想方设法争取到更多福利(优惠)。买过的都知道确实优惠。如果有人看到觉得不合适,不想看到&#xff0…

Win7 访问共享时输入正确密码仍然提示密码错误

1、直接按下winr键,输入secpol.msc,打开本地安全策略。 2、找到“安全设置”的“本地策略”的“安全选项” 3、在右边一栏找到“网络安全:LAN管理器身份验证级别”,双击进入 4、在默认状态选项下,英文版应该为"no…

怎么实现页面友好跳转_如何实现软,友好和一致的UI设计

怎么实现页面友好跳转重点 (Top highlight)Design trends are constantly changing, aren’t they? Each month there is a new visual effect or a trick that becomes “设计趋势在不断变化,不是吗? 每个月都有一个新的视觉效果或技巧,成为…

前端趋势 2022

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信lxchuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外&…

MySQL Connector/ODBC 5.2.2 发布

MySQL Connector/ODBC 5.2.2 发布,这是一个稳定版本,下载地址: http://dev.mysql.com/downloads/connector/odbc/5.2.html MySQL Connector/ODBC 是 MySQL 官方发布的 ODBC 驱动程序包。转载于:https://www.cnblogs.com/shihao/archive/2012/…

优秀测试管理工具必备九大功能分析

摘要:测试管理工具对测试的重要性毋庸质疑,两位笔者有着多年的测试实战经验,对市面上的一些测试管理工具有过一定的研究,还根据目前比较流行的敏捷开发过程设计了一款测试管理工具。 这篇文章算是对这个设计过程的总结与分享&…

lightroom预设使用_在Lightroom中使用全景图增强照片游戏

lightroom预设使用Everyone here has taken a panorama with an iphone. We’ve spun around in a circle, trying to keep that arrow right on the line, and more than likely ended up with a strange, squiggly, horizontal photo. Every so often you might get lucky an…

第91次TC39会议举行,这还是我认识的JS吗?

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

android调节音量——AudioManager的应用

Android中可以通过程序获取系统手机的铃声和音量。同样,也可以设置铃声和音量。Android中给出了AudioManager类来实现音量获取、音量控制。本篇基于 Android API 中的 AudioManager 作讲述,最后给出实例。下面是本篇大纲:1、认识 AudioManage…

静态创意和动态创意_再次发挥创意需要什么?

静态创意和动态创意重点 (Top highlight)According to Oxford dictionary, creativity means “1. Inventiveness. 2. the use of imagination or original ideas to create something.”根据牛津词典,创造力意味着“ 1。 创造力。 2.利用想象力或独创性的思想来创造…

oracle 存储过程 stored procedure 查询一条记录或多条记录

创建基本表 -- Create table create table USER_INFORMATION ( P_ID NUMBER, USER_LOGIN_NAME NVARCHAR2(30) ) 创建包: create or replace package pack_test is type cur_test is ref cursor; end pack_test; / --这个不能少呀,加上这个就可以在…

我写了 ahooks 源码分析系列,收到官方邀请我一起维护,这是一次提 PR 的记录...

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

Hdu 4415 Assassin's Creed 【贪心】.cpp

题意: 某A有一个剑 坚韧度为m 他可以用这个剑去攻打别的队伍 杀掉第 i 个队伍需要消耗的坚韧度为 Ai 并可以用得到的剑去打别的队(Bi个) 但是打完别的队这个剑就不能用了 问怎么用最少的坚韧度击败最多的队伍 给出T组样例 每个样例给出n m n表示有n个队 接下来n行给…

ahooks 整体架构篇,大家都能看得懂

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

gif动态图gif出处_我喜欢GIF的怪异事物

gif动态图gif出处I was recently reminded that I never wrote down all the weird things I learned about the GIF file format when implementing GIF decoding/playback at work last year. (I was reminded of this because I wrote a line in a corporate blog post draf…

C#字符串学习笔记

前言:记得我们老师说过一句话,对字符串的学习程度就是当别人打你一拳你知道痛的情况,所以字符串的处理我们必须学的差不多,这几篇博客完全是我的学习过程中记录的笔记,在这里分享一下让很多刚开始学习.net编程的人能够…

Git基础教程(必学)

大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外…

用户体验改善案例_优化用户体验案例研究的五种方法

用户体验改善案例重点 (Top highlight)I’ve had the opportunity to give several portfolio reviews, and I want to share some common themes I see and how you can improve them to put your best foot forward as you search for that new product design gig.我有机会发…