monitor-track 1.10.0 → 1.10.2

package/src/types/index.ts

@@ -1,227 +0,0 @@
-/**
- * @description 浏览器信息
- */
-export interface INavigator {
-  /** language */
-  language: string;
-  /** vendor， 浏览器厂商 */
-  navigatorVendor: string;
-  /** 网络连接类型 */
-  connectionType: '2g' | '3g' | '4g';
-  /** 浏览器名称 */
-  browserName: string;
-  /** 浏览器版本 */
-  browserVersion: string;
-  /** 浏览器引擎名称 */
-  engineName: string;
-  /** 浏览器引擎版本 */
-  engineVersion: string;
-  /** 操作系统名称 */
-  osName: string;
-  /** 操作系统版本 */
-  osVersion: string;
-}
-
-// /**
-//  * @description 上报数据类型及对应结构
-//  */
-// interface IReportDataMap {
-//   pv: IReport;
-//   error: IReportError;
-//   userActivity: IReportUserActivity;
-// }
-
-// /**
-//  * @description 错误信息
-//  */
-// type IReportError = IReport & IErrorInfo;
-
-// /**
-//  * @description 用户行为信息
-//  */
-// type IReportUserActivity = IReport & IUserActivity;
-
-/**
- * @description pv类接口
- */
-export interface IPv {
-  /** 停留时间 */
-  stayTime: number;
-}
-
-/**
- * @description 错误子类型
- */
-export type IErrorSubType = 'resource' | 'js' | 'async' | 'manual';
-
-/**
- * @description stackFrame类型
- */
-export interface StackFrame {
-  constructor(object: StackFrame): StackFrame;
-
-  isConstructor?: boolean;
-  getIsConstructor(): boolean;
-  setIsConstructor(): void;
-
-  isEval?: boolean;
-  getIsEval(): boolean;
-  setIsEval(): void;
-
-  isNative?: boolean;
-  getIsNative(): boolean;
-  setIsNative(): void;
-
-  isTopLevel?: boolean;
-  getIsTopLevel(): boolean;
-  setIsTopLevel(): void;
-
-  columnNumber?: number;
-  getColumnNumber(): number;
-  setColumnNumber(): void;
-
-  lineNumber?: number;
-  getLineNumber(): number;
-  setLineNumber(): void;
-
-  fileName?: string;
-  getFileName(): string;
-  setFileName(): void;
-
-  functionName?: string;
-  getFunctionName(): string;
-  setFunctionName(): void;
-
-  source?: string;
-  getSource(): string;
-  setSource(): void;
-
-  args?: any[];
-  getArgs(): any[];
-  setArgs(): void;
-
-  evalOrigin?: StackFrame;
-  getEvalOrigin(): StackFrame;
-  setEvalOrigin(): void;
-
-  toString(): string;
-}
-
-/**
- * @description 资源加载错误及js错误接口
- */
-export interface IErrorInfo {
-  /** 子类型 */
-  subType: IErrorSubType;
-  /** 错误行 */
-  line?: number;
-  /** 错误列 */
-  column?: number;
-  /** 错误信息 */
-  message: string;
-  /** 错误文件 */
-  filename?: string;
-  /** 错误函数名 */
-  functionName?: string;
-  /** 错误栈信息 */
-  stack?: string;
-  /** 错误帧*/
-  stackFrame?: string;
-  /** 操作录像*/
-  events?: string;
-}
-
-/**
- * @description 用户行为子类型
- */
-export type IUserActivitySubType = 'ui.click' | 'ui.blur' | 'ui.scroll';
-
-/**
- * @description 用户行为类接口
- */
-export interface IUserActivity {
-  /** 子类型 */
-  subType: IUserActivitySubType;
-  /** x轴坐标 */
-  x?: number;
-  /** y轴坐标 */
-  y?: number;
-  /** 元素路径 */
-  path?: string;
-  /** 值 */
-  value?: string;
-}
-
-export interface IPerformance {
-  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: number;
-    /** 无符号短整型，表示在到达这个页面之前重定向了多少次。 */
-    redirectCount: number;
-  };
-  memory?: {
-    /** 上下文内可用堆的最大体积，以字节计算。 */
-    jsHeapSizeLimit: number;
-    /** 已分配的堆体积，以字节计算。 */
-    totalJSHeapSize: number;
-    /** 当前 JS 堆活跃段（segment）的体积，以字节计算。 */
-    usedJSHeapSize: number;
-  };
-  /** 返回性能测量开始时的时间的高精度时间戳。 */
-  timeOrigin: number;
-  timing: {
-    /** 是一个无符号long long 型的毫秒数，返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。 */
-    connectEnd: number;
-    /** 是一个无符号long long 型的毫秒数，返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值 */
-    connectStart: number;
-    /** 是一个无符号long long 型的毫秒数，返回当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange (en-US) 被触发时的Unix毫秒时间戳。 */
-    domComplete: number;
-    /** 是一个无符号long long 型的毫秒数，返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的Unix毫秒时间戳。 */
-    domContentLoadedEventEnd: number;
-    /** 是一个无符号long long 型的毫秒数，返回当解析器发送DOMContentLoaded (en-US) 事件，即所有需要被执行的脚本已经被解析时的Unix毫秒时间戳。 */
-    domContentLoadedEventStart: number;
-    /** 是一个无符号long long 型的毫秒数，返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange (en-US)事件触发时）的Unix毫秒时间戳。 */
-    domInteractive: number;
-    /** 是一个无符号long long 型的毫秒数，返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange (en-US)事件触发时）的Unix毫秒时间戳。 */
-    domLoading: number;
-    /** 是一个无符号long long 型的毫秒数，表征了域名查询结束的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。 */
-    domainLookupEnd: number;
-    /** 是一个无符号long long 型的毫秒数，表征了域名查询开始的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。 */
-    domainLookupStart: number;
-    /** 是一个无符号long long 型的毫秒数，表征了浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。这个时间点会在检查任何应用缓存之前。 */
-    fetchStart: number;
-    /** 是一个无符号long long 型的毫秒数，返回当load (en-US)事件结束，即加载事件完成时的Unix毫秒时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0. */
-    loadEventEnd: number;
-    /** 是一个无符号long long 型的毫秒数，返回该文档下，load (en-US)事件被发送时的Unix毫秒时间戳。如果这个事件还未被发送，它的值将会是0。 */
-    loadEventStart: number;
-    /** 是一个无符号long long 型的毫秒数，表征了从同一个浏览器上下文的上一个文档卸载(unload)结束时的UNIX时间戳。如果没有上一个文档，这个值会和PerformanceTiming.fetchStart相同 */
-    navigationStart: number;
-    /** 是一个无符号long long 型的毫秒数，表征了最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0. */
-    redirectEnd: number;
-    /** 是一个无符号long long 型的毫秒数，表征了第一个HTTP重定向开始时的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0. */
-    redirectStart: number;
-    /** 是一个无符号long long 型的毫秒数，返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。 */
-    requestStart: number;
-    /** 是一个无符号long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。 */
-    responseEnd: number;
-    /** 是一个无符号long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。 */
-    responseStart: number;
-    /** 是一个无符号long long 型的毫秒数，返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。 */
-    secureConnectionStart: number;
-    /** 是一个无符号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: number;
-    /** 是一个无符号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: number;
-  };
-}

package/src/typing.d.ts

@@ -1,15 +0,0 @@
-interface Navigator {
-  connection: any;
-}
-
-interface Window {
-  attachEvent: any;
-  detachEvent: any;
-  XMLHttpRequest: any; //拦截并定制XHR
-  __XMLHttpRequest__: any; //原生的XHR
-  fetch: any; //拦截并定制fetch
-  __fetch__: any; //原生的fetch
-  getRRWebUserEventsCaptureFunc: () => void; //手动上报视频录像
-  getFullScreenShootFunc: (filename: string | undefined) => Promise<void>; //手动截图
-  manualReportTrackFunc: (data: object) => void; //手动上报
-}

package/src/utils/index.ts

@@ -1,371 +0,0 @@
-import axios from 'axios';
-import { v4 as uuidv4 } from 'uuid';
-import { UAParser } from 'ua-parser-js';
-import { shuyunTrackId, shuyunTrackSessionId } from '../constant';
-import { getReport, setReportValue } from '../config/global';
-import { INavigator } from '../types';
-import { IListData } from '../types/config';
-import { IReport } from '../types/global';
-import { report } from '../reporter';
-import { Config } from '../config';
-import { version } from '../../package.json';
-import { getFullScreenShoot, getUserEvents } from '../handlers/error';
-import { pv } from '../handlers';
-
-const parser = new UAParser();
-
-/**
- * @description 获取uuid
- */
-export function getUid(): string {
-  let uid = localStorage.getItem(shuyunTrackId) || '';
-  if (!uid) {
-    uid = uuidv4();
-    localStorage.setItem(shuyunTrackId, uid);
-  }
-  return uid;
-}
-
-/**
- * @description 获取session id
- */
-export function getSessionId(): string {
-  const sessionId = sessionStorage.getItem(shuyunTrackSessionId);
-  if (sessionId) {
-    return sessionId;
-  } else {
-    const id = uuidv4();
-    sessionStorage.setItem(shuyunTrackSessionId, id);
-    return id;
-  }
-}
-
-/**
- * @description 获取浏览器信息
- */
-export function getNavigator(): INavigator {
-  const uaResult = parser.getResult();
-  return {
-    language: navigator.language,
-    navigatorVendor: navigator.vendor,
-    connectionType: navigator?.connection?.effectiveType || '2g',
-    browserName: uaResult.browser.name || '',
-    browserVersion: uaResult.browser.version || '',
-    engineName: uaResult.engine.name || '',
-    engineVersion: uaResult.engine.version || '',
-    osName: uaResult.os.name || '',
-    osVersion: uaResult.os.version || '',
-  };
-}
-
-/**
- * @description 获取viewport的宽高
- */
-export function getViewport() {
-  const w = document.documentElement.clientWidth || document.body.clientWidth;
-  const h = document.documentElement.clientHeight || document.body.clientHeight;
-  return `${w} x ${h}`;
-}
-
-/**
- * @description 获取元素路径，最多保留5层
- * @param e
- */
-export const getElmPath = function (target: any) {
-  if (!target || target.nodeType !== 1) {
-    return '';
-  }
-  const ret: string[] = [];
-  // 层数，最多5层
-  let deepLength = 0;
-  // 元素
-  let elm = '';
-  if (typeof target.innerText === 'string') {
-    ret.push(`(${target.innerText.substr(0, 50)})`);
-  }
-  for (let t = target || null; t && deepLength++ < 5 && !((elm = normalTarget(t)) === 'html'); ) {
-    // eslint-disable-next-line no-sequences
-    ret.push(elm), (t = t.parentNode);
-  }
-  return ret.reverse().join(' > ');
-};
-
-/**
- * @description 处理html node
- * @param e
- */
-const normalTarget = function (target: Element) {
-  let t, n, r, a, i;
-  const o: string[] = [];
-  if (!target || !target.tagName) {
-    return '';
-  }
-
-  o.push(target.tagName.toLowerCase());
-
-  if (target.id) {
-    o.push('#'.concat(target.id));
-  }
-
-  if ((t = target.className) && Object.prototype.toString.call(t) === '[object String]') {
-    for (n = t.split(/\s+/), i = 0; i < n.length; i++) {
-      // className包含active的不加入路径
-      if (n[i].indexOf('active') < 0) o.push('.'.concat(n[i]));
-    }
-  }
-
-  const s = ['type', 'name', 'title', 'alt'];
-  for (i = 0; i < s.length; i++) {
-    r = s[i];
-    if ((a = target.getAttribute(r))) {
-      o.push('['.concat(r, '="').concat(a, '"]'));
-    }
-  }
-
-  return o.join('');
-};
-
-/**
- * @description 序列化对象
- * @param obj
- */
-export function serialize(obj: { [key: string]: any }) {
-  const str: string[] = [];
-  for (const p in obj) {
-    if (Object.prototype.hasOwnProperty.call(obj, p) && typeof obj[p] !== 'undefined') {
-      const value = typeof obj[p] === 'object' ? JSON.stringify(obj[p]) : obj[p];
-      str.push(encodeURIComponent(p) + '=' + encodeURIComponent(value));
-    }
-  }
-  return str.join('&');
-}
-/**
- * @description 注册事件监听
- * @param event 事件
- * @param fn 回调方法
- */
-export const on = function (event: string, fn: (e: Event) => void) {
-  if (window.addEventListener) {
-    window.addEventListener(event, fn, true);
-  } else {
-    window.attachEvent(`on${event}`, fn);
-  }
-};
-
-/**
- * @description 移除事件监听
- * @param event 事件
- * @param fn 回调方法
- */
-export const off = function (event: any, fn: (e: Event) => void) {
-  if (window.removeEventListener) {
-    return window.removeEventListener(event, fn);
-  } else {
-    return window.detachEvent(`on${event}`, fn);
-  }
-};
-
-const formatTrackElementXPath = (xPath: string) => {
-  const result: string[] = [];
-  const array = xPath.split('/');
-  array.forEach((item) => {
-    if (
-      !['svg', 'path', 'g', 'image', 'text', 'line', 'rect', 'polygon', 'circle', 'ellipse'].some((child) => {
-        if (item.toLowerCase().split('[')[0] === child) {
-          result.push(`/*[name()="${child}"]`);
-          return true;
-        } else {
-          return false;
-        }
-      })
-    ) {
-      result.push(item);
-    }
-  });
-  return result.join('/');
-};
-
-const formatElementXPath = (info: { elementXPath: string }) => {
-  let elementXPathValue = '';
-  const elementXPath = info.elementXPath;
-  if (elementXPath) {
-    const xpathElement = document.evaluate(formatTrackElementXPath(elementXPath), document).iterateNext();
-    elementXPathValue = xpathElement ? (xpathElement.textContent || (xpathElement as any).value)?.trim() : '';
-  }
-  return {
-    elementXPath,
-    elementXPathValue,
-  };
-};
-
-let existTrackListenEvent: { [key: string]: boolean } = {};
-const elements: Array<Node> = [];
-let timeout: NodeJS.Timeout | null;
-export const visualTrackFunc = () => {
-  if (Config.enableVisualTrack) {
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      timeout = null;
-      const url = location.href.split('?')[0];
-      axios
-        .get(`${Config.reportUrl.replace('/s/r', '')}/visual/get_data_list?url=${encodeURIComponent(url)}`)
-        .then((res: any) => {
-          const listData: IListData[] = res.data.result?.result?.dataList;
-          if (Array.isArray(listData)) {
-            try {
-              listData.forEach((item) => {
-                if (item.trackType === 'mount') {
-                  visualReportEvent(item);
-                } else {
-                  const element = document
-                    .evaluate(formatTrackElementXPath(item.trackElementXPath), document)
-                    .iterateNext();
-                  const key = url + item.trackElementXPath;
-                  if (element) {
-                    if (!existTrackListenEvent[key]) {
-                      existTrackListenEvent[key] = true;
-                      elements.push(element);
-                      //@ts-ignore
-                      element.setAttribute('visual-track-data-attr', JSON.stringify(item));
-                      element.addEventListener('click', clickEventFunc);
-                    }
-                  } else {
-                    const func = () => {
-                      const { browserName, browserVersion } = getNavigator();
-                      const payload = {
-                        projectID: Config.projectID,
-                        version,
-                        url,
-                        trackElementXPath: item.trackElementXPath,
-                        trackNameInfo: item.trackNameInfo,
-                        params: item.params,
-                        customPayload: Config.customPayload,
-                        type: 'visual_track_xpath_not_found',
-                        browser: `${browserName} - ${browserVersion}`,
-                      };
-                      if (typeof window.navigator?.sendBeacon === 'function') {
-                        const formData = new FormData();
-                        for (const i in payload) {
-                          if (Object.prototype.hasOwnProperty.call(payload, i)) {
-                            const value = (payload as { [k: string]: string | object })[i];
-                            formData.append(i, value && typeof value === 'object' ? JSON.stringify(value) : value);
-                          }
-                        }
-                        window.navigator.sendBeacon(Config.reportUrl, formData);
-                      } else {
-                        new Image().src = `${Config.reportUrl}?${serialize(payload)}`;
-                      }
-                    };
-                    if (typeof window.requestIdleCallback === 'function') {
-                      window.requestIdleCallback(() => func(), { timeout: 2000 });
-                    } else {
-                      setTimeout(() => func(), 0);
-                    }
-                  }
-                }
-              });
-            } catch (err) {
-              // eslint-disable-next-line no-console
-              console.log('visual track evaluate err', err);
-            }
-          }
-        });
-    }, 1000);
-  }
-};
-
-const visualReportEvent = (item: IListData) => {
-  const { elementXPath, elementXPathValue } = formatElementXPath(item.trackNameInfo);
-  const visualTrackData = {
-    trackType: item.trackType,
-    trackName: elementXPath ? elementXPathValue : item.trackNameInfo.name,
-    params: item.params?.map((child) => {
-      const { elementXPath, elementXPathValue } = formatElementXPath(child);
-      return {
-        name: child.name,
-        value: elementXPath ? elementXPathValue : child.value,
-      };
-    }),
-  };
-  setReportValue<IReport, 'type'>('type', 'visual');
-  setReportValue<IReport, 'vD'>('vD', visualTrackData);
-  report(getReport());
-  setReportValue<IReport, 'vD'>('vD', undefined);
-};
-
-const clickEventFunc = (e: Event) => {
-  //@ts-ignore
-  const item: IListData = JSON.parse(e.target!.getAttribute('visual-track-data-attr'));
-  visualReportEvent(item);
-};
-
-export const initWindowObjectFunction = () => {
-  if (typeof window.manualReportTrackFunc === 'undefined') {
-    window.manualReportTrackFunc = (data: object) => {
-      if (Object.prototype.toString.call(data) !== '[object Object]') {
-        // eslint-disable-next-line no-console
-        console.warn('manualReportTrackFunc参数必须是一个对象！');
-      } else {
-        setReportValue<IReport, 'type'>('type', 'manual');
-        setReportValue<IReport, 'manualReport'>('manualReport', data);
-        report(getReport());
-        setReportValue<IReport, 'manualReport'>('manualReport', undefined);
-      }
-    };
-  }
-
-  if (typeof window.getFullScreenShootFunc === 'undefined') {
-    //下载页面截图
-    window.getFullScreenShootFunc = async (filename: string | undefined): Promise<void> => {
-      const file = await getFullScreenShoot(filename);
-      const url = window.URL.createObjectURL(file);
-      const tagA = document.createElement('a');
-      tagA.setAttribute('href', url);
-      tagA.setAttribute('download', file.name);
-      tagA.setAttribute('target', '_blank');
-      document.body.appendChild(tagA);
-      tagA.click();
-      document.body.removeChild(tagA);
-    };
-  }
-
-  if (typeof window.getRRWebUserEventsCaptureFunc === 'undefined') {
-    window.getRRWebUserEventsCaptureFunc = (): void => {
-      setReportValue<IReport, 'type'>('type', 'error');
-      setReportValue<IReport, 'error'>('error', {
-        subType: 'manual',
-        message: 'manual trigger',
-        events: getUserEvents(true),
-      });
-      report(getReport());
-    };
-  }
-};
-
-let prewHref: string = '';
-export const handleLocationChange = (e: Event) => {
-  const curHref: string = location.href;
-  // href中`？`后面的值改变，不触发后续动作
-  if (prewHref.split('?')[0] === curHref.split('?')[0]) {
-    return;
-  }
-  prewHref = curHref;
-  pv.handleHistoryChange(e);
-  elements.forEach((element) => {
-    element?.removeEventListener('click', clickEventFunc);
-  });
-  //清空可视化埋点之前的数据
-  existTrackListenEvent = {};
-  elements.length = 0;
-  visualTrackFunc();
-};
-
-export function debounce(fn: Function) {
-  let timeout: NodeJS.Timeout;
-  return function (...arg: unknown[]) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      fn.apply(this, arg);
-    }, 1000);
-  };
-}

package/tsconfig.esm.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "scripts"
-  ],
-  "compilerOptions": {
-    "sourceMap": false
-  }
-}