阅读 1409

前端代码错误上报

对于前端来说,往往是用户反馈了才知道已经错了。

为了让前端也能和后端一样,需要将线上的 JavaScript 代码监控起来,当用户端浏览器出现异前端第一时间被通知到。

采集哪些数据

主要原则就是避开用户敏感字段,采集浏览器版本、操作系统版本、报错的 msg 信息等。

如何采集错误

前端错误大体上可以分成两类,

  1. 代码执行的错误

  2. 资源加载的错误

代码执行错误

try……catch

 try {
  init();
  // code...
} catch(e){
  Reporter.send(format(e));
}
复制代码

try-catch是最弱鸡的, 缺点是

  1. 使用try... catch 包裹,影响代码可读性。

  2. 无法处理语法错误

    try {
      var error = 'error'// 中文输入法的;
    } catch(e) {
      console.log('我感知不到错误');
      console.log(e);
    }
    复制代码
  3. 无法处理异步中的错误

    try {
      setTimeout(() => {
        error        // 异步错误
      })
    } catch(e) {
      console.log('我感知不到错误');
      console.log(e);
    }
    复制代码

window.onerror

window.onerror要强那么一丢丢。无论是异步还是非异步错误,onerror 都能捕获到运行时错误。

/**
 * @param {String}  errorMessage   错误信息
 * @param {String}  scriptURI      出错的文件
 * @param {Long}    lineNumber     出错代码的行号
 * @param {Long}    columnNumber   出错代码的列号
 * @param {Object}  errorObj       错误的详细信息,Anything
 */
window.onerror = function(errorMessage, 
scriptURI, 
lineNumber,
columnNumber,
errorObj) { 
    // code..
}
复制代码

window.onerror 的缺点:

  1. 监听不到资源加载的报错

  2. onerror 事件处理函数只能声明一次,不会重复执行多个回调:

window.addEventListener('error')

window.addEventListener 可以监听到资源加载报错,也可以注册多个事件处理函数。

var fn = window.onerror = function() {   // 只能监听到js执行的错误,无法监听资源加载的错误
  console.log(arguments);
};
window.addEventListener("error", fn);    // 可以监听到js执行的错误,和资源加载的错误
window.addEventListener("error", fn);​
复制代码

为捕获状态时(第三个参数为true)能捕获到js执行错误,也能捕获带有src的标签元素的加载错误。

为冒泡状态时(第三个参数为false)能捕获到js执行错误,不能捕获带有src的标签元素的加载错误。

window.onerror vs window.addEventListener('error')

  1. onerror 只能声明一次,而事件处理器则可以绑定多个回调函数。

  2. onerror 没有办法监听到资源加载的报错,而 addEventListener 则可以监听到。

promise 中的异常

promise 的报错比较娇贵,try ……catch, window.onerror, widow.addEventlistener 都无法监听到promise 的报错。

promise 中的报错顺序是:

  1. 如果有catch 等捕获函数,则走catch 捕获函数。catch 捕获函数如果没有抛出新的异常,则下一个then将会认为没有什么报错,every thing is so good , 会继续执行。

  2. 如果没有catch 等捕获函数,我们需要注册 window.addEventListener('unhandledrejection') 来处理。

微信小程序 app.onError

App({
onError(msg) {
 this.monitor.onError(msg);
 },
})
复制代码

微信小程序代码中没有办法获取到window对象,自然不能用window.onError, 小程序官方提供了 app.onError的方法。

sourceMap

生产环境的代码是 webpack 混淆打包之后,不好定位。

解决办法是开启webpacksource-map,我们利用webpack打包后的生成的一份.map的脚本文件就可以让浏览器对错误位置进行追踪了。

var path = require('path');
module.exports = {
    devtool: 'source-map',
    mode: 'development',
    entry: './client/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'client')
    }
}
复制代码

资源加载失败

捕获资源加载失败的方法,主要如下:

  1. imgObj.onerror()

  2. performance.getEntries() 获取到成功加载的资源,对比可以间接的捕获错误

  3. window.addEventListener('error', fn, true) 会捕获但是不冒泡,所以window.onerror 不会触发,捕获阶段可以触发

如何上报错误

  1. 采用ajax 上报

  2. 使用image上报

一般来说,大厂都是采用利用image对象的方式上报错误的;使用图片发送get请求,上报信息,由于浏览器对图片有缓存,同样的请求,图片只会发送一次,避免重复上报。

var entry = {};
function report(url, data) {
    if (!url || !data) {
        return;
    }
    // @see http://jsperf.com/new-image-vs-createelement-img
    var image = document.createElement('img');
    var items = [];
    for (var key in data) {
        if (data[key]) {
            items.push(key + '=' + encodeURIComponent(data[key]));
        }
    }
    var name = 'img_' + (+new Date());
    entry[name] = image;
    image.onload = image.onerror = function () {
      console.log(arguments);
        entry[name] =
            image =
            image.onload =
            image.onerror = null;
        delete entry[name];
    };
    image.src = url + (url.indexOf('?') < 0 ? '?' : '&') + items.join('&');
}
复制代码
文章分类
前端
文章标签