实现简单的前端监控 sdk

错误分类

• JS错误
  • JS错误
  • Promise异常
• 资源异常
  • 监听error
• 页面白屏
  • 利用 elementsFromPoint

资源加载、JS异常错误捕获：

 window.addEventListener('error', (event) => {
   if (event.target && (event.target.src || event.target.href)) {
      //捕获资源加载异常
      traker.send({errorType: 'resourceError'});
   } else {
     // 捕获js error
     traker.send({errorType: 'jsError'});
   }
 }, true) 
// true代表在事件捕获阶段，由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行

目前验证（<script> <img>的资源加载404）都可以通过addEventListener error捕获到，link css资源未捕获到，待研究
一般JS运行时错误使用window.onerror捕获处理？？？？

Promise错误捕获

当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件

window.addEventListener('unhandledrejection', (event) => {
        // errorType: "promiseError"
        console.log('promiseError', event)
}, true)

效果如下

页面白屏

利用 elementsFromPoint 这个 api, 这个 api 主要是返回某一个坐标点到html所有的元素

document.elementsFromPoint(window.innerWidth / 2, window.innerHeight / 2);

如上获取当前页面屏幕中点位置向外的元素

根据这一特性 选择页面中多个点进行元素获取