• 从零开始搞监控系统(7)——监控页面奔溃


      页面奔溃包含两种场景,第一种是浏览器在加载网页时遇到问题导致的奔溃,另一种是因为脚本渲染出错导致页面空白无内容的奔溃。

      前段时间运营抱怨有张活动页出现了空白(第二种奔溃场景),导致用户无法访问,希望我们能主动监控到这种情况,而不是通过用户的上报。

      后面和运维沟通,他那边目前只能监控接口的访问情况,无法监控静态资源,若要监控得自己想办法实现。

      首先想到的自然是利用现有的监控系统来了解页面空白情况,例如某个项目5分钟内没有监控日志,那就认为出现了页面奔溃。

      急匆匆的写了段定时任务,放到线上运行,发现这样监控会有一个很大漏洞。因为某些项目的访问量本来就不高,5分钟内没有日志是属于正常情况,所以只得作罢。

    一、页面奔溃

      首先来解决第一种奔溃场景,在网上搜了些关键字,发现了些有用的资料,例如如何监控网页崩溃前端崩溃监控优化历程等。

      这些资料提供了一个全新的思路来监控页面奔溃,基于Service Worker的崩溃统计方案。

      简单地说就是一种心跳检测机制,在页面的脚本中创建Service Worker工作线程,然后定时地向该线程发送消息,即使网页奔溃了,线程还能存活。

      在线程中接收消息并比对时间,当间隔时间大于15秒时,就认为超时没有心跳了,页面处于奔溃阶段,向监控系统上报相关信息。

      在我操刀实现的时候,Service Worker没有运行成功,后面就改成了Web Worker

      工作线程的代码保存在sw.js(如下所示),在参考一篇Web Workers的文章时,他提到在线程中可以navigator对象,该对象正好有个sendBeacon()方法,可用于跨域请求。

      但是没想到线程中用的WorkerNavigator,并没有该方法,后面无奈改成了fetch()

      但是有跨域问题,要么在响应时加上跨域头,要么就无视直接发送,因为浏览器只会拦截响应不会拦截请求。

    var CHECK_CRASH_INTERVAL = 10 * 1000;     // 每 10s 检查一次
    var CRASH_THRESHOLD = 15 * 1000;          // 15s 超过15s没有心跳则认为已经 crash
    var pages = {}, timer;
    function send(param) {
        fetch(param.src);
    };
    function checkCrash() {
      var now = Date.now()
      for (var id in pages) {
        var page = pages[id];
        if ((now - page.t) > CRASH_THRESHOLD) {
          // 上报 crash
          delete pages[id];
          send(page.data);
        }
      }
      if (Object.keys(pages).length == 0) {
        clearInterval(timer)
        timer = null
      }
    }
    self.addEventListener('message', (e) => {
      var data = e.data;
      if (data.type === 'heartbeat') {
        // console.log('heartbeat');
        pages[data.id] = {
          t: Date.now(),
          data: data.data
        }
        if (!timer) {
          timer = setInterval(function () {
            checkCrash()
          }, CHECK_CRASH_INTERVAL)
        }
      } else if (data.type === 'unload') {
        delete pages[data.id]
      }
    })

      在网页中加的代码如下,由于Worker加载的脚本有同源策略的限制,所以脚本和页面需要在相同的域名中。

    function monitorCrash(param) {
      var isCrash = param.isCrash;
      if (!isCrash || !window.Worker) return;
      var worker = new Worker("/sw.js");
      var HEARTBEAT_INTERVAL = 5 * 1000; // 每五秒发一次心跳
      var sessionId = getIdentity();
      var heartbeat = function () {
          worker.postMessage({
            type: "heartbeat",
            id: sessionId,
            data: {
              //在页面奔溃时,上报数据,需要将上报地址一起传递
              src: param.src
            }
          });
      };
      window.addEventListener("beforeunload", function () {
        worker.postMessage({
          type: "unload",
          id: sessionId
        });
      });
      var timer = setInterval(heartbeat, HEARTBEAT_INTERVAL);
      heartbeat();
    }

      上线后先在管理后台做测试,管理后台使用的是PC浏览器,马上就发现了比较严重的误报问题。

      分析下来有可能是网页在标签栏不活动的时候,影响了定时器的执行,再次活动计算两个时间段的间隔,很有可能超出了15秒,而上报奔溃日志。

      鉴于此,在没有完美解决方案之前,暂时将此功能下架。

    二、页面空白

      再来解决第二种奔溃场景,现在开发都会依托React或Vue等库或框架,而这些都是用脚本来渲染出DOM结构的。

      一旦在渲染时出现脚本错误(例如未定义的变量、浏览器不支持的语法等)就会中断渲染,从而就会出现页面无内容的情况。

      这类监控并不需要使用Web Worker,只要我的监控SDK在业务脚本之前引入,就能保证监控代码正常运行。

      监控原理就是加个定时器,查看渲染容器中是否是空白,若是空白就上报并关闭定时器,否则循环监控。

      例如后台管理系统采用的是React,在HTML中会声明一个div元素,内容都会渲染到该元素中。

    <div id="root"></div>

      自定义一个判断条件,如下所示,在定时器中循环执行。

    document.getElementById("root").innerHTML.length > 0

      此处还有个小坑,就是定时器的运行时机,不能太早,太早判断的话,div元素中肯定没有内容,后面就将判断时机移到了DOMContentLoaded事件中。

  • 相关阅读:
    c++ this *this
    名称空间
    c++ 静态持续变量
    c++ 数组
    c++ 头文件
    实例化和具体化详解
    在linux下安装eclipse以及运行c++程序的安装步骤
    在centos (linux) 搭建 eclipse c++开发分环境
    Linux上使用Qt Creator进行C/C++开发
    使用Qt Creator 2.60编写C/C++程序
  • 原文地址:https://www.cnblogs.com/strick/p/14986378.html
走看看 - 开发者的网上家园