前端错误监控系统汇总

一、国内服务

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/

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

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

一般报 Script error

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

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

image.png

（二）、采用try catch法

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对比