web 端 bug 监控与收集（一）

出现 bug 时，最困难的并不是 bug 本身，而是如何找到这个 bug，解决 bug 需要 1 分钟，而找到 bug 需要 1 小时。

需求

用户：你们网页中的按钮点击没反应了，我不能提交订单了！

客服：我们检查一下没遇到您说的问题，请问您使用的浏览器是？

用户：chrome 浏览器。

客服：我们也用的 chrome 浏览器，您要不换个浏览器试试

用户：买个东西还这么麻烦不买了！！！

开发：要怎么复现用户遇到的 bug 呢？

用户遇到问题时，我们巴不得能飞到用户的电脑前，我们能熟练的在控制台中查找到 bug 出现的原因，但用户距离我们十万八千里，是否就无能为力了呢？

对 bug 进行分类

bug 可以简单分为以下几类：

  • JS 异常
  • 静态资源加载异常
  • 网络请求异常

捕获 bug

捕获 js 异常

1
2
3
4
5
6
window.onerror = (msg, url, line, col, err) => {
 	handler()
}
window.onunhandledrejection = event => {
	handler()   
}

捕获静态资源加载异常

1
2
3
4
5
6
window.addEventListener('error', function (event) {
        let errorTarget = event.target
        if (errorTarget && errorTarget.baseURI) {
        	handler()
        }
    }, true)

捕获网络请求异常

1
2
3
4
5
6
7
8
9
10
11
window.XMLHttpRequest = function () {
    let XML = new XMLHttpRequest
    
    XML.addEventListener("readystatechange", handler)
    XML.addEventListener("error", handler)
    XML.addEventListener("timeout", handler)
    XML.addEventListener("loadstart", handler)
    XML.addEventListener("loadend", handler)

    return XML
}

直接看到用户的操作

有些错误可能是一系列操作之后才产生的，怎么能够直观的看到呢？

这里有一个录制鼠标事件的库，可以通过这个库，对用户的操作进行录制，之后在同样的网页中重放即可。