最通俗的前端监控方案

最通俗的前端监控方案

都说面试造飞机，现实打螺丝

不管如何，多学一点总是好。抱着好奇心态，我收集网上资料整理形成自己眼中的前端监控实现思路，当然这个还是很简陋

不过我想复杂监控系统框架，核心也是通过这些 api 收集完成，只是更加系统全面化

理清思路

所谓的监控，我这里大致分为 4 步，分别是定义监控范围，上报数据，分析数据，解决系统问题

1、定义监控范围

定义好基础数据标准，便于后续分析

• 
  
• 错误类数据结构
  

• 
  
• 错误主类型和子类型对应关系（这里可以自己指定规则和类型）
  

const validSubTypes = {
js: ["onerror", "promise", "xhr", "fetch"],
resource: ["img", "script", "link", "audio", "video"],
custom: ["business"],
performance: ["component_render"],

};

js 和 resource 类型错误，会自动上报，其他类型错误，需要手动上报；比如：页面上订单创建失败，你可以上报一个 custom + business 的业务错误；首页加载速度超过 5s，你可以上报一个 performance + component_render 的性能错误

• 
  
• 请求类数据结构
  

• 
  
• 页面类数据机构
  

2、上报数据

前端错误大致分为：js 运行错误，资源加载错误，请求接口错误

请求数据

页面相关数据

1、如何收集 js 运行错误

这里是通过 window.onerror 监听全局错误来实现的

收集到关键的几个信息，如下代码里解释

// 监听全局错误
window.onerror = (msg, url, lineNo, columnNo, error) => {
this.captureError({
type: "js",
subType: "onerror",

    msg, // 错误信息

    url, // 报错的文件地址

    lineNo, // 错误行号

    columnNo, // 错误列号
stack: error?.stack || "", // 错误堆栈信息
time: new Date().getTime(),

  });
return true; // 阻止默认行为

};

因为onerror无法收集到promise报的错误，这里特殊化处理下

// 监听Promise错误
this.unhandledRejectionListener = (event) => {
this.captureError({
type: "js",
subType: "promise",
msg: event.reason?.message || "Promise Error",
stack: event.reason?.stack || "",
time: new Date().getTime(),

  });

};
window.addEventListener("unhandledrejection", this.unhandledRejectionListener);
// ps：记得页面组件销毁时，注销掉当前的事件监听

2、如何收集资源加载错误

这里是通过window.addEventListener('error', ...)监听资源加载错误来实现的

不过需要过滤掉上面已经监听的 js 错误，避免重复上报

// 监听资源加载错误
this.resourceErrorListener = (event) => {
// 过滤JS错误，因为JS错误已经被window.onerror捕获
if (event.target !== window) {
this.captureError({
type: "resource",
subType: event.target.tagName.toLowerCase(),
url: event.target.src || event.target.href || "",
msg: `资源加载失败: ${event.target.tagName}`,
time: new Date().getTime(),

    });

  }

};
window.addEventListener("error", this.resourceErrorListener, true); // 使用捕获模式

3、如何收集请求异常错误和请求基础数据

通过监听AJAX请求，监听Fetch请求，收集错误。具体错误包含：请求自身错误事件，请求超时事件，非成功状态码的请求，以及成功状态码请求（用于后续性能分析）

  /**

   * 监控XMLHttpRequest请求

   */
monitorXHR() {
const originalXHR = window.XMLHttpRequest;
const _this = this;

window.XMLHttpRequest = function () {
const xhr = new originalXHR();
const originalOpen = xhr.open;
const originalSend = xhr.send;

// 记录请求开始时间
let startTime;
let reqUrl;
let reqMethod;


      xhr.open = function (method, url, ...args) {

        reqUrl = url;

        reqMethod = method;
return originalOpen.apply(this, [method, url, ...args]);

      };


      xhr.send = function (data) {

        startTime = new Date().getTime();

// 添加错误事件监听

        xhr.addEventListener("error", function () {
const duration = new Date().getTime() - startTime;

// 记录请求信息

          _this.captureRequest({
type: "xhr",
url: reqUrl,
method: reqMethod || "GET",

            duration,
status: 0,
success: false,
time: new Date().getTime(),

          });

// 记录错误信息

          _this.captureError({
type: "js",
subType: "xhr",
msg: `XHR请求错误: ${reqUrl}`,
url: reqUrl,
stack: "",
time: new Date().getTime(),

          });

        });

// 添加超时事件监听

        xhr.addEventListener("timeout", function () {
const duration = new Date().getTime() - startTime;

// 记录请求信息

          _this.captureRequest({
type: "xhr",
url: reqUrl,
method: reqMethod || "GET",

            duration,
status: 0,
success: false,
time: new Date().getTime(),

          });

// 记录错误信息

          _this.captureError({
type: "js",
subType: "xhr",
msg: `XHR请求超时: ${reqUrl}`,
url: reqUrl,
stack: "",
time: new Date().getTime(),

          });

        });


        xhr.addEventListener("loadend", function () {
const duration = new Date().getTime() - startTime;
const status = xhr.status;
const success = status >= 200 && status < 300;


          _this.captureRequest({
type: "xhr",
url: reqUrl,
method: reqMethod || "GET",

            duration,

            status,

            success,
time: new Date().getTime(),

          });

// 对于HTTP错误状态码，也捕获为错误
if (!success) {

            _this.captureError({
type: "js",
subType: "xhr",
msg: `XHR请求失败: 状态码 ${status}`,
url: reqUrl,
stack: "",
time: new Date().getTime(),

            });

          }

        });

return originalSend.apply(this, arguments);

      };

return xhr;

    };

  }

2. 
   
3. 监听Fetch请求