前端应用监控系统包含四部分
数据收集 SDK
数据上报网关
数据存储数据库
数据展示平台
数据收集 SDK
收集性能数据
我们通过浏览器的 performance API 获取性能数据, 其中要用到以下数据...(实际运行中发现很多时候收集到的数据是0), 还做了一些数据修正工作(抛弃负数、小数点保留三位)
/**
* 获取性能信息
*/
getPerformance() {
/** timing...${params}`;
}
}
代码中考虑了功能拓展, 第一个参数是上报数据类型(对应数据库表)
数据上报网关
网关要做的事情是, 解析数据并存储到数据库中
async function parseCommonInfo...因为存的是日志数据, 适合使用时序数据库, 经过简单对比(star数量, 相关文章, 口碑)后选择了 influxDB
中文文档
node API
使用起来没什么难度, 和其它 SQL 数据库差不多...并且配置报警项
文档
中文文档
配置文档
内置图表使用文档
启动 Grafana 后, 打开 web 端登录管理员账号, 先配置 influxDB 数据源, 然后创建图表配置数据查询就 ok 了
结语