CSDN话题挑战赛第2期
参赛话题：前端技术分享

项目介绍

我们基于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，个性化监控环境。

总结

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

上一期中我们讲了前端系统中前端的基本架构，大家想必对我们的项目有了深入的了解，本篇文章中，我们将详细介绍被监控网站，有啥值得监控，以及由此 npm 包如何书写。

由上一章的介绍我们可以知道，被监控网站分为四个部分，分别是淘宝首页、实时聊天、表单按钮、在线博客.

在开始讲解之前，我先把 npm 包的链接放上来

==> npm包

淘宝首页

此页面主要负责监控

组件加载时间

加载白屏时间、

FCP(First Contentful Paint) : 首次绘制任何文本，图像，非空白canvas或SVG的时间点.

LCP(Largest Contentful Paint) : 可视区域“内容”最大的可见元素开始出现在页面上的时间点。

那么话不多说，让我们顺序来看一下这些页面是如何被监控的！

npm 插件mixin，监控组件加载时间。

此组件并非无脑使用，我们设置了一个开关this.$options.computeTime，如果您想要使用，在组件中打开开关即可「即设置为 true 」，实现了组件化的粒度细分

import http from '../utils/request'let mixin = {beforeCreate() {// 我们在这里添加了一个属性let shouldcompute = this.$options.computeTime// 如果用户设置了这个属性，那么就可以启用mixin，获得加载时间。if (!shouldcompute) return// 获取创建之初的时间this.createTime = new Date().getTime()},mounted() {let shouldcompute = this.$options.computeTimeif (!shouldcompute) return// 获取挂载完成的时间this.endTime = new Date().getTime()// 得到加载时间let mountTime = this.endTime - this.createTime// 获取所有的节点let componentNameArr = this.$vnode.tag.split('-')// 从而获取当前节点let componentName = componentNameArr[componentNameArr.length - 1]// 将得到的数据发送给后台http.post('plugin/mount', {kind: 'experience',type: 'ComponentMountTime',// 组件名称componentName,// 组件加载时间mountTime,// 发送当前时间timeStamp: Date.now(),})},
}
// 将mixin封装起来
export default {install(Vue, options) {const oldRevue = Vue.prototype.$revueVue.prototype.$revue = Object.assign({}, oldRevue, {compnentMount: mixin})// Vue.mixin(mixin)},immediate: {install(Vue, options) {Vue.mixin(mixin)},},m: mixin}

我们特意设置了 immediate这个属性，你可以通过如下方法在main.js中进行调用。

Vue.use(revue.immediate)

npm插件判断是否白屏

import onload from '../utils/onload'
import http from '../utils/request'let blankScreen = () => {let wrapperElements = ['html', 'body', '#app']let emptyPoints = 0// function getSelector(element) {if (element.id) {return '#' + element.id} else if (element.className) {// a b c => .a.b.creturn ('.' +element.className.split(' ').filter((item) => !!item).join('.'))} else {return element.nodeName.toLowerCase()}}function isWrapper(element) {let selector = getSelector(element)if (wrapperElements.indexOf(selector) !== -1) {emptyPoints++}}// 使用 elementsFromPoint 与 isWrapper 来判断是否白屏onload(function () {for (let i = 1; i <= 9; i++) {let xElements = document.elementsFromPoint((window.innerWidth * i) / 10,window.innerHeight / 2)let yElements = document.elementsFromPoint(window.innerWidth / 2,(window.innerHeight * i) / 10)isWrapper(xElements[0])isWrapper(yElements[0])}if (emptyPoints >= 18) {let centerElements = document.elementsFromPoint(window.innerWidth / 2,window.innerHeight / 2)http.post('/plugin/blank', {kind: 'stability',type: 'blank',emptyPoints,screen: window.screen.width + 'X' + window.screen.height,viewPoint: window.innerWidth + 'X' + window.innerHeight,timeStamp: Date.now(),selector: getSelector(centerElements[0]),})}})
}export default {install(Vue, options) {const oldRevue = Vue.prototype.$revueVue.prototype.$revue = Object.assign({}, oldRevue, {blankScreen})},immediate: {install(Vue, options) {blankScreen()const oldRevue = Vue.prototype.$revueVue.prototype.$revue = Object.assign({}, oldRevue, {blankScreen})},},b: blankScreen
}

判断是否是白屏的思路是：我们对页面上的9个点分横纵进行判断是否有元素，如果18次判断全部都没有检索到元素，我们就需要向后端发送数据，让它知道这个页面发生白屏了！

npm插件，获取性能数据

import onload from '../utils/onload'
import http from '../utils/request'let timing = () => {let FMP, LCP// 加一个 if 是因为有时候这玩意是 undefinedif (PerformanceObserver) {// 增加一个性能条目的观察者new PerformanceObserver((entryList, observer) => {let perfEntries = entryList.getEntries()FMP = perfEntries[0] //startTime 2000以后observer.disconnect() //不再观察了}).observe({ entryTypes: ['element'] }) //观察页面中的意义的元素new PerformanceObserver((entryList, observer) => {let perfEntries = entryList.getEntries()LCP = perfEntries[0]observer.disconnect() //不再观察了}).observe({ entryTypes: ['largest-contentful-paint'] }) //观察页面中的意义的元素}//用户的第一次交互 点击页面onload(function () {setTimeout(() => {const { fetchStart, loadEventStart } = performance.timing// 此处直接使用 API 了let FP = performance.getEntriesByName('first-paint')[0]let FCP = performance.getEntriesByName('first-contentful-paint')[0]let loadTime = loadEventStart - fetchStart//开始发送性能指标//console.log('FP', FP)//console.log('FCP', FCP)//console.log('FMP', FMP)//console.log('LCP', LCP)http.post('/plugin/paint', {kind: 'experience', //用户体验指标type: 'paint', //统计每个阶段的时间firstPaint: FP.startTime,firstContentfulPaint: FCP.startTime,firstMeaningfulPaint: FMP?.startTime || -1,largestContentfulPaint: LCP?.startTime || -1,timeStamp: Date.now(),})http.post('/plugin/load', {kind: 'experience', //用户体验指标type: 'load', //统计每个阶段的时间loadTime,timeStamp: Date.now(),})}, 3000)})
}export default {install(Vue, options) {const oldRevue = Vue.prototype.$revueVue.prototype.$revue = Object.assign({}, oldRevue, {timing})},immediate: {install(Vue, options) {timing(Vue, options)const oldRevue = Vue.prototype.$revueVue.prototype.$revue = Object.assign({}, oldRevue, {timing})},},t: timing
}

表单页面

表单按钮 => 『监控错误内容』

表单按钮这里的逻辑主要是对常见的JS错误进行汇总，然后收集起来，发送到后端。

EvalError错误

// html
<button @click="EvalError">
// js代码
/** 如果此处非法使用 eval()，则抛出 EvalError 异常* 根据 ES9* 此异常不再会被JavaScript抛出，但是EvalError对象仍然保持兼容性
**/
EvalError() {return eval( '(' + obj + ')' )
}
复制代码

InternalError错误

// html
<button @click="InternalError">
// js代码
/*** 该错误在JS引擎内部发生，特别是当它有太多数据要处理并且堆栈增长超过其关键限制时。
*/
InternalError() {function foo() {foo()}foo()
}
复制代码

RangeError错误

// html
<button @click="RangeError">
// js
// 当数字超出允许的值范围时，将抛出此错误
RangeError() {const arr = [99, 88]arr.length = 99 ** 99
}
复制代码

ReferenceError错误

// html
<button @click="ReferenceError">
// js
// 当出现非法引用的时候报错
ReferenceError() {foo.substring(1);
}
复制代码

URIError错误

// html
<button @click="URIError">
// js
/**
* 用 encodeURI 等编码含有不合法字符的字符串，导致编解码失败
* 编码操作会将每一个字符实例替换为一到四个相对应的UTF-8编码形式的转义序列。
* 如果试图一个非高-低位完整的代理自负，将会抛出一个URIError错误
*/
URIError() {let a = encodeURI('\uD800%')console.log(a)
}
复制代码

TypeError错误

此处访问到了undefined

// html
<button @click="TypeError">
// js代码
TypeError() {window.someVar.error = 'error'
}
复制代码

AsyncError错误 | Promise错误

// html
<button @click="Async">
// js代码
AsyncError() {Promise.reject('this is an error message');
}
复制代码

npm 封装「我们如何获取错误信息？」

概述：JSError有同步错误也有异步错误，window.onerror既可以捕获同步错误也可以捕获异步错误，在Vue中有一个API叫Vue.config.errorHandler，会截取同步错误，window.onerror自然就接收被筛选出来的异步错误了，但是这个时候我们发现Promise错误并没有被window.onerror捕获到，所以我们还需要unhandledrejection来捕获这个错误，至此，所有的错误就捕获完毕了。

我们在写入我们自己的方法之前，不能直接覆盖，需要确认用户是否使用过我们使用的方法，如果没有使用过，那么我们就可以直接使用，如果使用过，那我们就调用一下call方法

const oldErrorHandler = Vue.config.errorHandler
Vue.config.errorHandler = (error, vm, info) => {if(oldErrorHandler) oldErrorHandler.call(this, error, vm, info)
}

我们需要使用一个包「StackTracey」把错误处理一下，处理成我们好处理的样子

import StackTracey from 'stacktracey'
const stack = new StackTracey(error)

使用Vue.config.errorHandler来捕获同步错误

    Vue.config.errorHandler = (error, vm, info) => {if (oldErrorHandler) oldErrorHandler.call(this, err, vm, info)const stack = new StackTracey(error)const log = {kind: "stability",errorType: "jsError",   //jsErrorsimpleUrl: window.location.href.split('?')[0].replace('#', ''),   // 页面的urltimeStamp: new Date().getTime(),   // 日志发生时间position: `${stack.items[0].column}:${stack.items[0].line}`,  // 需要处理掉无效的前缀信息fileName: stack.items[0].fileName,  //错误文件名message: stack.items[0].callee,  //错误信息detail: `${error.toString()}`,isYibu: 'false',  //是否是异步}console.error(error)axios.post('/plugin/postErrorMessage', log)}

使用window.onerror来捕获异步错误

    window.addEventListener("error", function (event) {// console.log(event)let log = {kind: "stability", //稳定性指标errorType: "jsError", //jsErrorsimpleUrl: window.location.href.split('?')[0].replace('#', ''), // 页面的urltimeStamp: new Date().getTime(), // 日志发生时间position: (event.lineno || 0) + ":" + (event.colno || 0), //行列号fileName: event.filename, //报错链接message: event.message, //报错信息detail: "null",isYibu: "ture"};axios.post('/plugin/postErrorMessage', log)},true); // true代表在捕获阶段调用,false代表在冒泡阶段捕获,使用true或false都可以

使用unhandledrejection来捕获Promise错误

    window.addEventListener("unhandledrejection", function (event) {// console.log(event)let log = {kind: "stability", //稳定性指标errorType: "jsError", //jsErrorsimpleUrl: window.location.href.split('?')[0].replace('#', ''), // 页面的urltimeStamp: new Date().getTime(), // 日志发生时间message: event.reason, //报错信息fileName: "null", //报错链接position: (event.lineno || 0) + ":" + (event.colno || 0), //行列号detail: "null",isYibu: "ture"};axios.post('/plugin/postErrorMessage', log)},true); // true代表在捕获阶段调用,false代表在冒泡阶段捕获,使用true或false都可以

博客页面「HTTP Error 页面」

主要功能： 上报页面请求报错信息

实现:

通过修改原型链的形式实现对原ajax请求、fetch请求的封装和增强，捕获并向后台发送错误数据。

以下是对监控Ajax错误的实现，我们对浏览器内置的XMLHttpRequest的open和send方法进行保存，并通过修改原型链的形式对以上两个方法进行重写和增强，正是通过这种方法我们既没有影响被监控页面原本请求业务的实现，又完成了我们捕获请求错误的目的。

let XMLHttpRequest = window.XMLHttpRequest;let oldOpen = XMLHttpRequest.prototype.open; //缓存老的open方法   XMLHttpRequest.prototype.open = function (method, url, async) {//重写open方法     if (!url.match(/plugin/)) {//防止死循环       this.logData = { method, url, async }; //增强功能,把初始化数据保存为对象的属性     }return oldOpen.apply(this, arguments);};let oldSend = XMLHttpRequest.prototype.send; //缓存老的send方法   XMLHttpRequest.prototype.send = function (body) {//重写sned方法     if (this.logData) {//如果有值，说明已经被拦截了       // ......let handler = (type) => (e) => {         let data = {//...把我们想要的数据给记录下来};tracker.postHTTP(data);};this.addEventListener("load", handler("load"), false); //传输完成，所有数据保存在 response 中       this.addEventListener("error", handler("error"), false); //500也算load,只有当请求发送不成功时才是error       this.addEventListener("abort", handler("abort"), false); //放弃     }return oldSend.apply(this, arguments);};

以下是捕获fetch请求错误的实现，其实是基于类似的思路

if (!window.fetch) return;let oldFetch = window.fetch;window.fetch = function (url, obj = { method: "GET", body: "" }) {//......return oldFetch.apply(this, arguments).then((response) => {if (!response?.ok) {console.log("test", response);// True if status is HTTP 2xx           if (!url.match(/plugin/)) {tracker.postHTTP({//这里写入我们想向后台发送的错误数据});}}}).catch((error) => {// 上报错误         console.error("I am error", error);tracker.postHTTP({//这里写入我们想向后台发送的错误数据});// throw error;       });};

websocketError部分

监听 websocket 错误通过保留原型链方法再扩展的形式实现对websocket监听,捕获到错误向后台发送错误数据。

const monitor = () => {/*    */WebSocket.prototype.oldsend = WebSocket.prototype.send;WebSocket.prototype.send = function (data) {// 记得开始时间WebSocket.prototype.startTime = new Date();// 调用原方法WebSocket.prototype.oldsend.call(this, data);};WebSocket.prototype.oldclose = WebSocket.prototype.close;WebSocket.prototype.close = function (err) {/* 错误逻辑发送数据 */WebSocket.prototype.oldclose.call(this);}};//  WebSocket.prototype...
};

项目源码

被监控网站代码
显示中台代码
npm包地址
展示地址

序言

在前面两篇文章中，我们不仅了解了此前端监控的技术架构以及页面效果，还对完成“监控”这个核心功能的 npm 包有了深入的理解。

在封装完错误监控，获取错误数据之后，让我们走进可视化屏幕的世界！

没错，本章节将介绍我们中台可视化大屏的构建过程，其中主要使用到了 Echarts。

那么话不多说，和我一起来看看吧！

Echarts 大屏一览

首页

页面性能

JS错误概况

接口错误

看完了 Echarts 做出的效果之后，你有没有迫不及待的想要上手试一试呢？

让我们仔细的聊聊 Echarts～

Tips: 我会把某一个功能的代码分析完之后全部贴上去，大家如果需要可以直接取用看效果嗷！

关于echarts

安装

下载

npm i echarts

在main.js中导入echarts并注册别名

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

使用

开发流程是在官网上找和自己需求相近的图然后对一些部分进行更改以满足自己的需求。

在下面我会给我的源代码以及几个主要用来更改图片效果的部分，不会列全，主要是常用，如果想要仔细的去看可以从这里看官方的文档Echarts

1. JS报错折线图

全部代码

// html
<div id="main" style="height: calc((100vw / 7 * 2 - 99px) * 0.67); width: calc(100vw / 7 * 2 - 99px)"></div>
// js
import titleComponentVue from './titleComponent.vue'
export default {name: 'firstGraph',components: {titleComponentVue},data() {return {time: ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30'] || [],jsErrorNumberTong: [12, 120, 430, 430, 450, 320, 120] || [],jsErrorNumberYi: [12, 225, 327, 330, 320, 220, 120] || [],na: 'JS报错趋势统计'}},mounted() {const chartDom = document.getElementById('main')const myChart = this.$echarts.init(chartDom, 'dark')let option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},backgroundColor: '#000000',// title: {//     text: 'JS报错趋势统计',//     textStyle: {//         fontFamily: "Alibaba",//         fontSize: 18,//         color: "#fff", //     }// },legend: {orient: 'vertical',data: ['同步错误', '异步错误'],right: -5,top: 15},xAxis: {type: 'category',data: this.time, // 时间boundaryGap: false},yAxis: {type: 'value',splitLine: {show: false}},series: [{name: '同步错误',type: 'line',data: this.jsErrorNumberTong,symbol: 'none',lineStyle: {// 设置线条的style等normal: {color: '#466AEB' // 折线线条颜色:红色}},itemStyle: {// 设置线条上点的颜色（和图例的颜色）normal: {color: '#466AEB'}},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [// 渐变颜色{offset: 0,color: '#466AEB'},{offset: 1,color: '#ffff'}],global: false}}},{name: '异步错误',type: 'line',symbol: 'none',data: this.jsErrorNumberYi,lineStyle: {// 设置线条的style等normal: {color: '#6BE6C1' // 折线线条颜色:红色}},itemStyle: {// 设置线条上点的颜色（和图例的颜色）normal: {color: '#6BE6C1'}},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [// 渐变颜色{offset: 0,color: '#6BE6C1'},{offset: 1,color: '#402D6B'}],global: false}}}]};myChart.setOption(option)}
}

2. 页面访问速度分布

完整代码

// html
<div id="main1" style="width: calc((100vw / 7 * 2 - 64px) * 5 / 8 );"></div>
// js
export default {name: 'thirdGraph',components: {titleComponent,fourGraph},data() {return {na: '页面访问速度分布'}},mounted() {const chartDom1 = document.getElementById('main1')const myChart1 = this.$echarts.init(chartDom1, 'dark')var option1;
const seriesLabel = {show: true,position: 'right'};option1 = {grid: {left: '10%',// right: '30%',bottom: '0%',top: '0%',containLabel: true},backgroundColor: '#000000',// title: {//     text: '页面访问速度分布',//     textStyle: {//         fontFamily: "Alibaba",//         fontSize: 18,//         color: "#fff",//     }// },tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},// grid: {//     left: 100// },// toolbox: {//   show: true,//   feature: {//     saveAsImage: {}//   }// },xAxis: {type: 'value',show: false,axisLabel: {formatter: '{value}'},splitLine: {show: false},color: 'black',},yAxis: {
axisLine: {lineStyle: {color: '#000',width: 1, //这里是为了突出显示加上的  },},splitLine: {show: false},boundaryGap: true,type: 'category',inverse: true,data: ['0', '1', '2', '3'],axisLabel: {interval: 0,formatter: function (value) {if (parseInt(value) == 0) {return '{' + value + '| } {value|' + '< 1秒   ' + '}';} else if (parseInt(value) == 1) {return '{' + value + '| } {value|' + '1-3秒   ' + '}';} else if (parseInt(value) == 2) {return '{' + value + '| } {value|' + '3-5秒 ' + '}';} else {return '{' + value + '| } {value|' + '5秒以上' + '}';}},margin: 20,rich: {value: {lineHeight: 30,align: 'center'},0: {height: 8,width: 8,align: 'center',backgroundColor: '#8ED6FA ',borderRadius: 10},1: {height: 8,width: 8,align: 'center',backgroundColor: '#6BE6C1 ',borderRadius: 10},2: {height: 8,width: 8,align: 'center',backgroundColor: '#466AEB ',borderRadius: 10},3: {height: 8,width: 8,align: 'center',backgroundColor: '#466AEB ',borderRadius: 10}}}},series: [{name: 'City Beta',type: 'bar',label: seriesLabel,data: [150, 105, 110, 178],barWidth: 13,color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#1A70F3' // 0% 处的颜色},{offset: 1,color: '#6BE6C1 ' // 100% 处的颜色}],global: false // 缺省为 false}// barCategoryGap: '100%',// boundaryGap: ['10%','10%','10%','20%']}]};myChart1.setOption(option1);}
}

3. 竖着的柱状图

完整代码

// html
<div id="main8" style="height: calc((100vw / 7 * 2 - 99px) * 0.67); width: calc(100vw / 7 * 2 - 99px)"></div>
// js
export default {components: { titleComponent },name: 'eightGraph',comments: {titleComponent},data() {return {jiekouTime: ['7-24', '7-25', '7-26', '7-27', '7-28', '7-29', '7-30']|| [],jiekouErrorNumber: [10, 52, 200, 334, 390, 330, 220] || [],na: '接口错误趋势',}},mounted() {var chartDom4 = document.getElementById('main8');var myChart4 = this.$echarts.init(chartDom4, 'dark');var option4;
option4 = {backgroundColor: '#000000',// title: {//     text: '接口错误趋势'// },tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',data: this.jiekouTime,axisTick: {alignWithLabel: true}}],yAxis: [{type: 'value',splitLine: {show: false}}],series: [{name: 'Direct',type: 'bar',barWidth: '60%',data: this.jiekouErrorNumber,color: {type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#6BE6C1' // 0% 处的颜色},{offset: 1,color: '#1A70F3' // 100% 处的颜色}],global: false // 缺省为 false}}]};
myChart4.setOption(option4);
}
}

4. 3D 地球的绘制

3D地球主要采用了 echarts-gl 的技术，并非原创，是我们团队在曾经浏览的掘金文章中学到的。

源码如下～

import 'echarts-gl'
import titleComponent from './titleComponent.vue'
export default {name: 'SevenGraph',components: {titleComponent},data() {return {myChart: null,chartDom: null,na: '用户地区分布图'}},mounted() {this.chartDom = document.getElementById('globe')this.myChart = this.$echarts.init(this.chartDom)this.mapInit()},methods: {mapInit() {console.log('xxx')const url = 'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dbf199cb27ad46839fbab926b8f94e66~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?'this.myChart.setOption({backgroundColor: '#000', //背景颜色globe: {baseTexture: url, //地球的纹理。支持图片路径的字符串，图片或者 Canvas 的对象heightTexture: url, //地球的高度纹理shading: 'lambert', //地球中三维图形的着色效果light: {ambient: {intensity: 0.2, //环境光源强度}, //环境光main: {intensity: 0.8, //光源强度}, //主光源}, //光照设置},series: {type: 'lines3D',coordinateSystem: 'globe',blendMode: 'source-over',effect: {show: true,},lineStyle: {width: 1,color: 'rgb(255, 255,255)',opacity: 0.5,trailWidth: 4,trailLength: 0.01,}, //3D飞线图data: [[[112, 40, 2], // 终点的经纬度和海拔坐标[120, 20, 1], // 起点的经纬度和海拔坐标],[[112, 40, 2],[20, -40, 1],],[[112, 40, 2],[-60, 60, 1],],[[112, 40, 2],[40, 0, 1],],[[112, 40, 2],[-20, 20, 1],],[[112, 40, 2],[-39, -40, 1],],[[112, 40, 2],[67, 43, 1],],[[112, 40, 2],[160, -18, 1],],[[112, 40, 2],[145, 66, 1],],[[112, 40, 2],[1790, 42, 1],],],},})},},
}

本章节我们主要介绍了首页的 Echarts 大屏如何绘制，相比你已经有了初步的理解。

那么我们前端监控系统的系列文章也即将走入尾声，其实前端监控系统的中台部分并不复杂，主要是 CSS 与 Echarts的运用，如何画出好看的页面，大概是值得我们一生努力探索的问题。

最后的最后，我们的反思～

项目的优点

可扩展性强

同时支持全局应用和组件级别应用

// 被监控网站的main.js
import revue, { httpError } from 'revue-monitor'
// 我们可以在mian.js中全局引入sdk
// 更灵活的，我们还可以再某个组件中，引入某个监控功能，这都是被允许的
Vue.use(revue.immediate)

个性化定制插件

// 利用发布订阅和单利模式存储一个全局的消息队列，且具有注册功能
// 我们在不同的插件处触发对应的生命周期钩子函数并给予在此处生命周期可以获取到的信息
// 当用户使用函数注册了某一个生命周期后，这个函数就成为了一个watcher
// 在某一个监控触发时(如js报错，js监控被触发),会自动执行对应watcher函数
class Topic {eventList = {}on(callback, event) {;(this.eventList[event] || (this.eventList[event] = [])).push(callback)}emit(event, ...arr) {this.eventList[event] && this.eventList[event].forEach(e => {e(...arr)});}
}const topic = new Topic()export default topic//注册函数绑定在revue上
function registLifecallBack(key, callBack) {topic.on(callBack, key)
}let errorIds= []
export default  function myRecord(id) {errorIds.push(id)
}function registLifecallBack(key, callBack) {topic.on(callBack, key)
}//被监控网站的main.js
revue.registLifecallBack("onJsError", myRecord);

项目的问题

中台网站打开的渲染时间略长，仍需优化
插件的可扩展性和个性化定制功能不够强，仍需加强插件的扩展性与定制化

架构演进的可能性

对于当前的框架来说，在监控工具上，我们的最大特点便是专注于vue项目的监控。一方面，我们可以扩展更多的流行前端开发框架如React，svelte等项目，为这些主流的前端项目设计符合其特点的监控SDK。另一方面，我们可以利用我们的监测工具易拓展的特性，形成plugin的生态(建立在线的扩展插件仓库)，集结更多的开发者完善监测工具。

在监控中台上，我们的可以将监控中台分为两个方向，一是用户自我落地的本地监控中台，我们提供更友好的使用文档和更加渐进式的中台框架（不用的模块就不必配置，框架根据配置动态加载）；另外对于在线的监控中台，我们通过提供更优质和专业的服务，小团队免费试用，在线问题解答，数据存储和管理按量付费等，不断演进在线的监控中台框架。

源码链接在开头，欢迎大家与我们共建，也欢迎大家提出宝贵的意见！

那么前端监控系统文章就到此结束啦（完结撒花）～

让我们一起写一个前端监控系统吧！相关推荐

搭建前端监控系统（二）JS错误监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能通用,却未必能够满足我们自己的需求, 所以我们自给自足. 这是搭建前端监控系统的第二章,主要是介绍如何统 ...
搭建前端监控系统（四）接口请求异常监控篇
背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点.另一点主要原因是,功能虽然通用,却未必能够满足我们自己的需求, 所以我们自给自足也许是个不错的办法. 这是搭建前端监控系统的第 ...
网页前端监控系统（错误日志，接口监控）的使用
网页前端监控系统(错误日志,接口监控)的使用开门见山地说当程序员开发网页达到一定的量级,用户的数量达到一个比较庞大的数量时,总会遇见一些怎么测试都无法复现的bug,但是用户操作的时候却能屡次碰到, ...
呀！原来这就是前端监控系统
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群在刚开始学前端的时候,那时候开发的应用总是在用户的设备中出现一些报错,开发者只知道这个型号的 ...
Day 2---vue2 从0开始写一个前端框架
项目背景:vue2 业务需求:用Vue+Element 写一个前端框架今日主线任务:完成静态登陆页面项目地址: https://gitee.com/whwbs/my_project.git 准备工 ...
一步一步搭建前端监控系统：如何将网页截图上报？
摘要: 通过录屏或者截图,快速复现BUG场景. 作者:一步一个脚印一个坑原文:搭建前端监控系统(备选)Js截图上报篇 Fundebug经授权转载,版权归原作者所有. PS:本文关于Fundebug录 ...
【Web技术】1480- 呀！原来这就是前端监控系统
在刚开始学前端的时候,那时候开发的应用总是在用户的设备中出现一些报错,开发者只知道这个型号的设备出现这个问题,但对其他信息却全然不知,比如说其他操作系统.其他设备型号.其他页面会有这个报错吗,这个报错 ...
bat脚本中获取上级目录_使用Python写一个可以监控Tomcat 运行的脚本,并且把.py文件转换成.exe文件...
使用Python写一个可以监控Tomcat 运行的脚本,并且把.py文件转换成.exe文件文章来源与博主本人的CSDN博客,博客地址:https://blog.csdn.net/weixin_435 ...
看各路单词APP不顺手索性自己写一个背单词系统
作者:王木一来源:恰好恰好本文约 3500 字预计阅读需要 8 分钟 https://github.com/Benature/WordReview 开门见山先放重点如果嫌 ...

让我们一起写一个前端监控系统吧！

项目介绍

项目源码

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

『项目背景』：

『项目结构』

1. 被监测网站

2. 显示中台

3. 监测工具SDK

总结

淘宝首页

npm 插件mixin，监控组件加载时间。

npm插件 判断是否白屏

npm插件，获取性能数据

表单页面

表单按钮 => 『监控错误内容』

npm 封装 「我们如何获取错误信息？」

博客页面「HTTP Error 页面」

websocketError部分

序言

Echarts 大屏一览

首页

页面性能

JS错误概况

接口错误

关于echarts

安装

使用

1. JS报错折线图

相关配置

全部代码

2. 页面访问速度分布

相关配置

完整代码

3. 竖着的柱状图

相关配置

完整代码

4. 3D 地球的绘制

最后的最后，我们的反思～

项目的优点

可扩展性强

个性化定制插件

项目的问题

架构演进的可能性

让我们一起写一个前端监控系统吧！相关推荐

最新文章

热门文章

npm插件判断是否白屏

npm 封装「我们如何获取错误信息？」