Web前端监控的方案_代码007(未授权)

本文介绍: 整篇文章侧重于性能监控方面，关于用户行为监控可能更多的需要和产品经理探讨，根据监控数据改变业务策略，来不断提升用户的留存和转化。性能监控，涉及的面比较广、链路比较长，针对前端开发要掌握常见的监控指标，理解监控的整个链路。

前端监控是一个非常重要的话题，对于业务的发展意义重大，就像遍布在城市各处的探头，实时监测整座城市的运行状况，保证系统的稳定、高效运行。

前端监控，对于业务和团队的重要性，不言而喻，是前端领域绕不开的一个话题。最大的意义是能了解系统的运行状态，哪些地方还有优化的空间，让App和网站运行的更流畅，从技术的角度为业务赋能，获取到更多的潜在用户。

本文更侧重于介绍用户行为数据和运行指标的上报监控链路，程序异常的异常监控一般会采用业界的主流方案，比如 s entry 这样的监控系统来辅助处理系统的错误异常。

监控的形式，主要分为两类：主动监控和被动监控。

一般监控系统，都是经过页面埋点，数据上报，后台存储，汇总统计，报警展示，优化整改等几个环节，每个环节都可以采用不同的方案来迎合业务的需求。

以上的指标，可以借助浏览器给我们提供的per form ance API(window.performance)来计算

const timing = performance.timing // DNS 解析耗时 
timing.domainLookupEnd - timing.domainLookupStart // TCP 连接耗时 
timing.connectEnd - timing.connectStart // SSL 安全连接耗时 
timing.connectEnd - timing.secureConnectionStart // 网络请求耗时
timing.responseStart - timing.requestStart // 数据传输耗时 
timing.responseEnd - timing.responseStart // DOM 解析耗时 
timing.domInteractive - timing.responseEnd // 资源加载耗时 
timing.loadEventStart - timing.domContentLoadedEventEnd /* 关键性能指标 */ // 首包时间 
timing.responseStart - timing.domainLookupStart // 白屏时间
timing.responseStart - timing.navigationStart // 首次可交互时间 
timing.domInteractive - timing.requestStart // HTML 加载完成时间， 即 DOM Ready 时间 
timing.domContentLoadedEventEnd - timing.navigationStart // 页面完全加载时间 
timing.loadEventStart - timing.navigationStart

推荐使用最后一种方案navigator.sendBeacon(), 可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器

navigator.sendBeacon(url); navigator.sendBeacon(url, data); // 页面隐藏时，上报数据 
document.addEventListener("visibilitychange", 
    function logData() { 
        if (document.visibilityState === "hidden") {
            navigator.sendBeacon("/log", analyticsData); 
        } 
    }
);