为什么要有前端监控
随着前端项目的迭代更新，页面的代码逐渐增多，逻辑也越来越复杂，这时可能会遇到以下问题
- 如果用户访问我们的站点时遇到错误，我们无法在第一时间得知，还需要用户上报才能发现，而且上报也只能得到出现了错误，无法得知具体的错误信息。
- 不同区域的用户访问我们站点的真实速度无法得知
- 站点内有大量的异步网络请求，他们的性能以及成功率无法得知。
这时候就需要前端监控系统来监控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浏览用户数量
