前端错误监控以及上报方法总结

捕获错误的常见的几种方法

Global​Event​Handlers​.onerror

windows下面的全局error事件程序，当有javaSript脚本运行错误或者资源、 复制代码

至于服务端，常用的就是

了解sourceMap

对于这个功能的讲解，看阮大神的讲解是最适合不过的了，当然了解其基本设计思路也是很重要的，SourceMap其实就是一个信息文件，存储着源文件的信息及源文件与处理后文件的映射关系。我们平时vue或者react项目开发中，通过webpack配置在测试环境中默认开启生成SourceMap,出现错误能够及时重现原代码，但是正式环境我们一般是不会将SourceMap文件发布上去的，但是正式环境的代码一般都是压缩过的，所以如果报错了，一般是很难 定位到原代码的位置，这时候优秀的错误上传功能，以及平台处理错误分析就显得尤为重要了。下图就是大概的设计思路。

Navigator.sendBeacon()存在的意义

平时我们很常见网页卡顿或者直接崩溃，一般是通过window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控；具体看这篇文章，Logging Information on Browser Crashes

实现代码

  window.addEventListener('load', function () {
      sessionStorage.setItem('good_exit', 'pending');
      setInterval(function () {
         sessionStorage.setItem('time_before_crash', new Date().toString());
      }, 1000);
   });

   window.addEventListener('beforeunload', function () {
      sessionStorage.setItem('good_exit', 'true');
   });

   if(sessionStorage.getItem('good_exit') &&
      sessionStorage.getItem('good_exit') !== 'true') {
      /*
         insert crash logging code here
     */
      alert('Hey, welcome back from your crash, looks like you crashed on: ' + sessionStorage.getItem('time_before_crash'));
   }
复制代码

但是上面的编码模式存在不友好的问题，当我们尝试在卸载页面前通过上传服务器数据，为了延迟页面卸载，需要通过同步XMLHttpRequest 发送数据或者创建一个几秒的循环来延迟卸载。这样的处理可想而知不是很友好，这时候sendBeacon()就横空出世了，很简单的实现向服务器发送数据，同时又不会影响下一个页面的加载，具体如下面简单的代码实现。

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("www.youAddress.com", analyticsData);
}
复制代码

扩展阅读

7 天打造前端性能监控系统

成熟解决方案 badjs、 sentry、raven-js FunDebug

如果大神您想继续探讨或者学习更多知识，欢迎加入QQ或者微信一起探讨：854280588

转载于:https://juejin.im/post/5cba8f7fe51d456e6b5d7db3