前端数据监控与异常捕获_前端监控反捕-CSDN博客

本文链接：https://blog.csdn.net/qq_34484499/article/details/98962872

随着前端的能力越来越强大，前端的重担也越来越大，许多在本地调试ok的功能，到了别人的手机或电脑上总是莫名其妙的出现问题，今天谈论的就是前端监控中的一小部分，异常捕获。
如何手机端的功能越来越多，但是手机端确一直都很难调试，更是很难捕获到别人操作的信息。

全局监听错误信息

window.onerror = function(msg, url, lineno, clono, stack){
	//msg: 错误信息，如aaa is not undefined
	//url 错误指向的页面
	// lineno 报错行，这个在拿到数据之后特别有用
	// clono: 报错列 
	//stack  错误栈
}

将手机到的数据上报到服务器，必须要有一个添加接口

	var formdata = new FormData()
	formdata.append('cloNo',clono)
	formdata.append('lineNo',lineno)
    formdata.append('errorMsg',msg)
    formdata.append('errorPage',url.split('file:///')[1].split(' ')[0])
    var pageParam = JSON.parse(api.getGlobalData({key: 'loginInfo'}));
    formdata.append('operUser', pageParam.username)
    // 日志上报,一般在unload的时候发送
    window.navigator.sendBeacon('http://yyzztest.inteink.com/api/vuelog/add',formdata)

数据上报用到的核心功能是 window.navigator.sendBeacon（方法可用于通过HTTP将少量数据异步传输到Web服务器），该功能接受四种数据类型， ArrayBufferView，Blob，DOMString 或 Formdata，用/formData格式进行传输用的更多一些，就是上面的这种方法,便于在后台管理中查询到对应的字段进行分析,其他的三种类型目前还没有用到过，之后可以自行研究一下。

数据监控不仅可以异常捕获，还可以进行性能分析(window.performance），资源加载情况等数据分析，监控别人操作页面对一些异常捕获以及完善自己的项目真的起到了非常大的作用