前端错误监控

关于错误监控的实现，有两个方案，

1.只在前端做一个监控，不做储存使用复盘使用，优化客户体验。

2.在数据库中建立问题清单。需要后端配合（也可自行完成）。把所有问题记录下来，可添加通知功能。方便随时调取复盘。

业务需要目前只用优化一下客户体验此处先放第一个方案。

首先错误监控要做的第一件事是捕获异常，

window.onerror = (msg, url, row, col, error) => {
  const exception = {
    // 上报错误归类
    mechanism: {
      type: 'js'
    },
    // 错误信息
    value: msg,
    // 错误类型
    type: error.name || 'UnKnowun',
    // 解析后的错误堆栈
    stackTrace: {
      frames: parseStackFrames(error),
    },
    meta: {
      url, // 文件地址
      row, // 行号
      col, // 列号
    }
  };
  // 获取了报错详情，就可以走上报方法上报错误信息
  console.log('JS运行error', exception);
  return true; // 返回 true,阻止了默认事件执行,也就是原本将要在控制台打印的错误信息
};

方法二：

// 初始化 JS异常 的数据获取和上报
initJsError = (): void => {
  const handler = (event: ErrorEvent) => {
    // 阻止向上抛出控制台报错
    event.preventDefault();
    // 如果不是 JS异常 就结束
    if (getErrorKey(event) !== mechanismType.JS) return;
    const exception = {
      // 上报错误归类
      mechanism: {
        type: mechanismType.JS,
      },
      // 错误信息
      value: event.message,
      // 错误类型
      type: (event.error && event.error.name) || 'UnKnowun',
      // 解析后的错误堆栈
      stackTrace: {
        frames: parseStackFrames(event.error),
      },
      // 用户行为追踪 behaviorTracking 在 errorSendHandler 中统一封装
      // 页面基本信息 pageInformation 也在 errorSendHandler 中统一封装
      // 错误的标识码
      errorUid: getErrorUid(`${mechanismType.JS}-${event.message}-${event.filename}`),
      // 附带信息
      meta: {
        // file 错误所处的文件地址
        file: event.filename,
        // col 错误列号
        col: event.colno,
        // row 错误行号
        row: event.lineno,
      },
    } as exceptionMetrics;
    // 一般错误异常立刻上报，不用缓存在本地
    this.errorSendHandler(exception);
  };
  window.addEventListener('error', (event) => handler(event), true);
};

监听异步的方法：unhandledrejection 

记于2022/5/25，明天继续补全，要板砖了

 

 

方案二可以使用nodejs搭建后台与数据库进行数据交互。