monitor-track 1.10.0

package/src/reporter.ts

@@ -0,0 +1,372 @@
+import { v4 as uuidv4 } from 'uuid';
+import { IReport } from './types/global';
+import { serialize } from './utils';
+import { getFullScreenShoot } from './handlers/error';
+import { Config } from './config';
+
+/** 上报数据映射 */
+export const reportMap = {
+  /** SDK 版本 */
+  version: '_v',
+  /** 项目ID */
+  projectID: 'pid',
+  /** location.host */
+  host: 'host',
+  /** 用户uuid */
+  uuid: '_id',
+  /** 上报日志的时间戳 */
+  time: 'time',
+  /** 源页面 */
+  originPage: 'o',
+  /** 当前页面 */
+  page: 'p',
+  /** 自定义payload */
+  customPayload: 'cP',
+  /** 信息类型 */
+  type: 't',
+  /** viewport的宽高 */
+  viewport: 'vp',
+  /** 屏幕宽高 */
+  screen: 'sc',
+  /** 页面title */
+  pageTitle: 'pt',
+  /** 页面referrer */
+  referrer: 'ref',
+  /** 页面编码 */
+  charset: 'char',
+  /** language */
+  language: 'lan',
+  /** vendor， 浏览器厂商 */
+  navigatorVendor: 'nV',
+  /** 网络连接类型 */
+  connectionType: 'cT',
+  /** 浏览器名称 */
+  browserName: 'bN',
+  /** 浏览器版本 */
+  browserVersion: 'bV',
+  /** 浏览器引擎名称 */
+  engineName: 'enN',
+  /** 浏览器引擎版本 */
+  engineVersion: 'enV',
+  /** 操作系统名称 */
+  osName: 'osN',
+  /** 操作系统版本 */
+  osVersion: 'osV',
+  pv: {
+    /** 子类型 */
+    subType: 'suT',
+    /** 停留时间 */
+    stayTime: 'sT',
+  },
+  error: {
+    /** 子类型 */
+    subType: 'suT',
+    /** 错误行 */
+    line: 'line',
+    /** 错误列 */
+    column: 'col',
+    /** 错误信息 */
+    message: 'msg',
+    /** 错误文件 */
+    filename: 'fil',
+    /** 错误函数名 */
+    functionName: 'fn',
+    /** 错误栈信息 */
+    stack: '_st',
+    /** 错误帧 */
+    stackFrame: '_sf',
+    /** 视频录制数据 */
+    events: 'evt',
+    /** 页面截图 */
+    picture: 'pic',
+  },
+  ua: {
+    /** 子类型 */
+    subType: 'suT',
+    /** x轴坐标 */
+    x: 'x',
+    /** y轴坐标 */
+    y: 'y',
+    /** 元素路径 */
+    path: 'path',
+  },
+  /** 性能数据 */
+  perf: {
+    navigation: {
+      /** 
+     *一个无符号短整型，表示是如何导航到这个页面的。可能的值如下:
+      TYPE_NAVIGATE (0)
+      当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址，type值为0
+      TYPE_RELOAD (1)
+      点击刷新页面按钮或者通过Location.reload()方法显示的页面，type值为1
+      The page was accessed by clicking the Reload button or via the Location.reload() method.
+      TYPE_BACK_FORWARD (2)
+      页面通过历史记录和前进后退访问时。type值为2
+      TYPE_RESERVED (255)
+      任何其他方式，type值为255 
+    */
+      type: 't',
+      /** 无符号短整型，表示在到达这个页面之前重定向了多少次。 */
+      redirectCount: 'rc',
+    },
+    memory: {
+      /** 上下文内可用堆的最大体积，以字节计算。 */
+      jsHeapSizeLimit: 'hsl',
+      /** 已分配的堆体积，以字节计算。 */
+      totalJSHeapSize: 'ths',
+      /** 当前 JS 堆活跃段（segment）的体积，以字节计算。 */
+      usedJSHeapSize: 'uhs',
+    },
+    /** 返回性能测量开始时的时间的高精度时间戳。 */
+    timeOrigin: 'to',
+    timing: {
+      /** 是一个无符号long long 型的毫秒数，返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。 */
+      connectEnd: 'ce',
+      /** 是一个无符号long long 型的毫秒数，返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值 */
+      connectStart: 'cs',
+      /** 是一个无符号long long 型的毫秒数，返回当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange (en-US) 被触发时的Unix毫秒时间戳。 */
+      domComplete: 'dc',
+      /** 是一个无符号long long 型的毫秒数，返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的Unix毫秒时间戳。 */
+      domContentLoadedEventEnd: 'scLee',
+      /** 是一个无符号long long 型的毫秒数，返回当解析器发送DOMContentLoaded (en-US) 事件，即所有需要被执行的脚本已经被解析时的Unix毫秒时间戳。 */
+      domContentLoadedEventStart: 'dcLes',
+      /** 是一个无符号long long 型的毫秒数，返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange (en-US)事件触发时）的Unix毫秒时间戳。 */
+      domInteractive: 'di',
+      /** 是一个无符号long long 型的毫秒数，返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange (en-US)事件触发时）的Unix毫秒时间戳。 */
+      domLoading: 'dl',
+      /** 是一个无符号long long 型的毫秒数，表征了域名查询结束的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。 */
+      domainLookupEnd: 'dle',
+      /** 是一个无符号long long 型的毫秒数，表征了域名查询开始的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。 */
+      domainLookupStart: 'dls',
+      /** 是一个无符号long long 型的毫秒数，表征了浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。这个时间点会在检查任何应用缓存之前。 */
+      fetchStart: 'fs',
+      /** 是一个无符号long long 型的毫秒数，返回当load (en-US)事件结束，即加载事件完成时的Unix毫秒时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0. */
+      loadEventEnd: 'lee',
+      /** 是一个无符号long long 型的毫秒数，返回该文档下，load (en-US)事件被发送时的Unix毫秒时间戳。如果这个事件还未被发送，它的值将会是0。 */
+      loadEventStart: 'les',
+      /** 是一个无符号long long 型的毫秒数，表征了从同一个浏览器上下文的上一个文档卸载(unload)结束时的UNIX时间戳。如果没有上一个文档，这个值会和PerformanceTiming.fetchStart相同 */
+      navigationStart: 'ns',
+      /** 是一个无符号long long 型的毫秒数，表征了最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0. */
+      redirectEnd: 're',
+      /** 是一个无符号long long 型的毫秒数，表征了第一个HTTP重定向开始时的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0. */
+      redirectStart: 'redS',
+      /** 是一个无符号long long 型的毫秒数，返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。 */
+      requestStart: 'reqS',
+      /** 是一个无符号long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。 */
+      responseEnd: 'resE',
+      /** 是一个无符号long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。 */
+      responseStart: 'resS',
+      /** 是一个无符号long long 型的毫秒数，返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。 */
+      secureConnectionStart: 'scs',
+      /** 是一个无符号long long 型的毫秒数，表征了unload (en-US)事件处理完成时的UNIX时间戳。如果没有上一个文档，or if the previous document, or one of the needed redirects, is not of the same origin, 这个值会返回0. */
+      unloadEventEnd: 'uee',
+      /** 是一个无符号long long 型的毫秒数，表征了unload (en-US)事件抛出时的UNIX时间戳。如果没有上一个文档，or if the previous document, or one of the needed redirects, is not of the same origin, 这个值会返回0. */
+      unloadEventStart: 'ees',
+    },
+  },
+  /** api请求相关 */
+  req: {
+    /** 请求类型,xhr或fetch */
+    requestType: 'rT',
+    /** 请求地址 */
+    responseURL: 'url',
+    /** 请求结果 */
+    status: 'stat',
+    /** 请求耗时 */
+    loadTime: 'lT',
+    /** 请求状态 */
+    statusText: 'sT',
+    /** 上报原因, slow或failed */
+    reason: 're',
+    /** 上报时带上的详细信息 */
+    detail: 'de',
+  },
+  vD: {
+    /** 埋点名称 */
+    trackName: 'tN',
+    /** 埋点参数 */
+    params: 'params',
+  },
+  manualReport: 'mR',
+  lifeCycleId: 'li',
+  sessionId: 'sI',
+};
+
+type IRest = { p: string; pid: string; host: string; bN: string; pt: string };
+
+const xhrFunc = (
+  filename: string,
+  userId: string,
+  asyncUpdateId: string,
+  file: Blob | File,
+  res: Function,
+  callback: (result: string) => void,
+  rest: IRest,
+) => {
+  const formData = new FormData();
+  for (const i in rest) {
+    if (Object.prototype.hasOwnProperty.call(rest, i)) {
+      formData.append(i, rest[i as keyof IRest]);
+    }
+  }
+  formData.append('filename', filename);
+  formData.append('asyncUpdateId', asyncUpdateId); //用于上传到oss后异步更新到db的id
+  formData.append('userId', userId);
+  formData.append('files', file);
+  const xhr = new XMLHttpRequest();
+  xhr.addEventListener('error', () => res(), false);
+  xhr.open('POST', Config.reportUrl);
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      if (xhr.status === 200) {
+        try {
+          const response = xhr.responseText;
+          const resp = JSON.parse(response);
+          callback(resp.result?.response);
+        } catch (_err) {
+          //
+        }
+        res();
+      } else {
+        res();
+      }
+    }
+  };
+  xhr.send(formData);
+};
+
+const ERROR_MESSAGE_MAP: { [key: string]: boolean } = {};
+function reportFunc(data: IReport) {
+  const payload: { [k: string]: any } = convertToSchema(data, reportMap);
+  payload.time = new Date().getTime(); // 设置上报时间
+  let picturePromise = Promise.resolve();
+  let hasErrorEvent = false;
+  const filename = uuidv4();
+  if (data.type === 'error') {
+    let message = data.error?.message || 'default';
+    if (data.error?.subType === 'resource') {
+      message = 'resource';
+    }
+    if (ERROR_MESSAGE_MAP[message]) {
+      //
+    } else {
+      ERROR_MESSAGE_MAP[message] = true;
+      setTimeout(() => {
+        //节流效果，每隔3秒上报一次重复的错误录像和错误截图
+        delete ERROR_MESSAGE_MAP[message];
+      }, 3000);
+      const { p, pid, host, bN, pt } = payload;
+      if (data.error?.events) {
+        hasErrorEvent = true;
+        const errorEvent = data.error.events;
+        const delayTime = Math.ceil(Math.random() * 10000);
+        setTimeout(
+          () => {
+            const blob = new Blob([errorEvent], { type: 'text/json' });
+            return new Promise((res) => {
+              xhrFunc(`${filename}.json`, data.uuid, filename, blob, res, () => {}, { p, pid, host, bN, pt });
+            });
+          },
+          delayTime < 3500 ? 3500 : delayTime,
+        );
+      }
+      picturePromise = getFullScreenShoot(filename)
+        .then((file: File) => {
+          return new Promise((res) => {
+            xhrFunc(
+              file.name,
+              data.uuid,
+              filename,
+              file,
+              res,
+              (result: string) => {
+                payload.error.pic = result;
+              },
+              { p, pid, host, bN, pt },
+            );
+          }) as Promise<void>;
+        })
+        .catch((err) => {
+          payload.error.picError = err?.stack || err?.toString();
+        });
+    }
+  }
+  return picturePromise
+    .then(() => {
+      if (payload.error?.evt) delete payload.error!.evt;
+      if (window && window.navigator && typeof window.navigator.sendBeacon === 'function') {
+        const formData = new FormData();
+        Object.keys(payload).forEach((key) => {
+          let value = payload[key];
+          if (value !== null && value !== undefined) {
+            if (typeof value === 'object') {
+              value = JSON.stringify(value);
+            }
+            formData.append(key, value);
+          }
+        });
+        //eventErrorFilename,将错误录像的文件名附在错误上报的埋点里，便于将错误录像上报回调地址异步的更新到db
+        if (hasErrorEvent) formData.append('eef', filename);
+        window.navigator.sendBeacon(Config.reportUrl, formData);
+      } else {
+        if (hasErrorEvent) payload.eef = filename;
+        new Image().src = `${Config.reportUrl}?${serialize(payload)}`;
+      }
+    })
+    .catch((_err) => {
+      //
+    });
+}
+
+// 上报
+export function report(data: IReport) {
+  return new Promise((res) => {
+    //在帧的空闲时间上报
+    const dataCopy = JSON.parse(JSON.stringify(data));
+    if (typeof window.requestIdleCallback === 'function') {
+      window.requestIdleCallback(() => reportFunc(dataCopy).then(res), { timeout: 2000 });
+    } else {
+      setTimeout(() => reportFunc(dataCopy).then(res), 0);
+    }
+  });
+}
+
+/**
+ * @description 将数据转换成最终提交的数据，主要目的是简化数据的key的长度，从而降低荷载大小
+ * @param data 要转换的数据
+ * @param map 要转换的数据的字段映射
+ * @param redundancyData 冗余数据
+ */
+export function convertToSchema(data: IReport, map: { [K: string]: any }, redundancyData?: object) {
+  const reportData: any = {};
+
+  if (redundancyData) {
+    map = { ...map, ...redundancyData };
+  }
+
+  for (const result of Object.entries(map)) {
+    const [key, mapKey] = result as [keyof IReport, any];
+    if (key === 'manualReport') {
+      reportData[mapKey] = data[key];
+    } else {
+      //字段值为数组的场景，直接转换
+      if (typeof data[key] === 'object' && !Array.isArray(data[key])) {
+        if (data[key]) {
+          if (redundancyData && Object.prototype.hasOwnProperty.call(redundancyData, key)) {
+            reportData[key] = data[key];
+          } else {
+            reportData[key] = convertToSchema(data[key] as any, map[key]);
+          }
+        } else {
+          reportData[key] = data[key];
+        }
+      } else {
+        // 排除undefined
+        if (data[key] !== undefined) {
+          reportData[mapKey] = data[key];
+        }
+      }
+    }
+  }
+  return reportData;
+}

package/src/types/config.ts

@@ -0,0 +1,58 @@
+/**
+ * @description 配置项接口
+ */
+export interface IConfig {
+  /** 开启日志收集 */
+  enable?: boolean;
+  /** 上报地址，后台地址 */
+  reportUrl: string;
+  /** 项目ID, 由监控平台后台管理系统创建项目时生成 */
+  projectID: string;
+  /** 是否为单页面应用，主要区别页面性能，及路由切换行为 */
+  spa?: boolean;
+  /** 路由是否为hash模式 */
+  hash?: boolean;
+  /** 启用行为上报 */
+  enableBehavior?: boolean;
+  /** 启用异常信息上报 */
+  enableError?: boolean;
+  // 最长上报数据长度
+  maxLength?: number;
+  /** 忽略上报的信息 */
+  ignore?: {
+    /** 忽略的url */
+    urls?: string[];
+    /** 忽略的异常信息 */
+    errors?: Array<string | { regExp: boolean; input: string }>;
+    /** 忽略的接口 */
+    apis?: string[];
+  };
+  /** 自定义payload */
+  customPayload?: string;
+  /** 上报 xhr 请求超过指定时间的请求地址  */
+  XMLHttpRequestTimeout?: number;
+  /** 启用可视化埋点 */
+  enableVisualTrack?: boolean;
+}
+
+type IParams = {
+  name: string;
+  value: string;
+  disabled: boolean;
+  elementXPath: string;
+  id: string;
+  errorMsg?: boolean;
+};
+
+export type IListData = {
+  trackType: 'click' | 'mount';
+  trackElementXPath: string;
+  trackNameInfo: {
+    name: string;
+    disabled: boolean;
+    elementXPath: string;
+  };
+  params: IParams[];
+  id: string;
+  valid: boolean;
+};

package/src/types/global.ts

@@ -0,0 +1,73 @@
+import { IErrorInfo, INavigator, IPv, IUserActivity, IPerformance } from '.';
+
+/**
+ * @description 上报信息
+ */
+export interface IReport extends INavigator {
+  /** SDK 版本 */
+  version: string;
+  /** 项目ID */
+  projectID: string;
+  /** location.host */
+  host: string;
+  /** 用户uuid */
+  uuid: string;
+  /** 源页面 */
+  originPage: string;
+  /** 当前页面 */
+  page: string;
+  /** 上报日志的时间戳 */
+  time: number;
+  /** 自定义payload */
+  customPayload?: string;
+  /** 信息类型 */
+  type: IType;
+  /** viewport的宽高 */
+  viewport: string;
+  /** 屏幕宽高 */
+  screen: string;
+  /** 页面title */
+  pageTitle: string;
+  /** 页面referrer */
+  referrer: string;
+  /** 页面编码 */
+  charset: string;
+  /** dpr */
+  dpr: number;
+  pv: IPv | null;
+  error: IErrorInfo | null;
+  ua: IUserActivity | null;
+  perf: IPerformance | null;
+  vD?: {
+    /** 埋点名称 */
+    trackName: string;
+    params: {
+      /** 参数名称 */
+      name: string;
+      /** 参数值 */
+      value: string;
+    }[];
+  };
+  manualReport?: object;
+  lifeCycleId: string;
+  sessionId: string;
+}
+
+/**
+ * @description 上报信息类型
+ * @type pv 路由变化
+ * @type error 资源加载错误及js错误相关
+ * @type ua 用户行为
+ * @type api 接口
+ * @type per 性能
+ * @type init 初始化时上报。因为初始化时，页面已经触发过路由，所以这次上报应
+ * 应当算作一次pv，但是又因为是初始化引起的，取单独类型进行区分
+ * @type request xhr请求超过阈值时的上报
+ * @type visual 可视化埋点上报
+ * @type manual 手动上报
+ */
+export type IType = 'pv' | 'error' | 'ua' | 'api' | 'per' | 'init' | 'request' | 'visual' | 'manual';
+
+export interface Navigator {
+  connection: any;
+}