建站平台与建站系统,服务网络推广,桂林市教科所,自动生成网址的软件1 数据治理
前端数据治理的重要指标是准确性和数据#xff0c;一个数据对象包括数据值和其他元数据。
2 数据上报方式
2.1 Image
通过将采集的数据拼接在图片请求的后面#xff0c;向服务端请求一个 1*1 px 大小的图片#xff08;gif#xff09;实现的#xff0c;设置…
1 数据治理
前端数据治理的重要指标是准确性和数据一个数据对象包括数据值和其他元数据。
2 数据上报方式
2.1 Image
通过将采集的数据拼接在图片请求的后面向服务端请求一个 1*1 px 大小的图片gif实现的设置它的 src 属性就可以发送数据。这种方式简单且天然可跨域又兼容所有浏览器没有阻塞问题是目前比较受欢迎的前端数据上报方式。但由于是 get 请求对上报的数据量有一定的限制一般为 2~8 kb。适合发送数据量较小的场景比如采集用户在 Web 页面的页面浏览、元素点击、视区停留等行为事件。
2.2 Ajax
通过 XMLHttpRequest 的 send 方法以post的方式发送 data 给服务端可以发送大量的数据默认发送方式是异步不会阻塞页面但会占用一定的客户端资源且需要特殊处理跨域限制。XMLHttpRequest 的跨域请求默认不携带 cookie。要允许跨域携带cookies首先浏览器设置中没有关闭第三方 cookie 功能而且进行以下配置 适合发送数据量较大的场景比如获取后端所有数据用于前端渲染。
2.3 Beacon
使用 navigator.sendBeacon API是指浏览器通过异步的 post 方式发送数据到服务端。具体使用方法如下 其特点很明显
在浏览器空闲的时候跳转、刷新、关闭页面时异步发送数据不影响页面诸如 JS、CSS Animation 等执行页面在非加载状态下也会异步发送数据不阻塞页面刷新、跳转和卸载等操作可以保证数据发送不易丢失浏览器会对其进行调度以保证数据有效送达能够被客户端优化发送尤其在 Mobile 环境下可以将 beacon 请求合并到其他请求上一起处理不受跨域限制浏览器兼容性较好可以支持除 IE 之外的几乎所有浏览器当数据是 65536 字符长度时异步请求进入浏览器发送队列失败代表数据大小是有限制不一样的浏览器应该有所差异缺陷是只能判断出是否放入浏览器任务队列不能判断是否发送成功。
适合需要进行精确统计的场景比如点击支付按钮、视频播放时长、页面跳转或关闭等行为时能最大程度保证数据成功率。 3 异常监控
异常监控目的是能快速定位到发生错误的代码位置、第一时间通知开发人员异常发生以及报错的堆栈信息、用户OS与浏览器版本等。在上报的时候增加报错时间用户浏览器信息对错误类型区分自定义错误类型统计引入图表可视化展示更加直观地追踪。同时对上报频率做限制。如类似mouseover事件中的报错应该考虑防抖般的处理。
3.1 异常类型与捕获
前端异常分为JS异常和网络异常ResourceError资源加载错误和HttpErrorHttp请求错误。其中JS异常的特点是出现不会导致 JS 引擎崩溃最多只会终止当前执行的任务。
SyntaxError解析时发生语法错误window.onerror捕获不到一般SyntaxError在构建阶段甚至本地开发阶段就会被发现TypeError值不是所期待的类型ReferenceError引用未声明的变量RangeError当一个值不在其所允许的范围或者集合中。
在Javascript中通常有以下异常捕获机制
try…catch 语句能捕捉到的异常必须是线程执行已经进入 try...catch 但try...catch 未执行完的时候抛出来的优点是能够较好地进行异常捕获不至于使得页面由于一处错误挂掉缺点是显得过于臃肿大多代码使用try...catch包裹影响代码可读性。try...catch无法捕获的情况 异步任务抛出的异常执行时 try catch 已经从执行完了比如 setTimeoutpromise中非同步代码的异常async/await 可以被try... catch 捕获语法错误代码运行前在编译时就检查出来了的错误。window.onerror/window.addEventListener(‘error’, handler) 最大的好处就是同步任务、异步任务都可捕获可以得到具体的异常信息、异常文件的URL、异常的行号与列号及异常的堆栈信息捕获异常后统一上报至日志服务器而且可以全局监听。缺点是无法捕获资源加载错误同时跨域脚本无法准确捕获异常跨域之后window.onerror捕获不到正确的异常信息而是统一返回一个Script error可通过在script使用crossorigin属性来规避这个问题或者使用 try ... catch ... 进行捕获。由于当一项资源如图片或脚本加载失败加载资源的元素会触发一个 Event 接口的error 事件使用window.addEventListener(‘error’, handler)图片、script、css加载错误都能被捕获。和window.onerror区别是没有onerror打印信息丰富但可以捕获网络资源加载错误。Promise内部异常为防止遗漏处理最好是添加一个 Promise 全局异常捕获事件 window.addEventListener(unhandledrejection)。崩溃和卡顿利用window的load和beforeLoad,以及serviceWorker开启一个线程进行监控。请求错误异步请求的底层原理都是调用的 XMLHttpRequest API或者 Fetch API通过统一处理ajax和fetch方法手动上报。Vue错误使用Vue.config.errorHandlerVue2/app.config.errorHandlerVue3捕获错误信息和Vue 实例。React错误通过componentDidCatch声明一个错误边界ErrorBoundary的组件。
3.2 行为收集
通过搜集用户的操作可以明显发现错误为什么产生。 用户的操作分类如下
UI行为 点击、滚动、聚焦/失焦、长按浏览器行为请求、前进/后退、跳转、新开页面、关闭控制台行为log、warn、error
如何搜集
点击行为使用addEventListener监听全局上的click事件将事件和DOM元素名字收集。与错误信息一起上报。发送请求监听XMLHttpRequest的onreadystatechange回调函数。页面跳转监听window.onpopstate页面进行跳转时会触发。控制台行为重写console对象的info等方法。
