浏览器相关(三)前端监控生产环境中总有意想不到的情况发生，因此如果可以收集这些信息供后面分析可以继续优化项目，并提升用户

生产环境中总有意想不到的情况发生，因此如果可以收集这些信息供后面分析可以继续优化项目，并提升用户体验。

JS错误收集

参考：

onerror的函数参数有很多如下

window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {

console.log("错误信息：" , errorMessage);

console.log("出错文件：" , scriptURI);

console.log("出错行号：" , lineNumber);

console.log("出错列号：" , columnNumber);

console.log("错误详情：" , errorObj);

}

如果是非同源资源，errorMessage就被写死为"Script error"了，要在script标签上加上

ccrossorgin

1. 可以捕捉资源加载错误，(这里指的是全局捕捉，当个标签如img也可以使用onerror捕捉到加载错误，详见mdn)

2. errorHandler参数为error对象

常见的方式是使用1 * 1 像素的gif图像上报

利用图片上报的优势：

1. 不会存在跨域问题

2. 1*1 像素的gif是最小的图片

3. 兼容性好

使用 sendBeacon() 方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。

兼容性如下：

示例：