让我们一起写一个前端监控系统吧!(1)

16,470 阅读5分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情

本期栏目将是一个系列,教授你从0-1搭建一个前端监控系统(已完结)

本章主要介绍项目的架构,我们做了什么,以及大家可以从中了解什么!

动图.gif

项目介绍

  • 我们基于Vue2.利用vue-plugin实现项目级别的npm包监控报错,并专为Vue项目设计了监控中台

  • 核心监控插件开箱即用,用户可灵活选择全面应用或组件级别应用,可扩展性强。

  • 同时我们暴露了生命周期钩子,用户可自由拓展插件,提高了定制化水平

项目源码

『技术选型』& 『架构设计』

针对团队内大部分同学的技术栈为vue框架,前端顺水推舟选择了vue2,并使用vue-cli脚手架搭建了被监测网站和监控中台网站的前端项目。

SDK包的开发选择使用了npm包对监控工具打包和使用,符合当前vue + node的开发方案。

后台方面,由于团队后台比较薄弱,我们选择使用serverless函数计算作为基础架构,并使用serverlessDevs作为本地管理工具对koa应用(衍生出的应用级函数计算框架)进行本地远程同步。同时使用阿里云列表存储作为数据库数据存储和处理。由于秉承着轻后端的开发理念,尽量使用了无需担忧服务器部分配置的框架进行开发。FC函数计算和列表存储都具有按量付费,动态伸缩的特性,由云厂商进行服务器管理和安全防护,让团队内成员更加专注于业务开发而非框架设计和维护。

后端因安全因素无法开源出来。

截屏2022-09-17 下午11.42.51.png

『项目背景』:

如果你是一位前端工程师,那你一定不止一次去解决一些顽固的线上问题,你也曾想方设法复现用户的bug,结果可能都不太理想。 怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后。错误的原因可能源于机型,网络环境,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决,由此我们开发了这个前端监控系统!

『项目结构』

前端方面由于需要体现出监测功能和特性,选择将项目分为三部分,分别进行开发:

  • 被监测网站

  • 监测工具SDK

  • 监测中台网站

1. 被监测网站

我们设计了4个场景值,分别对不同的错误进行监听和处理:

截屏2022-09-13 下午3.15.29.png

  • 被监测网站主要由如下四个部分组成
  1. 淘宝首页:监测页面渲染的性能和白屏等问题

截屏2022-09-13 下午3.16.25.png

  1. 实时聊天:监测ws的链接稳定性和报错

截屏2022-09-13 下午3.18.22.png

  1. 表单按钮:监测各类同异步脚本报错

截屏2022-09-13 下午3.19.32.png

  1. 在线博客:监测http错误(包括fetch和XHR)

截屏2022-09-13 下午3.24.31.png

2. 显示中台

  • 概述

我们采用了大屏+详情页面展示的传统监控中台框架,力求把错误信息和错误趋势,PV,UV等数据更加直观有效率的展示给使用者。框架方面,我们选用了echarts和echarts-gl进行可视化处,并且利用echarts-gl的诸多功能,做出了3D效果来更加直观的显示ip位置信息。同时在UI同学的加持下,我们确保页面的风格清爽,直观,同时充满科技感。各个页面风格统一,数据显示更加人性化。一些常用的组件方面,我么采用了成熟的组件库对中台官网的某些通用但较为复杂的组件进行设计(例如时间选择器)。在保证开发效率的同时,把更多的开发精力专注在页面可视化和人性化交互。

  1. 中台首页:监控页面各项错误概览。

截屏2022-09-13 下午3.28.58.png

  1. 中台JSError部分:被监控页面中JSError的具体报错。

截屏2022-09-13 下午3.30.48.png

  1. 中台页面性能部分:FCP、FP、FMP、LCP等显示

截屏2022-09-13 下午3.33.16.png

  1. 中台接口错误部分:接口错误概览。

截屏2022-09-13 下午3.34.55.png

3. 监测工具SDK

我们结合当下主流监测系统的特点,观察到所有的监控框架几乎都是不区分开发框架的。这导致了对不同开发框架的适配性都不是很强。

  • 例如webfunny的监控工具只能停留于当前页面的监控,并不能深入到vue框架的某个组件,也无法对vue等框架特殊的生命周期机制做出监听。

同时在拓展方面,几乎所有的主流框架关于用户自身进行工具拓展的能力都比较弱,或者甚至不支持用户自行拓展监控工具,进行闭源收费处理。

针对框架不友好和拓展不友好两个方面,我们选择使用vue提供的插件机制,为vue单独定制一款解决上述问题的监测工具SDK。

  • 首先我们使用浏览器或vue框架的各种特性(例如属性,mixin,路由,指令,全局变量等),力求支持监控到vue框架的每个组件和每个生命周期,让使用者彻底掌控vue的项目的每一处监控。

  • 其次,我们会逐渐完善并开放出主要监控环节的生命周期HOOKS,使得个体开发者可以友好的扩展和优化监测工具SDK,个性化监控环境。

截屏2022-09-17 下午11.46.34.png

总结

本章介绍了前端监控系统的技术架构,让大家详细的了解了我们是如何搭建这样的一个企业级前端监控项目,希望能够给大家带来一些启发与帮助。

其他章节