Node.js躬行記（4）——自建前端監控系統

本文轉載自查看原文 2020-06-16 07:45 546 Node.js躬行記

　　這套前端監控系統用到的技術棧是：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倍。