“我报名参加金石方案1期应战——瓜分10万奖池，这是我的第1篇文章，点击查看活动概略”
本期栏目将是一个系列，教授你从0-1树立一个前端监控系统（已完毕）
本章首要介绍项目的架构，我们做了什么，以及我们能够从中了解什么！
项目介绍
-
我们根据Vue2.运用vue-plugin完成项目等级的npm包监控报错，并专为Vue项目规划了监控中台
-
核心监控插件开箱即用，用户可灵敏选择全面运用或组件等级运用，可扩展性强。
-
一起我们暴露了生命周期钩子，用户可安闲拓展插件，提高了定制化水平
项目源码
-
被监控网站代码
-
闪现中台代码
-
npm包地址
-
展现地址
『技能选型』& 『架构规划』
针对团队内大部分同学的技能栈为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，个性化监控环境。
总结
本章介绍了前端监控系统的技能架构，让我们详细的了解了我们是如何树立这样的一个企业级前端监控项目，期望能够给我们带来一些启示与协助。
其他章节
- 让我们一起写一个前端监控系统吧（2）
- 让我们一起写一个前端监控系统吧（3）
