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是下载界面),既没有表、行等观点,也没有牢固的模式和结构,所有的数据以文档(一个工具)的形式存储。但其使用方式和关系型数据库相似,而且还支持对数据确立索引,适用于高并发读写、海量数据存储和实时剖析等。

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

图1

  注重,在安装时默认会下载MongoDB Compress(一个可视化的MongoDB工具),默认下载会异常慢,建议自行下载,该工具的界面照样蛮清新的,如图2所示。

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

图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)项目治理

python工业互联网应用实战2—从需求开始

  首先确立一个项目,然后才气剖析该项目的性能和错误,如图3所示。

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

图3

  用弹框的形式来确立项目,使用了Ant Design的Model、Form等组件,如图4所示。

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

图4

3)性能剖析

  在第一个折线图标签中的过滤条件包罗项目、字段、日期等,性能指标按平均值出现,可看到每个性能指标的趋势,如图5所示。

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

图5

  按分时日统计性能平均数,在MongoDB中盘算。原先确立日期是以时间戳的形式存储的,为了便于使用Aggregate,改成字符串形式。碰着一个坑,MongoDB中的Date类型接纳的是格林尼治时间,而不是当前时区的时间,也就是说存在数据库中的时间会比当前时间早8小时。

  在第二个列表标签中,可以详细看到每条纪录的信息,包罗署理、网络等,便于在领会趋势的前提下,获悉更为细节的内容,如图6所示。

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

图6

  点击ajax那一列,可弹出详细的异步请求信息,如图7所示。

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

图7

4)错误剖析

  有三个标签,第一个也是折线图,描绘的是某个时间的错误个数;第二个是错误列表,会给出详细的错误信息,如图8所示。

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

图8

  第三个是饼图,饼图主要体现的是发生错误的浏览器漫衍情形(如图9所示),点击某一块可查看浏览器的详细版本(如图10所示)。

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

图9

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

图10

 

 

【参考资料】
PerformanceTiming

unhandledrejection 处置没有显式捕捉的 Promise 异常

狼书(卷2)

Node-区分环境

Koa从零搭建到Api实现—项目部署

koa若何毗邻MongoDB

Koa2进阶学习条记

若何盘算首屏加载时间 

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

echarts项目的优化

使用 happypack 提升 Webpack 项目构建速率

mac下的mongoDB的安装和启动

安装MongoDB报错 mkdir: /data/db: Read-only file system

$sum mongoose

 

原创文章,作者:28x29新闻网,如若转载,请注明出处:https://www.28x29.com/archives/16082.html