• 中文
  • ENGLISH
别再让你的web页面在用户浏览器端裸奔
2018/01/18

本文作者:戊子

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

什么是前端监控

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

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

具体来讲,网络请求过程中最核心的监控能力主要包含
* web页面&CDN资源的加载速度
* 每次异步请求后端API的成功率以及响应延时

页面渲染&交互过程中最核心的监控能力就是
* 页面运行过程中的JS代码执行是否异常

前端监控重要吗

一个web系统后端产生的数据大部分都要传输到用户浏览器端进行展现,如果我们仅仅关心后端系统生产数据过程的健壮性,显然是不够的,末端用户是否真正顺利的使用了我们的前端服务,同样非常重要。
假设我们在开发过程中遇到以下业务场景:
* 如果用户打开web页面速度每慢1s,用户跳失率可能增加10%+?
* 用户是否会因为cdn某一个关键资源加载失败而导致页面白屏?
* 某一个API异步调用返回大量的未登录错误占比,是否是因为我们登录入口隐藏太深?交互流程不合理?
* 发布一个新版本后,突然爆发大量JS Error我们是否知道?

面对这些场景,如果没有前端监控,我们的web系统就相当于在线上