前端异常监控系统(一)
一直以来，前端的线上问题有时会很难定位，因为它发生于用户的一系列操作。错误的原因可能源于机型、网络环境、接口请求、复杂的操作行为等等，在我们想要去解决的时候很难复现出来，自然也就无法解决。 监控系统就是为了快速复现出错场景。以便及时处理线上问题。
监控流程：
监控错误 -> 搜集错误 -> 存储错误 -> 分析错误 -> 错误报警-> 定位错误 -> 解决错误
捕获前端错误
1.1 window.onerror 事件
onerror方法表示Error事件的事件处理程序。针对不同类型的错误，在不同的目标上激发Error事件. onerror最大的好处是 同步任务或异步任务都可捕获。
/**
* @param message：错误消息（字符串）
* @param source：引发错误的脚本的URL（字符串）
* @param lineno：发生错误的行号（数值）
* @param colno：发生错误的行的列号（数值）
* @param error：错误对象（对象）
*/
window.onerror = function(message, source, lineno, colno, error) { ... }
1.2 window.addEventListener('error')
监听JS运行时错误事件，会比window.onerror先触发，与winodw.onerror的功能大体类似，不过事件回调函数传参只有一个保存所有错误信息的参数。不能阻止默认事件处理函数执行。但可以全局捕获资源加载异常的错误
window.addEventListener('error', function (e) {
// 对js错误进行处理
if (e.message) return
var t, n = (t = e.target ? e.target : e.srcElement) && t.outerHTML;
console.log('resourceError:', e)
}, true)
1.3 window.addEventListener('unhandlerejection')
他是针对未处理的Promise拒绝提出的.(未使用catch处理的Promise错误)
window.addEventListener("unhandledrejection", function (e) {
console.log(e)
})
1.4 http请求错误
http请求大家已经不陌生了，所以直接说，如何在http请求进行捕获错误。
if (window.XMLHttpRequest && window.XMLHttpRequest.prototype) {
/**
* @description 对Http重写
*/
const XHROPEN = XMLHttpRequest.prototype.open
const XHRSEND = XMLHttpRequest.prototype.send
XMLHttpRequest.prototype.open = function (...arg: any) {
try {
{...}
} catch (error) {
}
XHROPEN && XHROPEN.apply(this, arg)
}
XMLHttpRequest.prototype.send = function (...arg: any) {
try {
{...}
const LOADEND = this.onloadend
this.onloadend = function (...args: any) {
{...}
LOADEND && LOADEND.apply(this, args)
}
} catch (error) {
}
XHRSEND && XHRSEND.apply(this, arg)
}
}
1.5 fetch捕获请求
fetch 是 提供的方法, 用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象
var _fetch = window.fetch
window.fetch = function (url, options) {
return _fetch.apply(this, arguments).then((res) => {
return res
})
}
