更新日志：

  • [v1.0.0版本更新介绍](#前端异常监控组件exceptionWatcher.js v1.0.0 版本)
  • [v1.0.1版本更新介绍](#前端异常监控组件exceptionWatcher.js v1.0.1 版本)
  • [v1.0.2版本更新介绍](#前端异常监控组件exceptionWatcher.js v1.0.2 版本)
  • [v1.0.3版本更新介绍](#前端异常监控组件exceptionWatcher.js v1.0.3 版本)

前端异常监控组件exceptionWatcher.js v1.0.0 版本

  • 介绍： 使用 exceptionless 核心后台交互接口和方法的 exceptionWatcher 是对exceptionless 进行的针对性的错误监控范围的扩展和重构。抛弃了原有的运行机制，采用新的更高效且被广泛应用的机制， 使错误更加简洁定位准确，且不会浪费过多的资源。保持原有的注册认证机制不变的情况下，对错误的监控扩展了 program(程序错误)， cnls(日志系统抛出错误)， http（请求状态错误。非200或statusText !== ‘OK’）。
  • 技术支持： Allen.sun
  • 使用手册：
如何使用组件

注意： 为了使得监测组件覆盖全面，需要在最顶引入该组件 比如在模板页中引入

1
2
3
4
5
6
7
8
9
<!-- 引入exceptionless,并注册 apiKey-->
  <script src="~/js/exceptionWatcher/exceptionless.js?apiKey=6tCY7HT7zZZgj3E1X8REqPsK0hp1E7idP0ZSqCOs"></script>
  <script src="~/js/exceptionWatcher/exceptionWatcher.js"></script>
  <script src="~/js/xxxx.js"></script>
  <script src="~/js/xxxx.js"></script>
  <script src="~/js/xxxx.js"></script>
  <script src="~/js/xxxx.js"></script>
  <script src="~/js/xxxx.js"></script>
  <script src="~/js/xxxx.js"></script>

前端异常监控组件exceptionWatcher.js v1.0.1 版本

1、新增监测列表预览信息，错误预览信息，网络状态码

2、新增详情，内核版本信息，请求错误时 页面的信息在tags中展示

迭代目的：
1、 对问题一目了然，已经解决过的问题不需要一一的打开详情
2、 修复http请求错误时无法定位到具体页面
3、 重复问题自动归类，方便统计出现的比例，相对直观的体现出问题的具体数量

前端异常监控组件exceptionWatcher.js v1.0.2 版本

  • 本次v1.0.2V版本的exceptionwatcher经历了比较大的变动，不仅加入了用户行为监控和回溯，并且加入了资源的监控和URL hash的监控，外抛了一些目前为止比较安全的功能可供外部配置和使用；
细数那些功能变化和新增：
  • 新增：
    1.行为线：

    2.行为类型： 进入页面 –> 资源加载 –>接口 –>事件 –> url hash变化 –> 输出错误 （该顺序同样为监控的顺序）；

    3.接口返回事件监控：

    4.URL hash 改变同样计入事件

    备注：虽然RNSS项目用不到 url hash的监控，但是着眼于未来，单页面应用时该监控作为用户行为的一种变得尤为重要；
    5.新增ExceptionWatcher对象
    • showDevLogger 类型：函数 作用： 手动开启：日志打印，遇到错误时，可输出监控到的行为并输出错误
      开启logger
      发生错误
    • getCookie 类型： 方法 作用 ，获取当前页面的cookie
    • getVersion 类型： 方法 作用， 获取当前监控插件的版本
    • setWatchNum 类型： 方法 作用设置监控队列的数量；数量必须是数字且不能小于6；
      6.新增返回值监测，如果不是JSON的情况下会上报

      备注：虽然在RNSS中这种直接返回HTML的做法是普遍的，但是这是极其难预期的做法，也是被摒弃的陋习。所以目前监测他同样起到了，收集的作用，一旦某天想让他变得更好就需要用到这里收集到的接口数据去有针对性的迭代，而不必花大量的事件去进行整个项目的测试。
  • 微调
    1. tag 标签不再展示错误类型，而是固定展示发生错误的页面 和 内核版本

前端异常监控组件exceptionWatcher.js v1.0.3 版本

  • 更新日期： 2020-01-03
  • 更新说明： 
    1、新增：组件自动分别线上线下环境的机制 
2、新增：手动打开组件监测功能机制 
3、新增：三种状态，分别是 'waiting', 'already', 'suspend' 
4、新增：初始化时间
5、新增：initWatcher，getWatcherState
6、修复部分已知问题 
7、优化部分机制代码。

#####验证机制说明： 参考了后端的建议判断当前的IP地址是否是线上的IP地址，所以这里对比的IP地址暂时是固定的RNSS线上IP。

详细的解读

  • 1、组件自动分别线上线下环境
    组件自动分别，无需手动操作；
  • 2、手动打开组件监测功能
    该接口是考虑到两方面：1、监测脚本调试 2、开发中临时开启用于帮助定位错误（不会主动去与后台进行交互）；
  • 3、三种状态，分别是 ‘waiting’, ‘already’, ‘failed’
    分别代表着组件的目前状态，等待中，已经就绪和暂停中。 waiting状态是未初始化等待的状态 可以转化到already状态也可以转化到 failed状态。状态变化是不可逆的。
  • 4、初始化事时间
    waiting —> already 和 waiting —> ‘suspend’ 两种事件段，单位：毫秒
  • 5、initWatcher，getWatcherState
    initWatcher 手动初始化 开发环境中开启watcher的方法
    getWatcherState 获取当前watcher状态的方法 返回值 {state:xxx, time:xxxx} state:三种状态之一 ，time：消耗的事件（毫秒）；

关于全局警告LOG的解释：