前端性能监控错误监控

﻿前端性能监控的 Aegis 的实例会自动进行 JS 执行错误、Promise 执行错误、Ajax（Fetch）请求异常等监控。本文将为您介绍各错误监控逻辑及处理方式。
注意：
Aegis 实例会对这些异常进行监控，当您只是引入了 SDK 而没有将其实例化时，Aegis 将不会上报数据。
JS 执行错误
Aegis 通过监听 window 对象上的 onerror 事件来获取应用中的报错，并且通过解析错误和分析堆栈，将错误信息自动上报到后台服务中。该上报等级为 error ，所以当自动上报的错误达到阈值时，Aegis 将会自动告警，帮助您尽早发现异常。由于上报等级为 error ，自动上报也将影响应用的评分。
如果页面上引入了跨域的 JS 脚本，需要给对应的 script 标签添加 crossorigin 属性，否则 Aegis 将无法获取详细的错误信息。
如果用户使用的是 VUE 框架，请引入下列代码，获取错误并且主动上报。
Vue.config.errorHandler = function(err, vm, info) {
  console.log(`Error: ${err.toString()}\\nStack: ${err.stack}\\nInfo: ${info}`);
  aegis.error(`Error: ${err.toString()}\\nStack: ${err.stack}\\nInfo: ${info}`);
};
﻿
Promise 执行错误
通过监听 unhandledrejection 事件，捕获到未被 catch 的 Promise 错误，为了页面的稳定性，建议您 catch 住所有的 Promise 错误。
Ajax（Fetch）请求异常
Aegis 将会改写 XMLHttpRequest 对象，监听每次接口请求，Aegis 认为以下情况是异常情况：  
HTTP status 大于等于400。
请求超时，abort，跨域，cancel。
请求结束时 HTTP status 仍然是0，通常发生于请求失败。
注意：
Aegis SDK 在错误发生的时候，不会主动收集接口请求参数和返回信息，如果需要对接口信息进行上报，可以使用 API 参数里面的 apiDetail 进行开启。
new Aegis({
  api: {
    apiDetail: true,
  },
});
﻿
retcode 异常
Aegis 改写 XMLHttpRequest 对象之后，将获得 API 返回的内容，并尝试在内容中获取到本次请求的 retcode。
retcode 的值默认会从用户返回 response body 的第一层（如果第一层取不到，再取第二层）的 code、ret、retcode、errcode 中获取。
Aegis 默认 retcode 的值为0是正常的，非0都是异常的。当 retcode 发生异常的时候，会上报一个 retcode 异常的日志。
用户可以通过 api.retCodeHandler 对这个值和是否异常进行修正。
说明：
如何获取 retcode 以及哪些retcode 是正常的，详情请参见 配置文档 。
资源加载失败
页面元素发出的请求如果失败，将会被 window.onerror 事件捕获到（捕获阶段），Aegis 正是通过这个特性监听的资源加载失败。Aegis 监听了以下资源：  
<link> 标签请求的 css、font 等。
<script> 标签请求的脚本。
<audio>、<video> 标签请求的多媒体资源。
WebSocket 异常
Aegis 默认不会对全局 WebSocket 对象进行重写，默认不会监控 WebSocket 相关错误，如果需要打开相关功能可以在创建 Aegis 对象时设置 websocketHack: true。
new Aegis({
  id: '',
  websocketHack: true
});
白屏异常
检测时机
1. 发生错误时，包括 js 错误、promise 错误、资源、api 请求错误。
2. 页面 dom 结构发生变化时。
检测方式
采用米字采样法，每边采集9个点，共33个点（默认，可配置），当采样点是容器元素（默认为["#app", "html", "body", "#root"]， 可配置）的个数比例大于70%会被判定为白屏，触发白屏后，在2秒（默认，可配置）后会再次触发一次检测， 如果两次检测都为白屏，则上报一次白屏事件。
开启方式
在初始化 Aegis 时，设置 blankScreen 为 true 或 json 时会开启白屏。为 true 时使用默认的配置，如需对白屏参数做进一步配置，可在 json 中使用相关参数配置。
// 传入 true 打开， 使用默认配置
const aegis = new window.Aegis({
    id: '', 
    blankScreen: true
});
﻿
// 配置相关参数打开
const aegis = new window.Aegis({
    id: '',
    blankScreen: {
        reDetectInterval: 2000,
        everySideSampleNumber: 9,
    }
});
白屏所有配置参数如下：
interface BlankScreenConfig {
  /**
   * 空白元素选择器，也可以认为是页面渲染的根节点/容器节点，默认为 ['body', 'html', '#app', '#root'],
   * 如果有骨架屏，推荐骨架屏的选择器，也放到根节点
   * 如果采样点在此范围内，则认为该点为一个空白点
   */
  containers?: string[];
  /**
   * 忽略的容器节点/占位/空白节点元素的配置，避免误检
   */
  ignoreContainers?: string[];
  /**
   * 检测开始的位置, 默认左上角0,0
   */
  detectStartPosition?: {
    x: number;
    y: number;
  };
  /**
   * 空白节点比例，比例越大，相对越精准，默认70%
   */
  emptyElementsPercent?: number;
  /**
   * 相同元素检测比例，比例越大，相对越准确, 默认70%
   */
  sameElementsPercent?: number;
  /**
   * debounce间隔，防止触发太频繁
   */
  debounceDuration?: number;
  /**
   * 每条边采样几个，默认9个，越高越精准，但也可能会更耗时
   */
  everySideSampleNumber?: number;
  /**
   * 复检的时间间隔
   */
  reDetectInterval?: number;
}
﻿
错误监控

本页目录：

JS 执行错误

Promise 执行错误

Ajax（Fetch）请求异常

retcode 异常

资源加载失败

WebSocket 异常

白屏异常

检测时机

检测方式

开启方式
