1. 保证产品质量 或 直接问错误监控
1.1. 前端错误分类
- 即使运行错误：代码错误
- 资源加载错误
1.2. 错误的捕捉方式
- 运行错误：
try catchwindow.onerror
- 资源加载错误:
- 用
object.onerror(script/image.onerror)。但他们不会向上冒泡所以window.onerror不能检测到 performance.getEntries()返回数组包含所有加载成功的资源，document.getElementsByTagName('img')拿到所有资源，想减知道没加载的资源Error事件捕获window.addEventListener('error', function(e){})
- 用
比如 //baidu.com/test.js 不存在，window.onerror 是冒泡不好用，但 addEventListener 可以设置 true 去捕获到。
<script>
window.addEventListener('error', function (e) {
console.log('捕获', e);
}, true);
</script>
<body>
<script src="//baidu.com/test.js"></script>
</body>
iframe 加载错误
<iframe src="http://baidu.com"
id="errFrame"></iframe>
<script>
setTimeout( function () {
var frame = document.getElementById( 'errFrame' );
console.log( frame.contentDocument );
var titleInIframe = ( frame.contentDocument.querySelector( 'title' ) )
if ( !titleInIframe ) {
alert( 'fail to load content from iframe' )
}
}, 2000 )
</script>
延伸：跨域的 js 运行错误如何捕获？Jsonp 没响应怎么捕获错误？(1. timeout 2. json-jquery plugin)
错误提示：
错误信息：script error
出错文件：
出错行号: 0
出错列号: 0
如此做才能拿到具体信息：
- 客户端在 script 标签中增加
crossorigin属性 - 服务端设置 js 资源响应头
Access-Control-Allow-Origin:*
1.3. 上报错误的原理
- 使用 trackjs 等第三方服务
- ajax 通信，但实际不这么做
- 利用 image 对象上报
(new Image()).src = 'http://baidu.com';
<img src="1.png">
<script>
window.addEventListener('error', function (e) {
console.log('捕获', e.target.outerHTML); // <img src="1.png">
// 这里可能构建一个 时间、名字 的字符串
(new Image()).src = 'http://errorCollection.com?error=' + e.target.outerHTML;
}, true);
</script>