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

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

本期栏目将是一个系列，教授你从0-1搭建一个前端监控系统（一周两更，预计2周更完）
后端因安全因素无法开源出来。

• 本章主要提供给读者项目结构被检测网站“表单按钮”部分的分析。

所以本章首先会给大家看看康康项目结构，然后再把被检测网站的代码给大🔥分析一下。

项目源码

• 被监控网站代码

• 显示中台代码

『技术选型』：Vue2 + axios + Echarts（前端板块）

『项目背景』：

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

『项目结构』：被检测网站 + 显示中台 + npm包「revue-monitor」 + 项目后台

被监测网站

• 被监测网站主要由如下四个部分组成

1. 淘宝首页：监测页面渲染的性能和白屏等问题

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

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

4. 在线博客：监测http错误（包括fetch和XHR）

显示中台

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

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

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

4. 中台接口错误部分：接口错误概览。

被检测网站分析

基本的HTML、CSS布局就不说了，主要聊一下几个监控逻辑

表单按钮

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

这里有一张图，涵盖了JS的主要错误。

1. EvalError错误

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

2. InternalError错误

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

3. RangeError错误

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

4. ReferenceError错误

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

5. URIError错误

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

6. TypeError错误

• 此处访问到了undefined

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

7. AsyncError错误 | Promise错误

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

• 那么这就是表单按钮的主要逻辑了！