讓我們一起寫一個前端監控系統吧！（1）
theme: fancy
“我報名參加金石計劃1期挑戰——瓜分10萬獎池，這是我的第1篇文章，點選檢視活動詳情”
本期欄目將是一個系列，教授你從0-1搭建一個前端監控系統（已完結）
本章主要介紹專案的架構，我們做了什麼，以及大家可以從中瞭解什麼！
專案介紹
-
我們基於Vue2.利用vue-plugin實現專案級別的npm包監控報錯，並專為Vue專案設計了監控中臺
-
核心監控外掛開箱即用，使用者可靈活選擇全面應用或元件級別應用，可擴充套件性強。
-
同時我們暴露了生命週期鉤子，使用者可自由拓展外掛，提高了定製化水平
專案原始碼
『技術選型』& 『架構設計』
針對團隊內大部分同學的技術棧為vue框架，前端順水推舟選擇了vue2，並使用vue-cli腳手架搭建了被監測網站和監控中臺網站的前端專案。
SDK包的開發選擇使用了npm包對監控工具打包和使用，符合當前vue + node的開發方案。
後臺方面，由於團隊後臺比較薄弱，我們選擇使用serverless函式計算作為基礎架構，並使用serverlessDevs作為本地管理工具對koa應用(衍生出的應用級函式計算框架)進行本地遠端同步。同時使用阿里雲列表儲存作為資料庫資料儲存和處理。由於秉承著輕後端的開發理念，儘量使用了無需擔憂伺服器部分配置的框架進行開發。FC函式計算和列表儲存都具有按量付費，動態伸縮的特性，由雲廠商進行伺服器管理和安全防護，讓團隊內成員更加專注於業務開發而非框架設計和維護。
後端因安全因素無法開源出來。
『專案背景』：
如果你是一位前端工程師，那你一定不止一次去解決一些頑固的線上問題，你也曾想方設法復現使用者的bug，結果可能都不太理想。 怎樣定位前端線上問題，一直以來，都是很頭疼的問題，因為它發生於使用者的一系列操作之後。錯誤的原因可能源於機型，網路環境，複雜的操作行為等等，在我們想要去解決的時候很難復現出來，自然也就無法解決，由此我們開發了這個前端監控系統！
『專案結構』
前端方面由於需要體現出監測功能和特性，選擇將專案分為三部分,分別進行開發:
-
被監測網站
-
監測工具SDK
-
監測中臺網站
1. 被監測網站
我們設計了4個場景值，分別對不同的錯誤進行監聽和處理：
-
被監測網站主要由如下四個部分組成
-
淘寶首頁：監測頁面渲染的效能和白屏等問題
- 實時聊天：監測ws的連結穩定性和報錯
- 表單按鈕：監測各類同非同步指令碼報錯
- 線上部落格：監測http錯誤（包括fetch和XHR）
2. 顯示中臺
- 概述
我們採用了大屏+詳情頁面展示的傳統監控中臺框架，力求把錯誤資訊和錯誤趨勢，PV，UV等資料更加直觀有效率的展示給使用者。框架方面，我們選用了echarts和echarts-gl進行視覺化處，並且利用echarts-gl的諸多功能，做出了3D效果來更加直觀的顯示ip位置資訊。同時在UI同學的加持下，我們確保頁面的風格清爽，直觀，同時充滿科技感。各個頁面風格統一，資料顯示更加人性化。一些常用的元件方面，我麼採用了成熟的元件庫對中臺官網的某些通用但較為複雜的元件進行設計(例如時間選擇器)。在保證開發效率的同時，把更多的開發精力專注在頁面視覺化和人性化互動。
- 中臺首頁：監控頁面各項錯誤概覽。
- 中臺JSError部分：被監控頁面中JSError的具體報錯。
- 中臺頁面效能部分：FCP、FP、FMP、LCP等顯示
- 中臺介面錯誤部分：介面錯誤概覽。
3. 監測工具SDK
我們結合當下主流監測系統的特點，觀察到所有的監控框架幾乎都是不區分開發框架的。這導致了對不同開發框架的適配性都不是很強。
- 例如webfunny的監控工具只能停留於當前頁面的監控，並不能深入到vue框架的某個元件，也無法對vue等框架特殊的生命週期機制做出監聽。
同時在拓展方面，幾乎所有的主流框架關於使用者自身進行工具拓展的能力都比較弱，或者甚至不支援使用者自行拓展監控工具，進行閉源收費處理。
針對框架不友好和拓展不友好兩個方面，我們選擇使用vue提供的外掛機制，為vue單獨定製一款解決上述問題的監測工具SDK。
-
首先我們使用瀏覽器或vue框架的各種特性(例如屬性，mixin，路由，指令，全域性變數等)，力求支援監控到vue框架的每個元件和每個生命週期，讓使用者徹底掌控vue的專案的每一處監控。
-
其次，我們會逐漸完善並開放出主要監控環節的生命週期HOOKS，使得個體開發者可以友好的擴充套件和優化監測工具SDK，個性化監控環境。
總結
本章介紹了前端監控系統的技術架構，讓大家詳細的瞭解了我們是如何搭建這樣的一個企業級前端監控專案，希望能夠給大家帶來一些啟發與幫助。