一、国内服务

1、https://www.fundebug.com/ （支持小程序）
2、https://www.frontjs.com/ 功能比fundebug多（支持小程序）
3、阿里的ARMS https://www.aliyun.com/product/arms?spm=a2c4g.11174283.2.1.4fbf668cYscNqj
及 FdSafe（不开源）

应用实时监控服务ARMS如下：

应用实时监控服务ARMS

前端监控

4、淘宝的JSTracker
5、支付宝的saijs
6、腾讯imweb的badjs
https://slides.com/loskael/badjs/fullscreen#/
https://github.com/BetterJS/badjs-report
https://imweb.io/topic/5b67dfeaf3fbd8d9125fe7ff
7、云测评云监测 http://www.mmtrix.com/
8、UC研发效能开发的岳鹰 https://yueying.effirst.com/
9、云测的bugout https://bugout.testin.cn/ （支持小程序）
10、sentry改造后支持小程序的sdk sentry-miniapp

二、国外服务

1、https://sentry.io/welcome/
2、https://trackjs.com stackoverflow、谷歌、微软在用
3、https://instabug.com PayPal、雅虎在用
4、https://rollbar.com/ Uber、wework
5、https://www.bugsnag.com/
6、https://logrocket.com/ 支持屏幕记录
7、https://www.rrweb.io支持屏幕记录
8、apache的skywalking https://skywalking.apache.org/zh/2020-04-19-skywalking-quick-start/

三、监控静态资源加载失败和请求后端接口失败提示用户的代码

  <script>
    // 一、监控静态资源

    function listenerSourceErrorAndCallBack(callBackFunc) {
      // 当浏览器不支持 window.performance.getEntries 的时候，用下边这种方式
      window.addEventListener('error',function(e){
        console.log('e',e)
        if(!e.message){
          var typeName = e.target.localName;
          var sourceUrl = "";
          if (typeName === "link") {
            sourceUrl = e.target.href;
          } else if (typeName === "script") {
            sourceUrl = e.target.src;
          }
          alert('资源加载失败，请刷新页面或切换网络重试。('+sourceUrl+')')
          // var resourceLoadInfo = new ResourceLoadInfo(RESOURCE_LOAD, sourceUrl, typeName, "0");
          // resourceLoadInfo.handleLogInfo(RESOURCE_LOAD, resourceLoadInfo);
          callBackFunc()
        }

      }, true);
    }

    function showSourceError() {
      document.getElementsByClassName('download-mobile-config')[0]?document.getElementsByClassName('download-mobile-config')[0].innerText='资源加载错误,请刷新页面或切换网络重试':''
    }
    listenerSourceErrorAndCallBack(showSourceError);

    // 二、监控接口异常情况
    function listenerHTTPErrorAndCallBack(callBackFunc) {
      (function (xhr) {
// Capture request before any network activity occurs:
        var send = xhr.send;
        xhr.send = function (data) {
          // this.addEventListener('loadstart', onLoadStart);
          // this.addEventListener('loadend', onLoadEnd);
          // this.addEventListener('timeout', function (err) {
          //   console.error(err,xhr)
          //   alert('接口请求超时'+err)
          // });
          this.addEventListener('error', function (err) {
            console.error(err);
            callBackFunc()
            var errUrl=err.target.fundebugTemp?err.target.fundebugTemp.url:'未知网址';
            alert('接口异常，请刷新页面或切换网络重试。'+errUrl)
          });
          return send.apply(this, arguments);
        };
      })(XMLHttpRequest.prototype);


    }
    function showHTTPError() {
      document.getElementsByClassName('download-mobile-config')[0]?document.getElementsByClassName('download-mobile-config')[0].innerText='接口异常，请刷新页面或切换网络重试。':''
    }
    listenerHTTPErrorAndCallBack(showHTTPError)

  </script>

四、跨域js资源错误获取；

一般报 Script error

（一）、直接解决跨域法--常规方法

正常来说，对于跨域js资源错误获取是有限制的，需要跨域js资源所对应的服务器设置Access-Control-Allow-Origin:*，然后在跨域js资源的标签上设置 crossorigin="anonymous" （例如 <script type="text/javascript" src="https://xxxxxx.cn/js/download-plugin.js" crossorigin="anonymous" ></script>）才能获取；
兼容性

image.png

（二）、采用try catch法

<!doctype html>
<html>
<head>
  <title>Test page in http://test.com</title>
</head>
<body>
  <script src="http://another-domain.com/app.js"></script>
  <script>
  window.onerror = function (message, url, line, column, error) {
    console.log(message, url, line, column, error);
  }
  try {
    foo(); // 调用app.js中定义的foo方法
  } catch (e) {
    console.log(e);
    throw e;
  }
  </script>
</body>
</html>

https://help.aliyun.com/knowledge_detail/88579.html

（三）、改写 addEventListener法--曲线救国法该方法ios10.1 以下 Safari 不支持

兼容性

image.png

const originAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function (type, listener, options) {
  const wrappedListener = function (...args) {
    try {
      return listener.apply(this, args);
    }
    catch (err) {
      throw err;
    }
  }
  return originAddEventListener.call(this, type, wrappedListener, options);
}

// 堆栈扩展效果  我们不仅知道异常堆栈，而且还知道导致该异常的事件处理器，是在何处添加进去的
 (() => {
   const originAddEventListener = EventTarget.prototype.addEventListener;
   EventTarget.prototype.addEventListener = function (type, listener, options) {
    // 捕获添加事件时的堆栈
    const addStack = new Error(`Event (${type})`).stack;
     const wrappedListener = function (...args) {
       try {
         return listener.apply(this, args);
       }
       catch (err) {
        // 异常发生时，扩展堆栈
        err.stack += '\n' + addStack;
         throw err;
       }
     }
     return originAddEventListener.call(this, type, wrappedListener, options);
   }
 })();

作者：腾讯云加社区
链接：https://juejin.im/post/5c00a405f265da610e7fd024
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


作者：腾讯云加社区
链接：https://juejin.im/post/5c00a405f265da610e7fd024
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

五、崩溃

（一）、使用window对象的load和beforeunload

http://jasonjl.me/blog/2015/06/21/taking-action-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'));
   }

（二）、使用Service Worker

https://juejin.im/entry/5be158116fb9a049c6434f4a?utm_source=gold_browser_extension

六、卡顿

通过FPS 【每秒传输帧数(Frames Per Second)】可检测是否卡顿; 通过requestAnimationFrame API 可间接知道是否卡顿。
如何监控网页的卡顿？

七、补充资料

1、前端异常监控-看这篇就够了
2、前端零散工具集合
3、前端异常监控系统的落地
4、如何优雅处理前端异常？
5、sentry与fundebug对比

前端错误监控系统汇总

前端错误监控系统汇总

一、国内服务

二、国外服务

三、监控静态资源加载失败和请求后端接口失败提示用户的代码

四、跨域js资源错误获取；

（一）、直接解决跨域法--常规方法

（二）、采用try catch法

（三）、改写 addEventListener法--曲线救国法该方法ios10.1 以下 Safari 不支持

五、崩溃

（一）、使用window对象的load和beforeunload

（二）、使用Service Worker

六、卡顿

七、补充资料

前端错误监控系统汇总

一、国内服务

二、国外服务

三、监控静态资源加载失败和请求后端接口失败 提示用户的代码

四、跨域js资源错误获取；

（一）、直接解决跨域法--常规方法

（二）、采用try catch法

（三）、改写 addEventListener法--曲线救国法 该方法ios10.1 以下 Safari 不支持

五、崩溃

（一）、使用window对象的load和beforeunload

（二）、使用Service Worker

六、卡顿

七、补充资料

三、监控静态资源加载失败和请求后端接口失败提示用户的代码

（三）、改写 addEventListener法--曲线救国法该方法ios10.1 以下 Safari 不支持