2022年再不知道前端监控就out了( 三 ) _前端监控

2.Promise场景

Promise场景的处理方式有所不同，当Promise被reject且没有reject处理器的时候，会触发unhandlerejection事件，所以通过监听unhandlerejection的事件来捕获错误。

export function listenerPromiseError() {window.addEventListener('unhandledrejection', (event) => {console.log('这是Promise场景中错误', event);})}

二、接口错误

对于浏览器来说，所有的接口均是基于XHR和Fetch实现的，为了捕获接口中的错误，可以通过重写该方法，然后通过接口返回的信息来判断当前接口的状况，下面以XHR为例来展示封装过程。

function newXHR() {const XMLHttpRequest = window.XMLHttpRequest;const oldXHROpen = XMLHttpRequest.prototype.open;XMLHttpRequest.prototype.open = (method, url, async) => {// 做一些自己的数据上报操作return oldXHROpen.Apply(this, arguments);}const oldXHRSend = XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.send = (body) => {// 做一些自己的数据上报操作return oldXHRSend.apply(this, arguments);}}

3.1.4 业务信息

每个产品都会有自己的业务信息，例如用户在线时长、pv、uv、用户分布等，通过获取这些业务信息才能更加清楚的了解目前产品的状况，以便产品经理更好的去规划产品的未来方向。由于每个产品业务信息多种多样，小伙伴本可以按照自己的需求进行撰写代码，此处我就不再赘述。

3.2上报

对于上报的方式无外乎两种：一种是Ajax的方式上报；另一种是通过Image的形式进行上报。目前很多大厂采用的上报方式均是通过一个1*1像素的的gif图片进行上报，既然人家都采用该种策略，那我们就来唠一唠下面两个问题。

为什么采用Image的方式上报?
没有跨域问题。因为数据服务器和后端服务器大概率是不同的域名，若采用Ajax的方式进行处理还要处理跨域问题，否则数据会被浏览器拦截。
不会阻塞页面加载，只需new Image对象即可。
图片类型很多，为什么采用gif这种格式进行上报？
其实归结为一个字——小。对于1*1px的图片，BMP结构的文件需要74字节，PNG结构的文件需要67字节，GIF结构的文件只需要43字节。同样的响应，GIF可以比BMP节约41%的流量，比PNG节约35%的流量，所以选择gif进行上报。

3.3分析