haina-npm/src/utils/pagespy.js

import { loadScript } from './commons';

const TODAY_TIME = new Date().getTime();

export const loadPageSpy = (title, projectName = 'hn-page-spy') => {
  if (import.meta.env.DEV || window.$pageSpy) return;

  const PageSpyConfig = { api: 'page-spy.mycht.cn', project: projectName, title: title, autoRender: false };
  const PageSpySrc = [
    'https://page-spy.mycht.cn/page-spy/index.min.js' + `?v=${TODAY_TIME}`,
    'https://page-spy.mycht.cn/plugin/data-harbor/index.min.js' + `?v=${TODAY_TIME}`,
    'https://page-spy.mycht.cn/plugin/rrweb/index.min.js' + `?v=${TODAY_TIME}`,
  ];

  Promise.all(PageSpySrc.map((src) => loadScript(src))).then(() => {
    // 注册插件
    window.$harbor = new DataHarborPlugin();
    window.$rrweb = new RRWebPlugin();
    [window.$harbor, window.$rrweb].forEach((p) => {
      PageSpy.registerPlugin(p);
    });
    window.$pageSpy = new PageSpy(PageSpyConfig);

    window.onerror = async function (msg, url, lineNo, columnNo, error) {

      // 当页面有 iframe 时，rrweb 会报错：Cannot set property attributeName of #<MutationRecord> which has only a getter
      // 而且这个错误无法修复，所以只能先忽略掉
      if (url && url.indexOf('https://page-spy.mycht.cn/plugin/rrweb/index.min.js') > -1) {
        console.info('ignore rrweb error')
      } else {
        // 上传最近 5 分钟的日志
        const now = Date.now()
        await window.$harbor.uploadPeriods({
          startTime: now - 5 * 60000,
          endTime: now,
          remark: `\`onerror\`自动上传. ${msg}`,
        })
      }
    }
  });
};

export const uploadPageSpyLog = async (remark = '') => {

  if (import.meta.env.DEV) return true;

  if (window.$pageSpy) {
    try {
      // 上传最近一小时的日志, 直接upload 所有日志: 413 Payload Too Large
      const now = Date.now();
      await window.$harbor.uploadPeriods({
        startTime: now - 1 * 60 * 60000,
        endTime: now,
        remark,
      });
      return true;
    } catch (error) {
      return false;
    }
  } else {
    return false;
  }
}