客户说网页打开白屏了，怎么办？（前端异常日志收集）

前言

前段时间做项目的时候，发布功能的时候，本地是好的，测试是好的，正式也是好的，但是客户打开正式的时候白屏了，把软件删除了，重新打开了又好了，但是不能总是让用户去删除软件又重新下。所以弄了一个简单的前段监控。

window提供了一个监听页面错误的方法，具体代码如下

window.onerror = (errorMessage, scriptURI, lineNo, columnNo, error) => {
sendError({ errorMessage, scriptURI, lineNo, columnNo, error,hash:location.href}); //发送ajax
};

参数

• errorMessage 异常信息
• scriptURI 异常文件路径
• lineNo 异常行号
• columnNo 异常列号
• error 异常堆栈信息
• hash 当前页面链接

还可以根据需求添加更多信息，比如当前时间，浏览器版本，电脑类型（window or mac） 浏览器类型（谷歌 ie 之类），还可以记录是pc或者移动端，移动端又可以增加手机类型，手机网络，来排查问题是出自哪里。

优化(性能考虑)

前端报错有可能会一直报错，然后一直在发送请求给后端，然后就会浪费大量带宽，所以我们可以先放在本地，然后页面注销的时候把之前收集的消息全部一次性发送给后端,具体代码如下:

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
  console.log('errorMessage: ' + errorMessage); // 异常信息
  console.log('scriptURI: ' + scriptURI); // 异常文件路径
  console.log('lineNo: ' + lineNo); // 异常行号
  console.log('columnNo: ' + columnNo); // 异常列号
  console.log('error: ' + error); // 异常堆栈信息
  let errorInfo = {
    errorMessage,
    scriptURI,
    lineNo,
    columnNo,
    error,
    time: new Date(),
  };
  if (localStorage.getItem('errorLog')) {   //检查本地是否有错误日志
    let errorLog = JSON.parse(localStorage.getItem('errorLog')); 
    errorLog.push(errorInfo);
  } else {
    localStorage.setItem('errorLog', JSON.stringify([errorInfo])); 
  }
};

window.addEventListener(  //在页面注销时候检查是否有错误日志，如果有上传
  'unload',
  () => {
    if (localStorage.getItem('errorLog')) { //
      localStorage.removeItem('errorLog')
      //ajax 上传
    }
  },
  false
);

后言

这样一个监控页面错误日志的功能就起来了,代码地址