js异常监控上报

须要上报的错误类型：

• 1.静态资源加载失败
• 2.AJAX请求失败
• 3.js异常
  • 运行时错误
    • 同步错误
    • 异步错误
  • 语法错误
• 4.promise异常

异常捕获方法

1.try catch

• 注意：只能捕获同步运行时的错误，不能捕获语法错误和异步错误。
  • 捕获运行时同步错误

    try{
            var a = 1;
            var c = a + b;
            console.log(c)
        }catch(e){
            console.log(e)  //ReferenceError: b is not defined
        }
    复制代码

• 使用try catch可以很好的捕获异常并对应进行相应处理，不至于让页面挂掉，可是其存在一些弊端，好比须要在捕获异常的代码上进行包裹，会致使页面臃肿不堪，不适用于整个项目的异常捕获。

2.window.onerror

• 相比try catch来讲window.onerror提供了全局监听异常的功能：

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); // 异常堆栈信息
    };

    console.log(a);
复制代码

结果以下：

window.onerror即提供了咱们错误的信息，还提供了错误行列号，能够精准的进行定位

• 注意：window.onerror 对于静态资源异常，接口异常，都捕获不到。

  • 试下捕获异步

  window.onerror = function(messsage, source, lineno, colno, error){
          console.log('捕获到异常：',{
              messsage, source, lineno, colno, error
          })
      }
      setTimeout(function(){
          undefined.map(v=>v)
      },1000)
  复制代码

  输出：

• 注意：onerror 最好写在全部 JS 脚本的前面，不然有可能捕获不到错误；

3.使用window.addEventListener 解决捕获静态资源问题：

• 当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。这些 error 事件不会向上冒泡到 window ，不过（至少在 Firefox 中）能被单一的window.addEventListener 捕获。

<script> window.addEventListener('error',error=>{ console.log('捕获到异常：',error) },true) </script>
    <img src="./xxx/png" />
复制代码

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

• 注意：不一样浏览器下返回的 error 对象可能不一样，须要注意兼容处理。须要注意避免 addEventListener 重复监听。

异常捕获问题

跨域问题

<script src="http://cdn.xxx.com/index.js"></script>
复制代码

如今把js文件放到跨域的cdn上面，运行访问：http://localhost/8000以下：

通过分析发现，跨域以后window.onerror是没法捕获异常信息的，因此统一返回Script error.，解决方案即是script属性配置 crossorigin=”anonymous” 而且服务器添加Access-Control-Allow-Origin。

<script src="http://cdn.xxx.com/index.js" crossorigin="anonymous"></script>
复制代码

加上crossorigin=”anonymous”后如图：

2. sourceMap

解决跨域或者将脚本存放在同域以后，你可能会将代码压缩一下再发布，这时候便出现了压缩后的代码没法找到原始报错位置的问题。如图，咱们用webpack将代码打包压缩成bundle.js：

解决办法:在webpack配置中加入devtool: '#source-map'。

错误上报

经过ajax 发送数据

• 由于 Ajax 请求自己也有可能会发生异常，并且有可能会引起跨域问题，通常状况下更推荐使用动态建立 img 标签的形式进行上报

动态建立 img 标签的形式

function report(error) {
        let reportUrl = 'http://jartto.wang/report';
        new Image().src = `${reportUrl}?logs=${error}`;
    }
复制代码

总结

• 1.可疑区域增长 Try-Catch
• 2.全局监控 JS 异常 window.onerror
• 3.全局监控静态资源异常 window.addEventListener
• 4.捕获没有 Catch 的 Promise 异常：unhandledrejection
• 5.VUE errorHandler 和 React componentDidCatch
• 6.监控网页崩溃：window 对象的 load 和 beforeunload
• 7.跨域 crossOrigin 解决