介绍前端监控在实际开发中的应用。

目录

  1. 前端监控是什么
  2. 为什么要有前端监控
  3. 如何为网站设置前端监控
  4. 使用原理
  5. 注意
    1. 环境区分
  6. 参考资料

前端监控是什么

前端监控主要从以下三个方面监测网站运行时的健康程度。

  • 页面打开速度
  • 页面稳定性(js报错)
  • 外部服务调用成功率(api)

为什么要有前端监控

用户访问我们的业务时,整个访问过程大致可以分为三个阶段:页面生产时(Server 端状态)、页面加载时和页面运行时。

为了保证线上业务稳定运行,我们会在 Server 端对业务的运行状态进行各种监控。现有的 Server 端监控系统相对已经很成熟了,而页面加载和页面运行时的状态监控一直比较欠缺。例如:

无法第一时间获知用户访问我们的站点时遇到的错误;
各个国家、各个地区的用户访问我们站点的真实速度未知;
每个应用内有大量的异步数据调用,而它们的性能、成功率都是未知的。

如何为网站设置前端监控

申请阿里云账号——购买服务,登录
前端监控1
前端监控2
前端监控3
前端监控4

使用原理

购买服务后,添加应用,会为你生成一个唯一阿里云监控可以识别 pid, 在应用的js代码中,通过调用cdn公开接口的方式,将pid传给阿里云,阿里云自动帮助网站进行监控。

注意

环境区分

我们需要的是线上真实用户的使用数据,因此在项目中,我们需要区分【本地、测试、dev】和【线上】环境,开发时生成两个pid。

1
2
3
4
5
6
7
8
9
10
11
if (process.env.NODE_ENV === 'production') {
!(function(c,b,d,a){
c[a]||(c[a]={});
c[a].config={pid:"honho8hw4v@29cc205fe71c7c8",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?"};
const script = document.createElement("script")
script.setAttribute("crossorigin","")
script.setAttribute("src", d)
const firstChild = document.body.firstChild
b.body.insertBefore(script, firstChild)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
}

参考资料

阿里云前端监控