异常数据抓取
异常数据分类:
- 接口错误异常
- js错误异常
接口错误异常 统一在 axios封装中 拦截器中使用 .catch 中捕获
js异常使用window.addEventListene(‘error’,(error) => {},true); 第三个参数表示是否捕获阶段执行,开启捕获不仅可以获取到js的异常,还可以获取到资源加载的异常(如图片加载失败)
未处理的 Promise 异常
window.addEventListener(‘unhandledrejection’, (error) => {
// 打印异常原因
console.log(error.reason);
handleError(error);
// 阻止控制台打印
error.preventDefault();
});
unhandledrejection 事件会在 Promise 发生异常并且没有指定 catch 的时候触发,相当于一个全局的 Promise 异常兜底方案。这个函数会捕捉到运行时意外发生的 Promise 异常
js 的 error对象分类
-
ReferenceError:引用错误
-
RangeError:超出有效范围
-
TypeError:类型错误
-
URIError:URI 解析错误
数据上报
上报时机选择
- 页面加载时
window.addEventListener(‘load’, reportData, false);
- 页面卸载时
window.addEventListener(‘beforeunload’, reportData, false);
- vue 或者 react 路由切换时
路由守卫中
- tabs切换时,比如antd或者element Tabs组件切换时
window.addEventListener(‘visibilitychange’, reportData);
上报方式
- axios 阻塞页面关闭或重新加载的过程
- png图片 解决跨域 且 beforeunload事件 绝大多数浏览器会延迟卸载以保证图片的载入
-
sendBeacon 既能保证数据可靠性,也不影响用户体验 -------> navigator.sendBeacon(url, data);url 就是上报地址,data 可以是 ArrayBufferView,Blob,DOMString 或 Formdata
用户行为信息分析
-
PV:Page View,页面访问次数。
UV:Unique Visitor,页面独立的访问次数,通过Cookie区分不同的设备。 -
页面的停留时间
通过计时器结合路由守卫来实现 -
用户通过哪些入口来访问到该页面
document.referrer -
用户使用的是什么设备
ios | android -
用户使用的浏览器及版本
-
用户在页面中的一些操作行为(eg: 滚动、点击、下拉事件等)
网页性能分析
t = performance.timing
- 页面加载耗时
pageLoadTime = loadEventStart - navigationStart; - 页面域名解析耗时(DNS)
domainLookupEnd - domainLookupStart - TCP连接耗时
connectEnd - connectStart - 首包时长TTFB
fetchStart ~ responseStart - DOM解析时长
domLoading ~ domInteractive - 渲染时长
domContentLoadedEventEnd ~ loadEventStart - FPT 首次渲染时间,或白屏时间,从用户打开页面开始,到第一次渲染出可见元素为止
navigationStart ~ domLoading - TTI 首次可交互时间
navigationStart ~ domInteractive - html 加载完成时间,此时 DOM 已经解析完成
fetchStart ~ domContentLoadedEventEnd - 页面彻底加载完成时间
navigationStart ~ loadEventStart