Node.js躬行记（4）——自建前端监控系统

2022-10-08 16:03:26

　　这套前端监控系统用到的技术栈是：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倍。