您的位置:澳门皇冠金沙网站-澳门金莎娱乐手机版 > 互联网科技 > Performance Management)领域空白,第二篇传送门 一、

Performance Management)领域空白,第二篇传送门 一、

2019-11-11 15:58

原标题:如何使用阿里云ARMS轻松重现用户浏览器问题

页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下:

摘要: 今天我分享的内容分成三个部分: 第一部分是“大前端时代前端监控新的变化”, 讲述这些年来,前端监控一些新的视角以及最前沿的一些思考。 第二部分"前端监控的最佳实践", 从使用的角度出发,介绍前端监控系统的各种使用姿势 最后是“阿里云ARMS前端监控系统架构”, 简单地剖析下,阿里云前端监控系统是怎么实现的。

摘要: 日前,阿里巴巴中间件(Aliware)旗下产品业务实时监控服务ARMS正式商用。首发商用的ARMS目前涵盖应用监控和前端监控两大功能。由此,ARMS的商业化正式填补了阿里云在APM(Application Performance Management)领域空白。

摘要: 这是阿里中间件 ARMS 团队推出的 “网站常见问题1分钟定位”系列文章的第三篇,作者慕扉。 » 第一篇传送门 » 第二篇传送门 一、客户投诉不断,本地却无法重现? 页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。

  1. 页面是在用户端的浏览器上加载执行,复现困难

    • 页面上线前,开发同学都会进行测试,在测试环境下页面加载一般都是正常的才会正式上线。用户在访问页面时,页面的加载是在用户端的浏览器上进行的,由于页面的加载耗时与地域、网络情况、浏览器或者运营商等有关系,想知道用户在访问页面时的具体情况,复现是非常困难的。
  2. 监控信息缺少,导致无法深入排查

    • 大部分前端监控会通过PerformanceTiming对象,获取完整的页面加载耗时信息,但这类监控就缺失了页面静态资源的加载情况,无法直接复现现场,从而无法深入定位性能瓶颈。

本文来自阿里云前端监控团队,转载请注明出处

原文链接:http://click.aliyun.com/m/43720/

一、客户投诉不断,本地却无法重现?

为了方便用户更快地定位性能瓶颈,阿里云ARMS前端监控推出一新功能: 会话追踪,提供页面静态资源加载的性能瀑布图,根据页面性能数据可深入定位页面资源加载情况。

本文为2018年6月21日,在北京举办的GMTC(全球大前端技术大会),下午性能与监控专场,由阿里云前端监控团队前端技术专家彭伟春带来的演讲稿,现场反馈效果非常好,地上都坐了三圈,很多人反馈根本无法挤进去。先上现场照。

日前,阿里巴巴中间件(Aliware)旗下产品业务实时监控服务ARMS正式商用。首发商用的ARMS目前涵盖应用监控和前端监控两大功能。由此,ARMS的商业化正式填补了阿里云在APM(Application Performance Management)领域空白。基于ARMS,用户可以高效完成应用和前端的性能管理,可视化监控各项性能指标,并做出实时预警和监控。

页面加载较慢是用户经常会反馈的问题,也是前端非常关注的问题之一。但定位、排查解决这类问题就通常会花费非常多的时间,主要原因如下:

在阿里云ARMS前端监控SDK上将sendResource配置为true,重新部署应用后,在页面onload时会上报当前页面加载的静态资源信息。从而在阿里云前端监控平台即可以对慢页面加载问题快速进行定位。

澳门皇冠金沙网站 1

澳门皇冠金沙网站 2

  1. 澳门皇冠金沙网站,页面是在用户端的浏览器上加载执行,复现困难

SDK配置

在阿里云ARMS前端监控SDK部分,默认是不上报页面加载的静态资源信息的,如果想获取页面加载的静态资源信息,只需在SDK的config部分将sendResource配置为true,重新部署后,就可以上报相关信息。具体配置如下:

<script>!(function{c[a]||;c[a].config={pid:"atc889zkcf@8cc3f63543da641",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true};withwithwith(insertBefore(createElement,firstChild))setAttribute("crossorigin","",src=d)})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");</script>

注意:静态资源加载信息的上报是在页面onload时会触发,上报信息量较大,如果对于页面性能要求很高的应用,可以不开启该配置。

正文从这里开始~

ARMS 场景示例

页面上线前,开发同学都会进行测试,在测试环境下页面加载一般都是正常的才会正式上线。用户在访问页面时,页面的加载是在用户端的浏览器上进行的,由于页面的加载耗时与地域、网络情况、浏览器或者运营商等有关系,想知道用户在访问页面时的具体情况,复现是非常困难的。

问题排查过程

1. 发现问题

进入访问速度菜单后,发现页面的性能较差,11点钟的页面完全加载时间达到35s,如下:

澳门皇冠金沙网站 3

2. 慢页面会话追踪

在慢页面会话追踪模块,提供该页面在指定时间段内加载较慢的TOP20,这样可以快速发现哪些会话加载较慢,如下图所示。在该模块,你可以快速发现在11点钟有一次会话的页面加载时间在36.72s,这次访问应该是直接导致页面加载时间详情中折线图突然暴增的原因了。

澳门皇冠金沙网站 4

其中在在模块有7次会话访问的页面加载时间在7s以上,点击对应的页面,可以直接进入到会话详情页面,从而直观查看页面静态资源加载的瀑布图。

澳门皇冠金沙网站 5

通过页面资源加载的瀑布图,可以快速定位到资源加载的性能瓶颈,同时可以查看本次访问的客户端IP地址、浏览器、操作系统等UA信息,从而进一步确认是由于网络原因还是其他原因导致的,针对性进行相应的优化。

澳门皇冠金沙网站 6

3. 其他发现问题入口

会话追踪

也可以进入“会话追踪”菜单,可以看到该应用下的会话列表。会话列表中会根据页面完全加载时间排序,展示TOP100,帮助用户可以快速发现耗时较长的会话信息。同时支持按照页面、会话Id、浏览器、浏览器版本号进行过滤,展示相关的会话信息。点击操作后,是该会话的页面资源加载详情。

澳门皇冠金沙网站 7

访问明细

如果当前会话列表中无法找到你要排查的会话信息,可以通过访问明细查找到相应的日志详细信息,在param中找到对应的sid即会话Id,然后在会话列表中查找相应的会话Id,即可以定位到想排查的会话信息。

例如:在已知用户的客户端IP的情况下,想定位相应的会话信息,即可以在访问明细中,通过t=res and 117.136.32.110 进行搜索,找到对应的会话Id。

澳门皇冠金沙网站 8

根据查找到的会话Id, 就可以在会话列表中进行过滤,定位到具体的会话内容。

澳门皇冠金沙网站 9

澳门皇冠金沙网站 10

大规模分布式应用全息监控

  1. 监控信息缺少,导致无法深入排查

使用入口指南

  1. 进入访问速度菜单,如果发现页面性能较差,可以在"慢页面会话追踪Top20"中查看访问较慢的会话情况

    • 点击详情后,可以查看具体的页面资源加载瀑布图
    • 如果Top20不满足,可以点击"更多",从而进入"会话列表"
  2. 进入会话追踪菜单,展示的是TOP100的会话列表信息,根据页面完全加载时间从高到底排序,排查页面资源加载情况

澳门皇冠金沙网站 11

至此,慢页面会话追踪功能及使用方法介绍完成。该功能可以帮助你复现用户在访问页面时的页面资源加载情况,快速定位性能瓶颈问题。

  • 官网文档介绍
  • 阿里云ARMS前端监控官网

本文作者:中间件小哥

阅读原文

本文为云栖社区原创内容,未经允许不得转载。

大家下午好,今天我给大家带来的主题是《大前端时代前端监控的最佳实践》。

应用监控是本次ARMS商业化的重点功能,该功能是企业发展在微服务改造和分布式互联网架构升级中必不可少的监控神器。

大部分前端监控会通过PerformanceTiming对象,获取完整的页面加载耗时信息,但这类监控就缺失了页面静态资源的加载情况,无法直接复现现场,从而无法深入定位性能瓶颈。

澳门皇冠金沙网站 12

澳门皇冠金沙网站 13

为了方便用户更快地定位性能瓶颈,阿里云ARMS前端监控推出一新功能: 会话追踪,提供页面静态资源加载的性能瀑布图,根据页面性能数据可深入定位页面资源加载情况。

先做一个自我介绍,我叫彭伟春,英文名是Holden, 阿里花名是六猴, 大家都叫我猴哥。是阿里开源同构框架beidou的作者,目前是阿里云前端系统技术负责人。

ARMS应用监控功能示例

二、阿里云ARMS前端监控-会话追踪帮助你快速定位问题

澳门皇冠金沙网站 14

例如,如果企业发展迅速,在短时间可能就会增加应用数量,当应用数量增多时,如何对分布式应用进行有效监管?除了排查单一故障,如何从全局角度迅速找出故障根源?这些都是企业需要攻克的重要技术难点。

在阿里云ARMS前端监控SDK上将sendResource配置为true,重新部署应用后,在页面时会上报当前页面加载的静态资源信息。从而在阿里云前端监控平台即可以对慢页面加载问题快速进行定位。

今天我分享的内容分成三个部分:

ARMS 应用监控主要理论模型基于Google Dapper,经过阿里内部鹰眼实践,不仅支持了双11数十万个结点规模的应用监控,并且具备各种复杂功能场景的监控经验,其功能除了常用的链路跟踪以外,还包括内部基础架构性能监控,中间件接口监控,业务全息排查,等多个场景。

SDK配置

第一部分是“大前端时代前端监控新的变化”, 讲述这些年来,前端监控一些新的视角以及最前沿的一些思考。

借助ARMS应用监控,用户可以轻松实现以下功能:

在阿里云ARMS前端监控SDK部分,默认是不上报页面加载的静态资源信息的,如果想获取页面加载的静态资源信息,只需在SDK的config部分将sendResource配置为true,重新部署后,就可以上报相关信息。具体配置如下:

第二部分"前端监控的最佳实践", 从使用的角度出发,介绍前端监控系统的各种使用姿势。

• 快速浏览某段时间各微服务应用之间的网络拓扑和调用信息。

澳门皇冠金沙网站 15

最后是“阿里云ARMS前端监控系统架构”, 简单地剖析下,阿里云前端监控系统是怎么实现的。

• 针对某类服务,快速统计出常见程序性能问题如慢SQL,Top异常,等。

注意:静态资源加载信息的上报是在页面时会触发,上报信息量较大,如果对于页面性能要求很高的应用,可以不开启该配置。

澳门皇冠金沙网站 16澳门皇冠金沙网站 17

• 通过问题服务所关联的抽样调用链,查看详细的分布式调用堆栈信息或本地调用堆栈信息,快速定位分布式调用链中的问题点。

三、问题排查过程

先进入我们第一个环节 大前端时代前端监控新的变化。

• 通过ARMS特制的日志API和全息排查功能,用户还可以将业务信息进一步关联到具体的调用链中,快速定位相关业务信息的调用链上下文。

  1. 发现问题

要了解前端监控新的变化,还得先看看前端这些年发生了哪些变化:

澳门皇冠金沙网站 18

进入访问速度菜单后,发现页面的性能较差,11点钟的页面完全加载时间达到35s,如下:

  1. 首先是Gmail的横空出世,开启了SPA的时代

ARMS应用监控

澳门皇冠金沙网站 19

2. Backbone/Angular等框架带来了MVVM模式的同时,也把JS从脚本语言提升到了工程语言

和同类APM类工具相比,基于鹰眼的ARMS应用监控功能除了能够比较好的提供分布式应用的调用链、本地调用堆栈、异常捕获、各类中间件接口调用监控功能以外,还具备以下优点:

  1. 慢页面会话追踪
  1. React Native/Weex把移动端开发从Hybrid模式进化到了跨端开发模式

  2. Node.js问世为前端带来了更多的可能性

• 支持接口广泛:首次推出的应用监控除支持Aliware(EDAS, MQ)接口以外,将支持10多种通用的第三方中间件接口,最大限度做到应用的监控广度。

在慢页面会话追踪模块,提供该页面在指定时间段内加载较慢的TOP20,这样可以快速发现哪些会话加载较慢,如下图所示。

澳门皇冠金沙网站 20

• 日志全息排查场景:通过后续ARMS提供的API,用户可以自行将关联调用链信息的日志打出,日志既可以在ARMS中通过业务信息进行基于调用链场景的排查以外,日志也可以直接进入到日志服务中进行直接查询搜索。

在该模块,你可以快速发现在11点钟有一次会话的页面加载时间在36.72s,这次访问应该是直接导致页面加载时间详情中折线图突然暴增的原因了。

前端这些年发生了翻天覆地的变化,又会给监控带来什么呢?让我们思考下以下几个问题:

• 和Aliware无缝集成:新推出的ARMS应用监控将和已有的Aliware如EDAS平台将无缝集成,用户可以在EDAS上一键接入ARMS,后台Agent植入完全透明化。

澳门皇冠金沙网站 21

  1. 传统监控模式能否适用于新的技术?比如PV统计

  2. SPA模式下首屏如何计算?

  3. 跨端开发给监控带来什么什么挑战?

  4. 前端监控的上报模式在Node.js端是否合理?

“企业需要的不仅仅是一款可以追踪单一链路故障的技术,而是一项便捷实用,全息排查,上手简便的产品,在易用性上,特别是和阿里云产品集成上,我们对ARMS进行了大量优化。”据ARMS产品负责人介绍。“例如,对EDAS的集成,用户只需要在页面上进行开通和授权,即可在ARMS上监控EDAS的应用数据,用户无需对业务程序进行任何改造。”

其中在在模块有7次会话访问的页面加载时间在7s以上,点击对应的页面,可以直接进入到会话详情页面,从而直观查看页面静态资源加载的瀑布图。

接下来我和大家一起探讨其中的一两项

轻松提升前端用户体验

澳门皇冠金沙网站 22

澳门皇冠金沙网站 23

ARMS的前端监控商业化,对于拥有快速增长的门户网站的企业来讲,也是一个利好消息。由于互联网环境越来越复杂,企业获取流量的方式也越来越多样化,同一个企业往往同时具有iOS、Android、公众号、移动Web甚至小程序等多个前端,因此前端的用户体验管理就尤为重要。

通过页面资源加载的瀑布图,可以快速定位到资源加载的性能瓶颈,同时可以查看本次访问的客户端IP地址、浏览器、操作系统等UA信息,从而进一步确认是由于网络原因还是其他原因导致的,针对性进行相应的优化。

早些年,SPA如此盛行,我们也在业务中做了尝试,体验是大幅提升了,可业务方却吐槽PV下降了。

“ARMS前端监控对标的是APM领域的用户体验管理,即User Expeirence Management, 简称UEM技术。”据ARMS产品负责人表示,该技术通过对网站页面上动态数据的采集监测和实时反馈,可帮助企业更高效地进行用户体验监测。

澳门皇冠金沙网站 24

澳门皇冠金沙网站 25

澳门皇冠金沙网站 26

  1. 其他发现问题入口

那到底是什么导致了PV下降了呢?在后端直出时代,我们每一次的交互,都是向后端请求一个新的页面,PV自然就高,改成SPA模式之后,大量的页面请求变成了页内路由,或者说是页内转场。那如何解呢?这难不倒我们,大部分框架路由都是基于哈希实现的,我们只要侦听hash改变,每次改变上报一次PV就好了。也有少量的路由并不是基于哈希实现的,比如angular, 这时候就需要轻量级地hack pushState和replaceState。

ARMS前端监控

会话追踪

澳门皇冠金沙网站 27

ARMS前端监控是阿里内部基于ARMS平台搭建的前端业务监控标准解决方案。和应用监控一样,脱胎于阿里内部产品,主打 Web 端体验数据监控,通过页面打开速度(测速)、页面稳定性(JS Error)、外部服务调用成功率(API)三叉戟组合来监测 Web 页面的健康度。经过多年磨练,其易用性和稳定性大幅提升,非常适合大多数中小企业甚至是个人创业者。

也可以进入“会话追踪”菜单,可以看到该应用下的会话列表。会话列表中会根据页面完全加载时间排序,展示TOP100,帮助用户可以快速发现耗时较长的会话信息。同时支持按照页面、会话Id、浏览器、浏览器版本号进行过滤,展示相关的会话信息。点击操作后,是该会话的页面资源加载详情。

这样就完美了吗?

ARMS的前端监控可以JS埋点方式快速接入,默认监控功能包括:

澳门皇冠金沙网站 28

澳门皇冠金沙网站 29

访问量监控:基于页面和地域等维度的PV/UV访问量监控。 

访问明细

我们再思考下以下几个案例

满意度监控:基于国际通用标准算法对各类页面进行各类维度视角的满意度统计。 

如果当前会话列表中无法找到你要排查的会话信息,可以通过访问明细查找到相应的日志详细信息,在param中找到对应的sid即会话Id,然后在会话列表中查找相应的会话Id,即可以定位到想排查的会话信息。

1. 某新闻类的网站,每次看完之后,都会下拉刷新,加载新的内容,这个时候是算一次PV还是多次?

API监控:与页面监控一样,ARMS前端监控还提供各类网站API监控。 

例如:在已知用户的客户端IP的情况下,想定位相应的会话信息,即可以在访问明细中,通过t=res and 117.136.32.110 进行搜索,找到对应的会话Id。

2. 天猫商品列表页,看完一屏之后,向上滚动会再加载新的一屏,PV该算一次还是多次?

其他跟前端监控相关的各类指标。 

澳门皇冠金沙网站 30

3. 阿里云邮后台一直开着,每周上百次查看,是算一个PV还是每次查看都计算一次?

值得一提的是,与市面上大多浏览器端监控解决方案相比,ARMS前端监控还具有一大特点,那就是基于ARMS实时计算平台构建,任务可实现高度定制化。浏览器上报SDK开放了底层的求和、求平均、求百分比等统计接口,易于业务方在自定义场景下自行进行质量监控相关的扩展。也就是说使用者可以根据自己网站的属性,调用想要的数据,实现数据多样性。

根据查找到的会话Id, 就可以在会话列表中进行过滤,定位到具体的会话内容。

  1. 未关闭的浏览器tab几小时之后再次浏览,该不该再计一次PV?

  2. 查找信息时,浏览器Tab之间快速切换,切换过程中要不要计一次PV?

此外,基于应用性能指标算法(APDEX),ARMS还对应用站点及页面进行了满意度评分,可以很直观地了解到用户对站点或页面的体感。 

澳门皇冠金沙网站 31

其实还有很多其它层出不穷的场景,具体该如何去统计PV留给大家去思考, 不再展开。

据ARMS产品负责人表示,“得益于内部技术改造和优化,ARMS推出的产品价格远低于业界产品,可以使企业监控成本大幅降低。”

使用入口指南

澳门皇冠金沙网站 32

澳门皇冠金沙网站 33

1、进入访问速度菜单,如果发现页面性能较差,可以在"慢页面会话追踪Top20"中查看访问较慢的会话情况

接下来我们探讨一个大家最感兴趣的话题: 性能。先看一组我们的统计数据,淘宝旺铺页面点击率随加载时间变长从85%的点击率逐步降低到了82%,别小看这3%,在阿里这么大的体量下,3%意味着巨大的商业价值,那站在前端监控的角度,首屏是如何统计出来的呢?

澳门皇冠金沙网站 34

  • 点击详情后,可以查看具体的页面资源加载瀑布图
  • 如果Top20不满足,可以点击"更多",从而进入"会话列表"

澳门皇冠金沙网站 35

阿里中间件Aliware是阿里巴巴集团生态系统技术的基石,支撑了淘宝、天猫、聚划算等99%以上的大规模应用,被称为阿里历年双11背后的秘密武器。经过10多年的技术孵化,目前消息队列MQ、企业级分布式应用服务EDAS、性能测试PTS等近10款产品已经对用户开放。

2、进入会话追踪菜单,展示的是TOP100的会话列表信息,根据页面完全加载时间从高到底排序,排查页面资源加载情况。

回到那个刀耕火种的年代,那时候要什么没什么,都是自己动手丰衣足食。这就是手动打点阶段: 手动打点,分别在页头和首屏dom节点处new Date()打点,计算差值,作为首屏时间,再加上setTimeout(new Date标记首屏可交互时间。

澳门皇冠金沙网站 36

澳门皇冠金沙网站 37

澳门皇冠金沙网站 38

“帮助用户建立更专业的企业IT架构是Aliware的使命。”据ARMS产品负责人表示,为了给用户提供更大的优惠,ARMS商业化首发阶段还为用户提供6折优惠。用户可以登录阿里云官网,在ARMS产品中享受最新优惠活动。

至此,慢页面会话追踪功能及使用方法介绍完成。该功能可以帮助你复现用户在访问页面时的页面资源加载情况,快速定位性能瓶颈问题。

随着前端的飞速发展,手工打点的模式早已满足不了需求了。为了帮助开发人员更好地衡量和改进web性能,W3C性能小组引入了 Navigation Timing API 帮我们自动,精准的实现了性能测试的打点问题,大致地过一下,性能API里面包含了最后触发load事件,通常我们把domContentLoaded作为首屏时间。Chrome最早支持,IE跟进。

识别以下二维码,阅读更多干货

作者:中间件小哥

澳门皇冠金沙网站 39

澳门皇冠金沙网站 40

本文由澳门皇冠金沙网站-澳门金莎娱乐手机版发布于互联网科技,转载请注明出处:Performance Management)领域空白,第二篇传送门 一、

关键词: