前端质量监控基本思路可以分为四个方面

错误捕获：明确需要采集哪些指标以及采集的方式。

错误上报：将上一步采集的数据以一定的策略进行上报。

数据库清洗、存储：服务端在接收到上报数据后需要对数据进行清洗和存储。

数据质量展示：数据最终会在类似 APM 这样的监控平台以图、表等形式分类别地进行可视化展示，并提供诸如监控报警等消费能力。

1.错误捕获

1.1 保证错误捕获覆盖率

1.1.0 错误基本分类（三大类、六小类）

错误捕获阶段相对来说比较繁杂，在捕获错误之前，首先你得知道前端的错误有哪几种类型，不同类型的捕获方式是什么，这样才能做到对错误捕获的不重不漏

1.1.1 预编译错误(1个)

预编译错误发生在语法解析阶段。因为JS是解释行语言，因此他的编译和代码执行是一起执行的（也就是编译一行，运行一行。编译型语言则是先统一编译完成，然后执行）。所以JS的在编译错误就发生在这一行代码的编译阶段。预编译错误就是我们平时说的语法错误，最常见的就是变量未定义抛出的错误和类型错误（现在这些错误已经可以在本地编码的时候发现了）

1.1.2 JS运行时错误(2个)

JS运行时错误主要分为两个：
1.JS业务代码错误：一个是JS业务代码执行时的错误，例如取值对象中不存在的属性的值undefined[ key ],这个时候就会报错，一般这种错误常常出现在业务中，所以我们代码一般会在对象取属性值时候兼容obj?.key1?.key2等。
2.JS框架：另一种错误就是框架错误，因为vue和react也是用JS写的，所以也算在里面。
当然这两种错误的捕获方式也是不同的。

1.1.3 HTTP请求错误(3个)

1.跨域错误
2.Promise请求错误
3.src资源加载错误
其中，跨域错误和promise请求错误一般都是AJAX的错误，因为跨域和http请求都是通过Ajax来发出请求的，而src则是绕过ajax直接发送请求（一般在image静态资源加载的时候使用）

1.2 各类型错误的捕获方式

以上不同类型的错误，捕获的方式不同，因此我们为了保证错误覆盖率，一定要考虑每种错误类型的捕获方式能够捕获到该类型错误。

1.2.1 捕获预编译错误(1个)

window.onerror

1.2.2 捕获JS运行时错误(2个)

js业务代码错误：window.onerror
框架错误：Vue.config.errorHandler

1.2.3 捕获请求错误(3个)

ajax跨域错误：window.onerror
ajax(promise)请求错误：window.addEventListener("unhandledrejection", function(e){ console.log('捕获到异常：', e); });
src资源加载错误：addEventListener('error'， cb, true)

综合下来：捕获错误的方式一共有四种，也可以归类为三种：
1.window.addEventListener('error')
2.Vue.config.errorHandler-只针对框架错误
3.window.addEventListener('unhandledrejection')-只针对promise请求错误

前端监控