阿里前端监控

为什么要有前端监控

随着前端项目的迭代更新,页面的代码逐渐增多,逻辑也越来越复杂,这时可能会遇到以下问题

  1. 如果用户访问我们的站点时遇到错误,我们无法在第一时间得知,还需要用户上报才能发现,而且上报也只能得到出现了错误,无法得知具体的错误信息。
  2. 不同区域的用户访问我们站点的真实速度无法得知
  3. 站点内有大量的异步网络请求,他们的性能以及成功率无法得知。

这时候就需要前端监控系统来监控Web端数据,它的基本功能:

  • 页面打开速度(网页性能和自定义测速)
  • 页面稳定性(JS错误)
  • ajax请求调用情况(API调用成功率和耗时)

阿里前端监控方案

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

阿里前端监控平台重点监控页面的加载过程和运行时状态,同时将页面加载性能、运行时异常以及 API 调用状态和耗时等数据,上报到日志服务器。之后借助阿里云控制台 提供的海量实时日志分析和处理服务,对当前线上所有真实用户的访问情况进行监控。最后通过直观的报表展示,帮助您及时发现并诊断问题。

兼容性

兼容现代主流浏览器

  • Chrome 49+
  • Firefox 36+
  • Safari 9+
  • Opera 43+
  • IE 9+
  • Edge 12+
  • Safari for iOS 9.2+
  • android_webkit 4.4.2+

接入前端监控

接入阿里前端监控前需要在控制台创建前端监控项目

scr嵌入代码接入

在应用设置页面上按提示复制代码,并粘贴在第一行,然后重启应用即可。

// 示例代码
<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"c1pj93lpys@367a7502f2bdfbb",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?"};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>
npm接入

npm接入需要先获取项目站点pid,要获取该值,请在应用设置页面的复制/粘贴BI探针标签页上,复制站点ID 文本框中的内容

// 安装依赖
npm install alife-logger --save

// main.js 插入代码
import browserLogger from 'alife-logger'
const __bl = BrowserLogger.singleton({
    pid: 'your-project-id',
    imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
});

统计指标说明

满意度

基于应用性能指标算法(APDEX),控制台对应用站点及页面进行了满意度评分

满意 -> 可容忍 -> 不满意

JS稳定性

页面的 JS 错误率

访问速度

页面的首次渲染时间

API成功率

API成功率 = 接口调用成功的样本量 / 总样本量

专业术语
  • PV: Page View 访问量, 即页面浏览量或点击量,衡量网站用户访问的网页数量;在一定统计周期内用户每打开或刷新一个页面就记录1次,多次打开或刷新同一页面则浏览量累计。
  • UV: Unique Visitor 独立访客,统计1天内访问某站点的用户数(以cookie为依据);访问网站的一台电脑客户端为一个访客。可以理解成访问某网站的电脑的数量
  • IP: Internet Protocol 独立IP数,是指1天内多少个独立的IP浏览了页面,即统计不同的IP浏览用户数量

文章作者: 徐辉波
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 徐辉波 !
评论
 上一篇
使用jsencrypt实现密码的前端加密 使用jsencrypt实现密码的前端加密
jsencrypt是js的一个使用OpenSSL加密,解密,秘钥生成类库 安装 npm install --save jsencrypt 使用 import { JSEncrypt } from 'jsencrypt' // 加密方法
2018年10月15日
下一篇 
ueditor多图上传至阿里云oss ueditor多图上传至阿里云oss
今天做百度编辑器UEditor多图上传至阿里云oss,打开的弹框中有三个功能:插入图片、本地上传和图片搜索,其中插入图片功能正常,剩余两个需要自行完善 本地上传 本地图片上传有两个坑,分别是获取token,以及成功上传后的显示 由于我
2018年10月11日
  目录