监听内容

1 静态资源404
2 异步接口错误的上报
3 vue error错误上报
4 promise 捕获

原理

vue error 监听
- vue捕获了 vue 运行中产生的错误，故无法直接使用全局错误监听的方式监听此类错误，需使用 vue 提供的errorHandler 接口来实现对错误的监听。
js error及静态资源错误
- 均使用 addeventlistener 函数在 window 上添加 error 事件监听。
- 对于静态资源错误，不会冒泡，故上述监听函数应使用捕获模式。
- 静态资源的网络相关错误信息（如错误码）无法通过常规方式得到，故需在监听到静态资源错误的时候，对发生错误的链接发送一个 HEAD 的请求，以获取对应的网络相关错误信息。
- HEAD方法跟GET方法相同，只不过服务器响应时不会返回消息体。一个HEAD请求的响应中，HTTP头中包含的元信息应该和一个GET请求的响应消息相同。这种方法可以用来获取请求中隐含的元信息，而不用传输实体本身。也经常用来测试超链接的有效性、可用性和最近的修改。
异步接口错误
- 重写XMLHttpRequest类的 send 和 open 方法，记录相关请求参数。
- 监听readystatechange事件，当 status 为表示错误的状态码（即大于等于400）时，上报错误
promise 捕获
　当我们希望在浏览器上捕获全局错误时会监听 window 对象的 error 事件，可是 error 事件只是捕获错误而已，对于 Promise 的 reject 未处理是不会触发的。如今在业务代码中我们越来越多地使用 Promise，导致很多被放在 Promise 中处理的逻辑错误仅仅是被 reject 没有触发 error。
　　通过 unhandledrejection 事件，我们就可以捕获未处理的 reject 。
　　因为 unhandledrejection 事件的接口中不包含 error 相关的信息，故我们无法获取堆栈信息，除非在 reject 的时候入参设置为一个 error 对象（如 reject（new Error('error')）

三种错误类型

JavaScript错误

即一切跟 JavaScript 相关的错误，包括
- JavaScript运行时错误
- JavaScript语法错误
- Promise reject 未处理
- vue 运行时错误
- 用户自己抛出的错误。
这些错误的共同特点是有堆栈信息，且堆栈信息有意义。
静态资源错误
即静态资源加载错误，如图片链接404等。
这些错误的共同特点是，有 DOM 信息。
AJAX错误
即 AJAX 请求时发生的错误，如服务器返回400，500等。
这些错误的共同特点不言而喻，都是 AJAX 请求。
后续考虑升级成对 HTTP 请求的监听

压缩

使用lz-string

压缩效率

原大小的35.63%，减少了64.37%

压缩方式

gzip

gzip与deflate对比

gzip的基础是DEFLATE，DEFLATE是LZ77与哈夫曼编码的一个组合体，二者区别主要有：

两者都是使用Gzip压缩算法
deflate压缩速度略快，gzip压缩比略高。默认情况下，gzip会比deflate多压4%-6%
gzip对CPU占用要高一些，deflate是专门为保护性能的压缩模块，它仅需很小的资源来压缩文件
综上，我们更关注压缩比，故选择 gzip

错误合并逻辑

javascriptError

所在文件类型信息共5个因素一致即为同一错误

httpError

url status statusText 3个因素一致即为同一错误

resourceError

url status statusText xpath 四个因素一致即为同一错误

橘子园

前端错误监控