4、自建前端監控系統 · 前端躬行記

&emsp;&emsp;這套前端監控系統用到的技術棧是：React+MongoDB+Node.js+Koa2。將性能和錯誤量化，解決業務和開發都不知道，只有用戶知道的問題，提升業務穩定性。 &emsp;&emsp;因為自己平時喜歡吃菠蘿，所以就取名叫[菠蘿系統](https://github.com/pwstrick/pineapple)。其實在很早以前就有這個想法，當時已經實現了[前端的參數搜集](https://github.com/pwstrick/Primus)，只是后臺遲遲沒有動手，也就拖著。 * 目前完成的還只是個雛形，僅僅是搜集了錯誤和相關的性能參數。 * 后臺樣式采用了封裝過的matrix。 * 分析功能還很薄弱，只是做了簡單的演示，并且各種基礎功能還有待完善。 * 后面打算強化數據分析，并且還要實現錯誤的回放機制，思路的話以前也調研過，參考之前的[一篇文章](https://www.cnblogs.com/strick/p/12206766.html)。 &emsp;&emsp;現在的這個系統還只能算是個玩具，后期還需要雕琢雕琢。下面是這套系統的目錄結構。 ~~~ ├── pingapple --------------------------------- 菠蘿監控系統 │ ├── client -------------------------------- 系統的前端部分 │ ├── sdk ----------------------------------- 信息搜集代碼庫 │ ├── server -------------------------------- 系統的后端部分 ~~~ ## 一、SDK **1）primus.js** &emsp;&emsp;在之前的《[前端頁面性能參數搜集](https://www.cnblogs.com/strick/p/5750022.html)》一文中，詳細記載了各類性能指標的計算規則，并整理到了[primus.js](https://github.com/pwstrick/Primus/blob/master/js/primus.js)中。 &emsp;&emsp;本次將在primus.js的基礎上做適當的修改，包括刪除代理、測速、資源信息等功能，改變部分性能指標的計算規則，例如從瀏覽器發起HTTP請求算起，忽略瀏覽器重定向的時間等。 **2）錯誤處理** &emsp;&emsp;完善錯誤處理，將錯誤分成三類：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 ); ~~~ &emsp;&emsp;將window綁定[unhandledrejection](https://developer.mozilla.org/zh-CN/docs/Web/Events/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）初始化** &emsp;&emsp;由于要計算白屏時間，DOM時間等，所以位置不能隨便放，得要放在head的最后面。 ~~~html <head> <script> window.pineapple || (pineapple = {}); pineapple.param = { "token": "dsadasd2323dsad23dsada" }; </script> <script src="js/pineapple.js"></script> </head> ~~~ ## 二、服務端 **1）Koa** &emsp;&emsp;[Koa](https://koa.bootcss.com/)是由Express原班人馬打造的Web輕量框架，通過組合各種中間件來避免繁瑣的回調函數嵌套，當前使用的版本是V2。 ~~~ npm install --save koa ~~~ &emsp;&emsp;使用的Koa腳手架：koa-generator，創建項目的結構，并且在此基礎上做了調整（目錄如下所示）。暫時還不會用到靜態資源和視圖層。 ~~~ npm install -g koa-generator ~~~ ~~~ ├── server --------------------------------- 服務端 │ ├── bin -------------------------------- 命令 │ ├── config ----------------------------- 配置目錄 │ ├── controllers ------------------------ MVC中的邏輯層 │ ├── db --------------------------------- MVC中的數據層 │ ├── public ----------------------------- 靜態資源 │ ├── routes ----------------------------- 路由 │ ├── utils ------------------------------ 工具庫 │ ├── views ------------------------------ MVC中的視圖層 │ ├── app.js ----------------------------- 入口文件 ~~~ &emsp;&emsp;為了區分開發環境和生產環境，通過cross-env統一不同系統設置環境變量的方式。 ~~~ npm install --save cross-env ~~~ &emsp;&emsp;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" } ~~~ &emsp;&emsp;prd按字面意思應該是生產環境的命令，其中使用了pm2，默認沒有安裝。還沒部署過Node.js，還不清楚里面有多少坑。 ~~~ npm install --save pm2 ~~~ **2）MongoDB** &emsp;&emsp;MongoDB是一個開源的非關系型數據庫（圖1是[下載界面](https://www.mongodb.com/download-center/community)），既沒有表、行等概念，也沒有固定的模式和結構，所有的數據以文檔（一個對象）的形式存儲。但其使用方式和關系型數據庫相似，并且還支持對數據建立索引，適用于高并發讀寫、海量數據存儲和實時分析等。 :-: ![](https://img.kancloud.cn/06/c5/06c5fa9b2651ab01154b2b5e978d7d49_1487x446.png =600x) 圖1 &emsp;&emsp;注意，在安裝時默認會下載[MongoDB Compress](https://www.mongodb.com/download-center/compass)（一個可視化的MongoDB工具），默認下載會非常慢，建議自行下載，該工具的界面還是蠻清爽的，如圖2所示。 :-: ![](https://img.kancloud.cn/00/6c/006cc776c4f374808aa37d855244cba9_1365x870.png =600x) 圖2 &emsp;&emsp;在Mac上配置MongoDB比較麻煩，不像Windows那樣一件安裝，需要一些步驟，廢了點力氣才裝好，下面是執行的命令。 ~~~ sudo mongod --dbpath=/Users/pw/data ~~~ **3）Mongoose** &emsp;&emsp;[Mongoose](https://mongoosejs.com/)是MongoDB的一個ORM（Object-Document Mapper，對象文檔映射）工具，可在Node.js環境中執行，封裝了MongoDB操作文檔的[常用方法](https://mongoosedoc.top/docs/index.html)，包括引入數據庫連接（connect），定義模型（model），聲明文檔結構（scheme），實例化模型等操作數據庫的方法。 ~~~ npm install --save mongoose ~~~ &emsp;&emsp;借鑒了以前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）路由** &emsp;&emsp;由于發送的地址是一張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）代理分析** &emsp;&emsp;在接收參數的時候分析代理所帶的信息，例如瀏覽器、操作系統、設備等。使用的是一個第三方庫：[UAParser.js](http://faisalman.github.io/ua-parser-js/)，四年前就關注過，當時GitHub上只有1K多個關注量，現在已經翻了4倍。 ~~~ npm install --save ua-parser-js ~~~ **6）假數據** &emsp;&emsp;制作一套合適的假數據，新增命令“npm run data”，初始化數據，便于展示。 ## 三、后臺 **1）UI** &emsp;&emsp;后臺模板采用了之前封裝過的[Matrix](https://github.com/pwstrick/grape-skin)，但不會依賴Bootstrap框架。 &emsp;&emsp;將整個頁面分成五塊，分別是導航、側邊欄、面包屑、底部欄以及主體。 &emsp;&emsp;安裝react-router的history，用于路由。 ~~~ npm install --save history ~~~ &emsp;&emsp;期間也會安裝各類依賴包，例如不支持在類中直接聲明屬性等。 &emsp;&emsp;在使用的過程中，ESLint會不時的彈出各種錯誤和警告，期間就不停的修改問題或查找相關配置忽略部分限制。 &emsp;&emsp;后臺的側邊欄和面包屑等部分，會隨著URL的不同而發生狀態變化，本來想用多頁實現，但配置要改很多，就依然做成一個SPA，只是稍微做了些改動。 &emsp;&emsp;組件庫采用了流行的[Ant Design](https://ant.design/components/button-cn/)，調用了按鈕、單選框、日期等組件。 ~~~ npm install --save antd ~~~ &emsp;&emsp;圖表庫使用的是[ECharts](https://www.echartsjs.com/zh/index.html)，目前只用到了折線圖和餅圖。在引用圖表時，為了優化構建，采取了按需引用的手段。 ~~~ npm install --save echarts ~~~ **2）項目管理** &emsp;&emsp;首先建立一個項目，然后才能分析該項目的性能和錯誤，如圖3所示。 :-: ![](https://img.kancloud.cn/a7/3f/a73f2ff02e9d0e4e596e061e7182b32b_3800x800.png =800x) 圖3 &emsp;&emsp;用彈框的形式來創建項目，使用了Ant Design的Model、Form等組件，如圖4所示。 :-: ![](https://img.kancloud.cn/13/9c/139c95d431ba0545a101fd3bbb2bd338_3800x982.png =800x) 圖4 **3）性能分析** &emsp;&emsp;在第一個折線圖標簽中的過濾條件包括項目、字段、日期等，性能指標按平均值呈現，可看到每個性能指標的趨勢，如圖5所示。 :-: ![](https://img.kancloud.cn/92/68/926838dbf45530acafc42b775ed41de6_3800x1812.png =800x) 圖5 &emsp;&emsp;按分時日統計性能平均數，在MongoDB中計算。原先創建日期是以時間戳的形式存儲的，為了便于使用Aggregate，改成字符串形式。碰到一個坑，MongoDB中的Date類型采用的是格林尼治時間，而不是當前時區的時間，也就是說存在數據庫中的時間會比當前時間早8小時。 &emsp;&emsp;在第二個列表標簽中，可以詳細看到每條記錄的信息，包括代理、網絡等，便于在了解趨勢的前提下，獲悉更為細節的內容，如圖6所示。 :-: ![](https://img.kancloud.cn/e1/12/e112aa940f5b906ac3472c89c76348de_3800x1138.png =800x) 圖6 &emsp;&emsp;點擊ajax那一列，可彈出具體的異步請求信息，如圖7所示。 :-: ![](https://img.kancloud.cn/20/5e/205ec1c9eeec43b99541d385de52f9a1_3800x1162.png =800x) 圖7 **4）錯誤分析** &emsp;&emsp;有三個標簽，第一個也是折線圖，描繪的是某個時間的錯誤個數；第二個是錯誤列表，會給出具體的錯誤信息，如圖8所示。 :-: ![](https://img.kancloud.cn/fe/ae/feaeb4394e020a3835d2da9ca3105f80_3800x1220.png =800x) 圖8 &emsp;&emsp;第三個是餅圖，餅圖主要體現的是發生錯誤的瀏覽器分布情況（如圖9所示），點擊某一塊可查看瀏覽器的具體版本（如圖10所示）。 :-: ![](https://img.kancloud.cn/ec/f2/ecf26a65dfa7116217ea0585a458c8fa_3800x1764.png =800x) 圖9 :-: ![](https://img.kancloud.cn/5b/56/5b56b375f2647b1398003cd9f3a17914_3798x1561.png =800x) 圖10 ***** > 原文出處： [博客園-Node.js躬行記](https://www.cnblogs.com/strick/category/1688575.html) [知乎專欄-Node.js躬行記](https://zhuanlan.zhihu.com/pwnode) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎閱讀。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。