聊聊前端监控(一)--场景和类型

最近半年一直都在研究前端监控,发现对于前端来说,监控真的很重要,萌发了想写一系列文章全面梳理一下对前端监控的了解和总结。

1、主要场景

产品,首先要建立在使用场景上,所以首先讨论下监控使用的几个主要使用场景。纵观当前市面上各个前端监控产品,无外乎是满足两个方面的需求,监察用户的使用情况,监察系统的运行状态。所以当前也从 用户 和 系统 两个维度来讨论主要的使用场景。

1.1、用户使用情况

系统前端直面用户,即是和用户交流的窗口,也是产品运营数据第一手数据收集地,所以这是任何完备版的监控系统都绕不过去的话题。

pv、uv等运行数据
百度监控数据

运维一个网站,有多少人来访问了,每天访问的人次是多少,这些数据是衡量一个网站运行好坏的晴雨表。当前比较主要的维度列举如下:

  • pv: 访问人次,一般每次刷新页面都会 + 1
  • uv: 访问人数,每人一天内只计数一次,一般小于等于pv
  • ip数:访问的ip数量
  • 跳出率:打开一个网页的次数/总的网页访问数
  • 平均访问时长:访问总时长 / 访问页数
  • 平均访问深度:在当前域名跳转的次数 / 访问次数
  • 会话数:用户发起的session的数量
  • 路由切换量(rpv):由于当前很多较复杂的网站都是采用spa结构,使用传统的pv,uv不能反映用户真实使用状况,所以这个指标就显得非常重要了,一般来说路由切换一次 rpv + 1,最终得到一个路由访问的次数

各个统计网站都根据不同的维度和认知对行为数据进行统计,然后通过时间维度,按(时/天/月)来对网站的运行数据进行分析,得到当前网站的运行状态。

埋点,点击流

为了要记录用户在网站上的点击,拖动,跳转等行为,对页面上元素绑定的一些事件并上报记录,称作埋点。有的网站只针对重点操作进行埋点,用作审计和时候追查,而另一些网站做全量事件拦截,对用户的所有行为数据都进行记录。通过埋点,可以知道用户在网站上做了哪些操作,为事后审计和查找问题提供帮助。

点击流,是基于以上的埋点的记录,把一系列事件串起来,形成一个用户操作的链条。

通过点击流和埋点,可以分析用户的使用习惯,找到用户在网站使用上碰到的问题,帮助网站做的更好。比如,在点击购买链接前,如果多数都会点击对比商品的按钮,那么对比按钮的位置就需要得到凸显等等。

场景回放

基于埋点和点击流,我们可以做到对用户使用场景的回放和还原,比如用户点击了一些敏感操作按钮,可以帮助用户找到操作失误记录,再比如对于较难复现的bug,可以通过场景回放来重放用户的操作步骤,复现bug。

录屏

场景回放的进阶版,终极大法。通过视频对用户操作进行还原,直观且强大。不过这种科技是要付出代价的,在实现上,可能会碰到不小的麻烦。后面我们在讲实现的时候再具体讨论。

1.2 系统运行情况

除了对用户行为的监看,前端监控和后端监控有很多类似场景,存在很多监控系统运行的场景,据当前收集的资料和对一些系统的调研来看,包含了以下几个主要方面:

错误感知

感知前端页面运行时产生的错误,错误包含多个维度,根据不同系统监控程度不同,一般分成:

  • 控制台错误: runtime报出的错误,一般会打印在浏览器开发工具的控制台,这样
  • 网络错误: 一般包括 http 等与服务器交互产生的请求错误,比如 http response 返回值为4xx,5xx等错误
  • 业务系统自定义错误:一般是各系统自己定义的需要上报的业务错误,比如 http 返回 200,但其实接口返回错误码
耗时统计

时间,是影响用户网站体验的主要因素之一。所以打开速度、各种响应速度,都成了监控统计的主要项目,对于耗时,一般根据侧重点不同,分成:

  • 页面加载耗时:主要是收集由performace.timing对象提供计算出的各种时间实现的,具体时间可以参考下图


    耗时统计
  • 接口请求耗时:主要用于统计对后端接口的耗时情况
全链路状态感知

全链路状态感知,也称作端到端的全链路监控,基本会收集从请求从 web server 到 db 的全生命周期的状态,基本会记录整个请求在处理过程中各个环节的具体耗时等信息。

2、对应场景的监控类型

以上说明了当前了解到的各个监控的使用场景,我的理解,当前监控的类型大致可以分为以下3类:行为监控,异常监控,链路监控。按照之前的场景说明来归纳和对应下。

2.1、行为监控

主要负责监控用户的使用情况,比如点击流,pv,uv等指标都属于此类。还有上面提到的场景回放和录屏也可以归到这一类上面。

行为监控一般的展现形式都是图表,同时提供基于时间等维度的对比功能,能够比较直观的看出数据的变化和趋势对比。

2.2、异常监控

包括浏览器主动抛出的错误和接口错误的情况,一般来说异常监控会以列表的形式展示收集到的错误信息,可能包括用户 UA,Ip,网络状态,请求url等等信息的展示。

很多异常监控也结合sourcemap来还原错误堆栈和现场,提供快速查找错误的能力。

2.3、链路监控

链路监控对应上面全链路感知的场景,一般的展示场景可以参考开发者工具中的timeline类似,可以直观的看出各阶段耗时情况。

链路监控

同时由于链路监控涉及到后端系统的改造工作,当前大部分前端监控系统是缺少这方面能力的,如何将链路监控很好的融合到当前监控系统中去,是一个值得思考的命题。

好了,第一篇讲了一些前端监控的场景和分类,第二篇,我们来讨论一些监控等等技术实现。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容

  • feisky云计算、虚拟化与Linux技术笔记posts - 1014, comments - 298, trac...
    不排版阅读 3,843评论 0 5
  • 目录 ·大型网站软件系统的特点 ·大型网站架构演化发展历程 ·初始阶段的网站架构 ·需求/解决问题 ·架构 ·应用...
    zhyang0918阅读 2,654评论 0 16
  • 近年来,随着计算机技术的飞速发展,以及行业信息的共享,传统企业的运维己不再固步自封,日新月异的计算技术发展推动着企...
    Lionelcox阅读 4,374评论 0 15
  • 产品知识面考察 真题 例题分析 例题7.3 DAU代表 。 日用户点击量 月活跃用户数量 日活跃用户数量 网站...
    爱摄影的奥派阅读 12,308评论 4 46
  • 看见他发的朋友圈 才知道今天是他的生日 曾经牢记在心的日子 早就随风飘散 不自觉的嘴角上扬 时间是什么? 让你淡然...
    煮妇黄艾艾阅读 1,576评论 16 37