zoukankan      html  css  js  c++  java
  • 前端监控之白屏异常

    一、意义:
      这里和测速的白屏不同,测速的白屏是指:导航页面开始到TTFB之间的时间称之为白屏时间。白屏异常是指:用户看到的一直是白屏,页面没有任何内容。比如渲染函数报错、Vue或React路由页面没有内容、网页加载很慢很慢以至规定的时间范围内一直没内容。
      监控白屏异常能发现一些遗漏的bug并及时修复。

    二、捕获方法:
      页面加载后2秒或进入页面后12秒(兼容一些特殊页面不会触发load事件)检查关键节点是否有内容,默认检查#app节点,如果#app节点没有则检查#whiteScreen节点,查找节点是否有内容。

    let monitorWhiteScreenNode = document.querySelector('#app');
    if (!monitorWhiteScreenNode) {
        monitorWhiteScreenNode = document.querySelector('#whiteScreen');
    }
    if (monitorWhiteScreenNode) {
        setTimeout(() => {
            try {
                if (!(/w/.test(monitorWhiteScreenNode!.innerHTML))) {
                    // 重要节点没有内容
                    reportWhiteScreen({
                        detail: monitorWhiteScreenNode!.outerHTML
                    });
                }
            } catch (err) {
            }
        }, 2000);
    }
    

    三、上报参数:
    当资源加载异常时,上报以下信息:
      1、path: string // 页面url
      2、detail?: string, // 关键节点内容

  • 相关阅读:
    javascript设计模式(一)职责链模式China of responsibility
    javascript设计模式(一)策略模式Strategy
    angularjs提示消息弹出框
    Javascript设计模式(一)States
    Javascript设计模式(一)Facade
    NOIP2020
    RMQ & ST表
    NOI Linux
    初赛解析
    贪心大解析
  • 原文地址:https://www.cnblogs.com/chenjef/p/14731976.html
Copyright © 2011-2022 走看看