這套前端監控系統用到的技術棧是：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 異常
狼書（卷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
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線
※Google地圖已可更新顯示潭子電動車充電站設置地點!!
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※別再煩惱如何寫文案,掌握八大原則!
※網頁設計最專業,超強功能平台可客製化
