前端异常数据抓取和数据上报及用户行为信息分析

异常数据抓取

异常数据分类：

• 接口错误异常
• 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