前端捕获错误

半个月过去了。。一个面试也没有。笔试倒是做了挺多，唉加油鸭

1. trycatch

• 判断一段代码是否存在异常
• 在异常代码上包裹，会让代码显得臃肿，不适用于整个项目的异常捕获

2. window.onerror

• 全局监听异常捕获
• 缺点：跨域以后window.onerror是无法捕获异常信息的，所以script属性配置 crossorigin="anonymous" 并且服务器添加Access-Control-Allow-Origin
• 统一上报到日志服务器

/** 
   * @param {String} errorMessage  错误信息 
   * @param {String} scriptURI   出错的文件 
   * @param {Long}  lineNumber   出错代码的行号 
   * @param {Long}  columnNumber  出错代码的列号 
   * @param {Object} errorObj    错误的详细信息，Anything 
   */
  window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) { 
    console.log("错误信息：" , errorMessage); 
    console.log("出错文件：" , scriptURI); 
    console.log("出错行号：" , lineNumber); 
    console.log("出错列号：" , columnNumber); 
    console.log("错误详情：" , errorObj); 
  }

3. vue捕获异常

• 在Vue中，异常可能被Vue自身给try ... catch了，不会传到window.onerror事件触发
• 使用Vue.config.errorHandler这样的Vue全局配置，可以在Vue指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和Vue 实例。

4. 日志上报

1. 使用单独的日志域名：页面初始化的过程中，会对页面加载时间、PV、UV等数据进行上报，这些上报请求会和加载业务数据几乎是同时刻发出，而浏览器一般会对同一个域名的请求量有并发数的限制，如Chrome会有对并发数为6个的限制。因此需要对日志系统单独设定域名，最小化对页面加载性能造成的影响。
2. 跨域上报

• 一种是构造空的Image对象的方式，其原因是请求图片并不涉及到跨域的问题；var url = 'xxx';new Image().src = url;
• 利用Ajax上报日志，必须对日志服务器接口开启跨域请求头部Access-Control-Allow-Origin:*，这里Ajax就并不强制使用GET请求了，即可克服URL长度限制的问题
• 省去响应主体：对于我们上报日志，其实对于客户端来说，并不需要考虑上报的结果，甚至对于上报失败，我们也不需要在前端做任何交互，所以上报来说，其实使用HEAD请求就够了，接口返回空的结果，最大地减少上报日志造成的资源浪费。