别再让你的web页面在用户浏览器端裸奔

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
应用实时监控服务ARMS - 应用监控,每月50GB免费额度
简介:

全文3000字,阅读此文大概需要8分钟

  • 如果你的应用尚未接入过前端监控,建议读者可以仔细阅读此文了解前端监控的重要性
  • 如果你的应用已经接入了前端监控,也建议读者阅读此文了解国内外前端监控产品的异同,看看目前是否已将前端监控用到了极致

什么是前端监控

如果笼统的将web开发分为前端和后端开发,那后端则数据的生产,而前端则负责数据的展现。后端代码跑在我们业务方自己的服务器上,对于代码运行过程中产生的日志,具备天然的低成本获取优势,在最原始的状态下,我们可以直接登录我们的应用服务器去捞取日志,定位线上问题。不过,事实上我们会更加依赖我们已经基于日志打造的一系列成熟的后端监控系统,来监控后端应用代码运行过程中的健壮度。

通过后端监控系统,我们已经可以清楚的知道数据生产过程中的发生的问题,那后端数据传输到浏览器的过程,以及数据在用户浏览器中呈现的过程是否都顺利完成了呢?

前端监控.png

前端监控正是在这样的背景下应运而生,前端监控重点监控页面&API的网络请求过程,以及页面在浏览器端渲染&交互的过程中是否正常。

具体来讲,网络请求过程中最核心的监控能力主要包含

  • web页面&CDN资源的加载速度
  • 每次异步请求后端API的成功率以及响应延时

页面渲染&交互过程中最核心的监控能力就是

  • 页面运行过程中的JS代码执行是否异常

前端监控重要吗

一个web系统后端产生的数据大部分都要传输到用户浏览器端进行展现,如果我们仅仅关心后端系统生产数据过程的健壮性,显然是不够的,末端用户是否真正顺利的使用了我们的前端服务,同样非常重要。

假设我们在开发过程中遇到以下业务场景:

  • 如果用户打开web页面速度每慢1s,用户跳失率可能增加10%+?
  • 用户是否会因为cdn某一个关键资源加载失败而导致页面白屏?
  • 某一个API异步调用返回大量的未登录错误占比,是否是因为我们登录入口隐藏太深?交互流程不合理?
  • 发布一个新版本后,突然爆发大量JS Error我们是否知道?

面对这些场景,如果没有前端监控,我们的web系统就相当于在线上裸奔,将会带来大量的未知运行状态,而定位线上用户偶现的前端问题,也基本上会变得不太可能。

前端监控现状

图片.png | center | 752x422

虽然前端监控很重要,不过根据云栖社区《2017中国开发者调查报告》发现,目前使用过前端监控系统的开发者占比不到50%,这个比例放到后端开发领域是无法想象的。报告数据表明,开发者没有使用过前端监控最主要原因是对前端监控的重视程度不足,认为服务端监控对前端监控具备替代效应,但是显然这个想法存在很大误区。

正如之前介绍前后端监控差异提到的点,前端监控领域中的页面访问速度和JS Error后端监控完全无法取代。虽然对于API的调用情况,后端也能拿到详细的HTTP状态码和返回结果分布,但是后端只能统计到一次请求的RT时间,对于一次请求中的其他时间消耗,诸如请求等待时间、DNS时间、TCP时间等全链路的耗时时间却无法得知,对于API调用的监控只能说具备部分可替代性。

从这个角度来讲,大家务必更加重视前端监控。随时关注我们用户在浏览器端的运行状态,这样我们才能知道用户在打开我们页面的时候到底是快还是慢,慢是因为什么原因导致;我们任何重大新版本的发布也不再提心吊胆是否有未被测试覆盖到的JS Error发生,用户端的一切运行状态也将变得更加透明。

业界前端监控产品对比

国内开发者对前端监控不重视的另外一个重要,也跟国内前端监控市场尚不成熟有关,前端监控产品在国内尚缺乏真正的独角兽,导致很多开发者没有使用过甚至没有听说过前端监控。目前国内的使用较多的APM产品仅有听云、云智慧、OneAPM,而国外市场则成熟很多,既包含传统的APM厂商如Microsoft、Oracle、Dynatrace,也包含新兴的云监控服务如Amazon CloudWatch、NewRelic等,还包括独自在前端监控领域耕耘的Sentry、RollBar、RayGun、Bugsnag、Airbrake、SessionStack等,相对来说,国外APM的市场已经很成熟,对前端监控的认可度也非常高。

接下来,我们将对比下国内外主流APM厂商提供的前端监控在核心功能上的差异。

 

核心功能点

听云

OneAPM

NewRelic

阿里云业务实时监控服务之前端监控

概览

应用整体的前端健康度

应用状态、探针版本,页面加载时间、HTML加载,页面渲染,访问量、JS错误率、Apdex指数、操作图标;流媒体监测包括应用名称,等待时间,吞吐率(rpm),错误率(%),用户体验指数及操作图标

PV统计、页面加载时间、Apdex指数、慢加载追踪、JS 错误、AJAX调用;以浏览器类型、地理位置、电信运营商"为视角对用户体验数据进行分类

页面load时间、单页面load时间;满意度指标apdex;最近访问、最近JS Error、最近Ajax

满意度、JS错误率、访问速度、API成功率趋势以及上周同比展示;PV/UV、访问量TOP页面;访问量的地理、浏览器、操作系统、分辨率分布数据

访问速度

Web Performance

Resources Timing

 (计划中)

自定义关键点测速

Js Error

错误类型聚合展示

AJAX/Fetch

错误码聚合展示

自定义统计

求和、均值、百分比

访问日志明细

日志明细查询

查询结果按地域、设备、网络动态聚合展示

部分支持,多维度属性聚合后仅支持访问速度展示

 (计划中)

多维度查看用户体验数据

按地域、设备、网络查看用户体验数据,如访问速度、JS ErrorAJAX/Fetch请求成功率

部分支持,仅访问速度展示

部分支持,仅访问速度展示

部分支持,仅支持地域维度的访问速度展示

应用设置

SDK配置

上报白名单设置

 (计划中)

APDEX自定义

 (计划中)

报警

告警历史消息;告警规则设置;告警消息通道、用户组设置

免费用户仅支持Apdex、错误率告警;高级付费用户支持性能仪表盘、拓扑地图、SLA报告等关键事务报警

支持PVApdex、访问速度、Js ErrorAJAX/Fetch、自定义统计等平台上所有的数据统计项报警

定价

产品市场价格

免费版:月pv限制1W;数据存储时长1天;

 

企业版:月pv 10W;数据存储时长90

新注册用户,免费使用专业版 15 天;

专业版:500,000 PV / 月;数据存储 30 天;

企业版:不限制 PV 数量;数据存储 365 

14天免费试用;¥149/月,包含50w PV

限时免费中、小流量场景永久免费

写在最后

写到这里,给大家推荐下阿里云业务实时监控服务之前端监控(下文简称阿里云前端监控),经过阿里内部海量业务多年精细打磨沉淀,如今已通过阿里云正式对外开放服务。目前限时免费中!小流量场景永久免费!! 欢迎体验!

阿里云前端监控的主要特点有:

  • 通过页面访问速度、页面运行稳定性、后端API调用成功率三叉戟组合定义应用前端健康度
  • 既支持优雅的静默搜集,也支持开放底层统计能力的自定义上报
  • 海量日志处理能力,秒级时效性
  • 支持按地域、设备、网络多维度查看用户体验数据
  • 前端异常事件实时报警
  • 从数据层到API层的开放服务(计划中)
  • 前后端一体化全链路监控(计划中)

如何接入阿里云前端监控

仅需2步,即可完成现有前端系统的接入,让你对自己的前端系统运行状态一览无遗。

Step 1:在阿里云前端监控控制台新建应用

登录 ARMS 控制台,在左侧菜单栏选择前端监控;点击新建应用站点,在弹出的对话框中填写站点名称后确认

新建应用

Step 2:在前端应用公共模板中新增上报代码

上报

附:阿里云业务实时监控服务(ARMS)产品体系介绍

相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
目录
相关文章
|
3天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
5天前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
28天前
|
Web App开发 XML JavaScript
Python 操作浏览器:让 Python 和 Web 世界合二为一
Python 操作浏览器:让 Python 和 Web 世界合二为一
|
28天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
39 2
|
8天前
|
前端开发 开发者
WEB自定义页面请求响应
Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过onInterceptRequest()接口来实现自定义资源请求响应 。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。
15 0
|
2月前
|
存储
在 Web 中判断页面是不是刷新
【9月更文挑战第10天】在Web开发中,判断页面是否刷新有多种方法:1) 监听`popstate`事件,检测用户是否通过历史记录访问页面;2) 记录并比较页面加载时间戳,若相差极小,则可能为刷新;3) 利用本地存储设置特定值,若该值不存在或不符合预期,则页面可能被刷新。然而,这些方法并非绝对准确。
145 3
|
3月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
52 5
html,web页面朗读文字,朗读中文,朗读英文
html,web页面朗读文字,朗读中文,朗读英文
|
3月前
|
数据处理 开发者 UED
FastAPI 的模板引擎简直太神奇啦!这就是构建动态 Web 页面的终极秘籍,快来一探究竟!
【8月更文挑战第31天】FastAPI 是一款高性能异步 Web 框架,可通过集成模板引擎(如 Jinja2 或 Mako)实现动态页面渲染。使用模板引擎可分离页面结构与数据,简化代码并提升可维护性。此外,它还提供丰富的语法支持,如循环和条件判断,从而增强页面展示效果及开发效率。通过简单的配置步骤,即可在 FastAPI 中启用模板引擎,显著改善用户体验。
269 1
|
2月前
|
数据处理 Python
Django视图:构建动态Web页面的核心技术
Django视图:构建动态Web页面的核心技术