Node.js躬行记（4）——自建前端监控系统
这套前端监控系统用到的技术栈是：React+MongoDB+Node.js+Koa2。将性能和错误量化。因为自己平时喜欢吃菠萝，所以就取名叫菠萝系统。其实在很早以前就有这个想法，当时已经实现了前端的参数搜集，只是后台迟迟没有动手，也就拖着。
目前完成的还只是个雏形，仅仅是搜集了错误和相关的性能参数。
后台样式采用了封装过的matrix。
分析功能还很薄弱，只是做了简单的演示，并且各种基础功能还有待完善。
后面打算强化数据分析，并且还要实现错误的回放机制，思路的话以前也调研过，参考之前的一篇文章。
现在的这个系统还只能算是个玩具，后期还需要雕琢雕琢。下面是这套系统的目录结构。
├── pingapple --------------------------------- 菠萝监控系统
│ ├── client -------------------------------- 系统的前端部分
│ ├── sdk ----------------------------------- 信息搜集代码库
│ ├── server -------------------------------- 系统的后端部分
一、SDK
1）primus.js
在之前的《前端页面性能参数搜集》一文中，详细记载了各类性能指标的计算规则，并整理到了primus.js中。
本次将在primus.js的基础上做适当的修改，包括删除代理、测速、资源信息等功能，改变部分性能指标的计算规则，例如从浏览器发起HTTP请求算起，忽略浏览器重定向的时间等。
2）错误处理
完善错误处理，将错误分成三类：runtime、load和Promise。在window的error事件中，处理前两种错误。像img元素载入的图片地址不存在，就会执行formatLoadError()函数；像变量未定义，就会执行formatRuntimerError()函数。
window.addEventListener("error", function (event) {
var errorTarget = event.target;
// 过滤 target 为 window 的异常
if (
errorTarget !== window &&
errorTarget.nodeName &&
LOAD_ERROR_TYPE[errorTarget.nodeName.toUpperCase()]
) {
handleError(formatLoadError(errorTarget));
} else {
handleError(
formatRuntimerError(
event.message,
event.filename,
event.lineno,
event.colno,
event.error
)
);
}
}, true
);
将window绑定unhandledrejection事件后，就会在Promise被拒绝且没有reject的回调函数时触发。
window.addEventListener(
"unhandledrejection",
function (event) {
// console.log('Unhandled Rejection at:', event.promise, 'reason:', event.reason);
handleError({
type: ERROR_PROMISE,
desc: event.reason,
stack: "no stack"
});
},
true
);
3）初始化
由于要计算白屏时间，DOM时间等，所以位置不能随便放，得要放在head的最后面。
<head>
<script>
window.pineapple || (pineapple = {});
pineapple.param = {
"token": "dsadasd2323dsad23dsada"
};
</script>
<script src="js/pineapple.js"></script>
</head>
二、服务端
1）Koa
Koa是由Express原班人马打造的Web轻量框架，通过组合各种中间件来避免繁琐的回调函数嵌套，当前使用的版本是V2。
npm install --save koa
使用的Koa脚手架：koa-generator，创建项目的结构，并且在此基础上做了调整（目录如下所示）。暂时还不会用到静态资源和视图层。
npm install -g koa-generator
├── server --------------------------------- 服务端
│ ├── bin -------------------------------- 命令
│ ├── config ----------------------------- 配置目录
│ ├── controllers ------------------------ MVC中的逻辑层
│ ├── db --------------------------------- MVC中的数据层
│ ├── public ----------------------------- 静态资源
│ ├── routes ----------------------------- 路由
│ ├── utils ------------------------------ 工具库
│ ├── views ------------------------------ MVC中的视图层
│ ├── app.js ----------------------------- 入口文件
为了区分开发环境和生产环境，通过cross-env统一不同系统设置环境变量的方式。
npm install --save cross-env
package.json中的命令如下，添加了环境配置。
"scripts": {
"start": "node bin/www",
"dev": "cross-env NODE_ENV=development ./node_modules/.bin/nodemon bin/www",
"prd": "cross-env NODE_ENV=production pm2 start bin/www"
}
prd按字面意思应该是生产环境的命令，其中使用了pm2，默认没有安装。还没部署过Node.js，还不清楚里面有多少坑。
npm install --save pm2
2）MongoDB
MongoDB是一个开源的非关系型数据库（图1是下载界面），既没有表、行等概念，也没有固定的模式和结构，所有的数据以文档（一个对象）的形式存储。但其使用方式和关系型数据库相似，并且还支持对数据建立索引，适用于高并发读写、海量数据存储和实时分析等。
图1
注意，在安装时默认会下载MongoDB Compress（一个可视化的MongoDB工具），默认下载会非常慢，建议自行下载，该工具的界面还是蛮清爽的，如图2所示。
图2
在Mac上配置MongoDB比较麻烦，不像Windows那样一件安装，需要一些步骤，废了点力气才装好，下面是执行的命令。
sudo mongod --dbpath=/Users/pw/data
3）Mongoose
Mongoose是MongoDB的一个ORM（Object-Document Mapper，对象文档映射）工具，可在Node.js环境中执行，封装了MongoDB操作文档的常用方法，包括引入数据库连接（connect），定义模型（model），声明文档结构（scheme），实例化模型等操作数据库的方法。
npm install --save mongoose
借鉴了以前PHP数据分层的思想，单独分离出数据库的连接，并抽象通用的Model层（如下所示）。
const mongoose = require("./db");
class Mongodb {
constructor(name, schema) {
//声明结构
const mySchema = new mongoose.Schema(schema, { typeKey: "$type" });
this.model = mongoose.model(name, mySchema);
}
//保存
save(obj) {
obj.created = Date.now(); //日期
const doc = new this.model(obj);
return new Promise((resolve, reject) => {
doc.save((err, row) => {
if (err) {
reject(err);
return;
}
resolve(row);
});
});
}
}
module.exports = {
model: Mongodb,
mongoose
};
4）路由
由于发送的地址是一张gif图片，因此在处理路由时，返回本地的一张gif图，如下所示，图像地址得是绝对路径，否则无法读取。
router.get('/pa.gif', async (ctx, next) => {
const ctr = new indexController();
ctr.collect(ctx);
const url = path.resolve(__dirname, "../public/images/blank.gif");
ctx.body = fs.readFileSync(url); //空白gif图
});
5）代理分析
在接收参数的时候分析代理所带的信息，例如浏览器、操作系统、设备等。使用的是一个第三方库：UAParser.js，四年前就关注过，当时GitHub上只有1K多个关注量，现在已经翻了4倍。
npm install --save ua-parser-js
6）假数据
制作一套合适的假数据，新增命令“npm run data”，初始化数据，便于展示。
三、后台
1）UI
后台模板采用了之前封装过的Matrix，但不会依赖Bootstrap框架。
将整个页面分成五块，分别是导航、侧边栏、面包屑、底部栏以及主体。
安装react-router的history，用于路由。
npm install --save history
期间也会安装各类依赖包，例如不支持在类中直接声明属性等。
在使用的过程中，ESLint会不时的弹出各种错误和警告，期间就不停的修改问题或查找相关配置忽略部分限制。
后台的侧边栏和面包屑等部分，会随着URL的不同而发生状态变化，本来想用多页实现，但配置要改很多，就依然做成一个SPA，只是稍微做了些改动。
组件库采用了流行的Ant Design，调用了按钮、单选框、日期等组件。
npm install --save antd
图表库使用的是ECharts，目前只用到了折线图和饼图。在引用图表时，为了优化构建，采取了按需引用的手段。
npm install --save echarts
2）项目管理
首先建立一个项目，然后才能分析该项目的性能和错误，如图3所示。
图3
用弹框的形式来创建项目，使用了Ant Design的Model、Form等组件，如图4所示。
图4
3）性能分析
在第一个折线图标签中的过滤条件包括项目、字段、日期等，性能指标按平均值呈现，可看到每个性能指标的趋势，如图5所示。
图5
按分时日统计性能平均数，在MongoDB中计算。原先创建日期是以时间戳的形式存储的，为了便于使用Aggregate，改成字符串形式。碰到一个坑，MongoDB中的Date类型采用的是格林尼治时间，而不是当前时区的时间，也就是说存在数据库中的时间会比当前时间早8小时。
在第二个列表标签中，可以详细看到每条记录的信息，包括代理、网络等，便于在了解趋势的前提下，获悉更为细节的内容，如图6所示。
图6
点击ajax那一列，可弹出具体的异步请求信息，如图7所示。
图7
4）错误分析
有三个标签，第一个也是折线图，描绘的是某个时间的错误个数；第二个是错误列表，会给出具体的错误信息，如图8所示。
图8
第三个是饼图，饼图主要体现的是发生错误的浏览器分布情况（如图9所示），点击某一块可查看浏览器的具体版本（如图10所示）。
图9
图10
【参考资料】
PerformanceTiming
unhandledrejection 处理没有显式捕获的 Promise 异常
Mongoose Schema Error: “Cast to string failed for value” when pushing object to empty array
Support for the experimental syntax 'classProperties' isn't currently enabled
Template string failing with Cannot read property 'range' of null
Disallow JSX props spreading (react/jsx-props-no-spreading)
TypeError: Cannot read property 'range' of null from template-curly-spacing
使用 happypack 提升 Webpack 项目构建速度
安装MongoDB报错 mkdir: /data/db: Read-only file system
Node.js躬行记（4）——自建前端监控系统的更多相关文章
- Node.js躬行记（6）——自制短链系统
短链顾名思义是一种很短的地址,应用广泛,例如页面中有一张二维码图片,包含的是一个原始地址(如下所示),如果二维码中的链接需要修改,那么就得发代码替换掉. 原始地址:https://github.com ...
- Node.js躬行记（1）——Buffer、流和EventEmitter
一.Buffer Buffer是一种Node的内置类型,不需要通过require()函数额外引入.它能读取和写入二进制数据,常用于解析网络数据流.文件等. 1)创建 通过new关键字初始化Buffer ...
- Node.js躬行记（2）——文件系统和网络
一.文件系统 fs模块可与文件系统进行交互,封装了常规的POSIX函数.POSIX(Portable Operating System Interface,可移植操作系统接口)是UNIX系统的一个设计 ...
- Node.js躬行记（15）——活动规则引擎
在日常的业务开发中,会包含许多的业务规则,一般就是用if-else硬编码的方式实现,这样就会增加逻辑的维护成本,若无注释,可能都无法理解规则意图. 因为一旦规则有所改变,那么就需要修改代码再发布代码, ...
- Node.js躬行记（17）——UmiJS版本升级
在2020年我刚到公司的时候,公司使用的版本还是1.0,之后为了引入微前端,迫不得已被动升级. 一.从 1.0 到 2.0 在官方文档中,有专门一页讲如何升级的,这个用户体验非常好. 一个清单列的非常 ...
- Node.js躬行记（19）——KOA源码分析（上）
本次分析的KOA版本是2.13.1,它非常轻量,诸如路由.模板等功能默认都不提供,需要自己引入相关的中间件. 源码的目录结构比较简单,主要分为3部分,__tests__,lib和docs,从名称中就可 ...
- Node.js躬行记（21）——花10分钟入门Node.js
Node.js 不是一门语言,而是一个基于 V8 引擎的运行时环境,下图是一张架构图. 由图可知,Node.js 底层除了 JavaScript 代码之外,还有大量的 C/C++ 代码. 常说 Nod ...
- Node.js躬行记（22）——Node环境升级日志
公司之前所有的 Node 项目,其环境都是 8.9.4 版本,发布于 2018 年的一个比较古老的版本. 老版本有两个比较明显的问题: Node 高版本的特性和方法都无法使用. 有些第三方新版本的包无 ...
- Node.js躬行记（23）——Worker threads
Node.js 官方提供了 Cluster 和 Child process 创建子进程,通过 Worker threads 模块创建子线程.但前者无法共享内存,通信必须使用 JSON 格式,有一定的局 ...
随机推荐
- docker-compose 命令详解
1.docker-compose的使用非常类似于docker命令的使用,但是需要注意的是大部分的compose命令都需要到docker-compose.yml文件所在的目录下才能执行. 2.[Linu ...
- PHP设计模式(一)
1)工厂模式 工厂模式是用工厂方法生成对象,而不是直接new一个对象.假设我们在Config命名空间下有一个名叫Db的数据库操作类,用普通的方法,如果我们想去创建一个Db的对象,我们会直接new一个出 ...
- Mysql添加更新删除数据-表
例如 此处拥有一个表名为 uuser 为表添加新数据 ,'); ,'); ,'); 假如只想添加uid和uname ,'小张'); 那么pas自动填充为NULL. 为表更新数据 这里把小王的pas改成 ...
- MongoDB全球云端技术盛会MongoDB.live
MongoDB全球云端技术盛会MongoDB.live,将于北京时间6月9日22:00正式开启,大会将以在线直播+按需学习相结合的方式,面向全球开发者.架构师等MongoDB 用户和爱好者免费开放,精 ...
- eatwhatApp开发实战（九）
之前我们为app在item项上添加了点击出现修改对话框,对店名进行修改的功能,其中我们会发现我们点击item和点击item上的按钮会有点击冲突.这次我们来修正下这个问题,同时介绍item项的长按点击O ...
- [SD心灵鸡汤]000.每月一则 - 索引
[SD心灵鸡汤]001.每月一则 - 2015.05 [SD心灵鸡汤]002.每月一则 - 2015.06 [SD心灵鸡汤]003.每月一则 - 2015.07 [SD心灵鸡汤]004.每月一则 - ...
- [Objective-C] 003_内存管理
Objective-C内存管理,基本原理. 1.为什么要进行内存管理? 由于移动设备的内存极其有限,所以分配每个APP使用的内存也是有限制的,app运行时内存占用较多的话,系统就会发出内存警告,严重时 ...
- 01 . Mysql简介及部署
Mysql数据库简介 什么是数据? 数据(data)是事实或观察的结果,是对客观事物的逻辑归纳,是用于表示客观事物的未经加工的原始素材,数据是信息的表现形式和载体,可以是符号,文字,数字,语音,图 ...
- jQuery-DOM增删查改
1.绑定事件 $().事件名(function(){功能}) 事件名:鼠标事件 键盘事件 表单事件 事件委托:$().on('事件名',#####'target',function(){功能}) 额外 ...
- 曹工说Spring Boot源码（29）-- Spring 解决循环依赖为什么使用三级缓存，而不是二级缓存
写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...