上报数据结构设计

公共信息

interface BaseinfoI {
  title: string;        // 页面名称
  location: string;     // 页面url
  message: string;      // 报错信息
  kind: string;         // 报错大类
  type: string;         // 报错小类
  errorType: string;    // 报错类型
  userAgent: string;    // 浏览器信息
}

JS错误

interface JSRunTimeErrorEventI extends BaseinfoI {
  filename: string;     // 报错js文件名
  position: string;     // 报错位置(行号:列号)
  stack: string;        // 堆栈信息
  selector: string;     // 触发错误的DOM
}

静态资源加载错误

interface AssetsErrorI extends BaseinfoI {
  url: string;          // 报错资源url
  nodeName: string;     // 资源类型
}

Promise错误

Ajax错误

interface AjaxErrorEventI extends BaseinfoI {
  response: string;     // 后端响应
  status: number;       // 请求状态码
  method: string;       // 请求方法
  url: string;          // 请求地址
  params: string;       // 请求参数
}

上报方式

img

new Img(`http://xxx/report?info=${xxx}`)

navigator.sendBeacon

MDN:navigator.sendBeacon()方法可用于通过HTTP将少量数据异步传输到Web服务器。使用sendBeacon()方法会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题：数据可靠，传输异步并且不会影响下一页面的加载。此外，代码实际上还要比其他技术简单许多！

navigator.sendBeacon("/log", analyticsData)

请求接口

后端处理

// todo