前端错误监控

前端错误监控

一、错误分类

1.运行时错误：这个错误往往是在写代码是造成的。如语法错误、逻辑错误等，这种错误一般在测试过程也能够发现。

2.资源加载错误：这个错误通常是找不到文件或者是文件加载超时造成的。

二、错误捕获

1.代码错误捕获

try…catch…

try{
  //运行可能出错的代码  
}catch(e) {
    //捕获错误
}

window.onerror

a.

window.onerror = function() {
  //捕获错误  
}

b.

/**
同步错误
 * @param {String}  msg    错误信息
 * @param {String}  url    出错文件
 * @param {Number}  row    行号
 * @param {Number}  col    列号
 * @param {Object}  error  错误详细信息
 */
 window.onerror = function (msg, url, row, col, error) {
  console.log('我知道错误了');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
error

c.

//异步错误
window.onerror = function (msg, url, row, col, error) {
  console.log('我知道异步错误了');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
setTimeout(() => {
  error;
});

需要注意的是， window.onerror 函数只有在返回 true的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx 。

由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等，所以还需要配合服务端日志才进行排查分析才可以。

<script>
window.addEventListener('error', (msg, url, row, col, error) => {
  console.log('我知道 404 错误了');
  console.log(
    msg, url, row, col, error
  );
  return true;
}, true);
</script>
<img src="./404.png" alt="">

在实际的使用过程中， onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。

2.资源加载错误

Object.onerror

var img=document.getElementById('#img');
img.onerror = function() {
  // 捕获错误  
}

利用 window 的 error 事件代理，但是需要注意的是 error 事件是不冒泡的，可以使用事件捕获进行代理

 window.addElementListener("error",function(){
  // 捕获错误
},true);

三、错误上报

常见的错误上报有两种：ajax、image对象（推荐）

ajax上报就是在上文注释错误捕获的地方发起ajax请求，来向服务器发送错误信息

利用image对象

function report(error) {
var reportUrl = 'http://xxxx/report';
new Image().src = reportUrl + '?' + 'error=' + error;
}

四、跨域js文件错误获取

跨域js文件获取是有限制的，如果想获取其他域下的js错误需要再script标签中添加crossorgin属性，然后服务器要设置header('Access-Control-Allow-Origin');

// http://localhost:8080/index.html
<script>
  window.onerror = function (msg, url, row, col, error) {
    console.log('我知道错误了，也知道错误信息');
    console.log({
      msg,  url,  row, col, error
    })
    return true;
  };
</script>
<script src="http://localhost:8081/test.js" crossorigin></script>

// http://localhost:8081/test.js
setTimeout(() => {
  console.log(error);
});