前端线上统计及监控

发表于 | 分类于

统计

第一次使用vue.js在移动端的生产环境，所以就想在这次开发中真实的测试一下Vue的性能到底如何

统计方案

  • 前端发请求，后端写日志，用storm实时处理统计

    前端发送请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    export function InfoStat (type, info) {
        var img = new Image()
        img.onload = img.onerror = function () {
            img = null
        }
        var url
        if (type === 1) {
            url = '/api/stat/err?err=' + encodeURIComponent(info)
        } else if (type === 2) {
            url = '/api/stat/time?time=' + info
        }
        img.src = url
    }

获取首屏时间

使用的方案比较粗糙，用的是performance API

1
2
3
4
5
6
var perf = (window.performance ? window.performance : window.webkitPerformance)
if (perf && perf.now) {
    InfoStat(2, perf.now())
} else {
    InfoStat(2, 1000.00)
}

在vue的主入口放置这么一行代码，所以这个时间应该是vue开始执行的时间，实际的首屏时间会比这个多一点，同时有一些低端手机不支持performance，就发送1000毫秒

结果

总体来说，85%的请求是能在1秒内开始执行的，也就是说秒开率应该是大于70%的

错误统计

主要统计了两种错误，方案也比较粗糙。

  • 运行时错误，用的是window.onerror，但是这个方案有两个问题，导致根本没法实现错误分析
    • 和自身代码无关的运行时错误也会上报，比如各种厂商定制的浏览器、webview，尤其是微信内嵌的x5和搜狗浏览器，错误不断，不断上报导致收到的错误一堆，又没有任何价值
    • 跨域限制，导致如果网站的域和js资源的域会跨域的话，收到的错误信息就是“script error.”, 没有任何信息。要想拿到详细的错误信息，必须让cdn改Access-Control-Allow-Origin头。
  • 异步请求失败
    这也是为了监控网站正常服务，及早发现线上异常，如果线上接口挂了，那错误量一上去，后端实时统计的监控就会立即发报警短信。

总结

时间统计可以更细一些，错误监控window.onerror效果不太理想，我感觉还是比较大的用处是在用一些兼容性有问题，或者是比较容易出错的地方用try catch来捕获错误，然后上报，对业务的帮助比较大。