monitor-track 1.10.0 → 1.10.2

package/src/handlers/error.ts

@@ -1,187 +0,0 @@
-/*
- * @Author: Mark.Zhang
- * @Date: 2020-10-26 11:10:04
- * @Description 资源加载错误及js错误相关的处理方法
- */
-
-import * as rrweb from 'rrweb';
-import ErrorStackParser from 'error-stack-parser';
-import html2canvas from 'html2canvas';
-import { v4 as uuidv4 } from 'uuid';
-import { report } from '../reporter';
-import { getReport, setReportValue } from '../config/global';
-import { IReport } from '../types/global';
-import { Config } from '../config';
-
-const eventsMatrix: any[][] = [[]];
-
-rrweb.record({
-  emit(event, isCheckout) {
-    // isCheckout 是一个标识，告诉你重新制作了快照
-    if (isCheckout) {
-      eventsMatrix.push([]);
-    }
-    if (eventsMatrix.length > 2) {
-      eventsMatrix.shift();
-    }
-    const lastEvents = eventsMatrix[eventsMatrix.length - 1];
-    lastEvents.push(event);
-  },
-  // 每30秒重新制作快照
-  checkoutEveryNms: 30 * 1000,
-});
-
-/**
- * @description 错误事件触发后的操作
- */
-export function handleError(event: ErrorEvent | Event | PromiseRejectionEvent): void {
-  setReportValue<IReport, 'type'>('type', 'error');
-  if (event.type === 'error') {
-    if (event instanceof ErrorEvent) {
-      setCaughtError(event);
-    } else {
-      setResourceError(event);
-    }
-  } else if (event.type === 'unhandledrejection') {
-    setPromiseError(event as PromiseRejectionEvent);
-  }
-}
-
-/**
- * @description 设置错误信息
- */
-export function setCaughtError(event: ErrorEvent) {
-  if (ignoreError(event.message)) {
-    return;
-  }
-  let filename = event.filename,
-    line = event.lineno,
-    column = event.colno,
-    functionName = '',
-    stackFrame = JSON.stringify([]);
-  if (event.error && event.error.stack) {
-    const error = ErrorStackParser.parse(event.error);
-    stackFrame = JSON.stringify(error);
-    const info = error.find((item) => item.fileName && !/node_modules|vendor|bundle/.test(item.fileName));
-    if (info) {
-      filename = info.fileName!;
-      line = Number(info.lineNumber);
-      column = Number(info.columnNumber);
-      functionName = info.functionName || '';
-    }
-  }
-  setReportValue<IReport, 'error'>('error', {
-    subType: 'js',
-    line,
-    column,
-    message: event.message,
-    filename,
-    functionName,
-    stack: event?.error?.stack?.substring(0, Config.maxLength) || '',
-    stackFrame,
-    events: getUserEvents(false),
-  });
-  report(getReport());
-}
-
-/**
- * @description 设置异步错误信息
- */
-export function setPromiseError(event: PromiseRejectionEvent) {
-  let message = event.reason;
-  if (event.reason && typeof event.reason === 'object') {
-    message = JSON.stringify(event.reason);
-    if (message === '{}') {
-      message = event.reason.stack;
-    }
-  }
-  if (ignoreError(message)) {
-    return;
-  }
-  setReportValue<IReport, 'error'>('error', {
-    subType: 'async',
-    message,
-    events: getUserEvents(false),
-  });
-  report(getReport());
-}
-
-/**
- * @description 设置资源错误信息
- */
-export function setResourceError(event: Event) {
-  const target = event.target as any;
-  if (ignoreError(target.outerHTML)) {
-    return;
-  }
-  setReportValue<IReport, 'error'>('error', {
-    subType: 'resource',
-    message: target.outerHTML,
-    filename: target.src || target.currentSrc,
-    stack: target.localName.toUpperCase().substring(0, Config.maxLength),
-    events: getUserEvents(false),
-  });
-  report(getReport());
-}
-
-/**
- * 忽略的error
- * @param errorMsg 错误信息
- */
-export function ignoreError(errorMsg: string) {
-  const errors = Config?.ignore?.errors || [];
-
-  const existIgnoreError = errors.findIndex((item) => {
-    if (typeof item === 'string') {
-      return item === errorMsg;
-    } else if (Object.prototype.toString.call(item) === '[object Object]') {
-      if (item.regExp && typeof item.input === 'string') {
-        const regex = new RegExp(item.input, 'g');
-        return regex.test(errorMsg);
-      }
-      return false;
-    } else {
-      return false;
-    }
-  });
-
-  return existIgnoreError > -1;
-}
-
-/**
- * 获取用户最近得操作,视频录像时间应当在30秒到60秒之间
- */
-let lastGetTime = Date.now(); //缓存操作录像，防止段时间内大量获取录像数据导滞内存溢出
-export function getUserEvents(notUseCache: boolean) {
-  let events;
-  if (Date.now() - lastGetTime > 2000 || notUseCache) {
-    lastGetTime = Date.now();
-    if (eventsMatrix.length >= 2) {
-      const finalVideoData = eventsMatrix[eventsMatrix.length - 1];
-      events = JSON.stringify(eventsMatrix[eventsMatrix.length - 2].concat(finalVideoData));
-      if (events.length > 1024 * 1024 * 15 && JSON.stringify(finalVideoData).length > 1024 * 1024) {
-        //如果录像数据量太大且最后那个分片的数据量不算小，那么缩短上报的录像时长
-        events = JSON.stringify(eventsMatrix[eventsMatrix.length - 1]);
-      }
-    } else {
-      events = JSON.stringify(eventsMatrix);
-    }
-  }
-  return events;
-}
-
-export function getFullScreenShoot(filename: string | undefined): Promise<File> {
-  const name = filename || uuidv4();
-  return html2canvas(document.body).then(function (canvas) {
-    const urlData = canvas.toDataURL('image/png', 1);
-    const bytes = window.atob(urlData.split(',')[1]);
-    const mime = urlData!.split(',')[0]!.match(/:(.*?);/)?.[1];
-    const ab = new ArrayBuffer(bytes.length);
-    const ia = new Uint8Array(ab);
-    for (let i = 0; i < bytes.length; i++) {
-      ia[i] = bytes.charCodeAt(i);
-    }
-    const file = new File([ab], `${name}.png`, { type: mime });
-    return file;
-  });
-}

package/src/handlers/index.ts

@@ -1,3 +0,0 @@
-export * as pv from './pv';
-export * as error from './error';
-export * as userActivity from './user-activity';

package/src/handlers/pv.ts

@@ -1,124 +0,0 @@
-/* eslint-disable prefer-rest-params */
-/*
- * @Author: Mark.Zhang
- * @Date: 2020-10-26 11:10:04
- * @Description 路由相关的处理方法
- */
-import { getReport, setReportValue } from '../config/global';
-import { report } from '../reporter';
-import { Config } from '../config';
-import { IReport } from '../types/global';
-import { visualTrackFunc } from '../utils';
-
-/** 路由栈数组，存储路由变化信息 */
-let routerStack: string[] = [];
-
-/** 路由触发的时间 */
-let time = 0;
-
-/**
- * @description 派发pushState， replaceState 的监听
- * @param type
- */
-export function _history(type: 'pushState' | 'replaceState') {
-  const origin = history[type];
-  return function () {
-    // @ts-ignore
-    const r = origin.apply(this, arguments);
-    const e = new Event(type);
-    // @ts-ignore
-    (e as any).arguments = arguments;
-    window.dispatchEvent(e);
-    return r;
-  };
-}
-
-/**
- * @description 处理hash变化
- * @param e hash事件
- */
-export function handleHashChange(__e: Event) {
-  if (Config.spa && Config.hash) {
-    setReport();
-  }
-}
-
-/**
- * @description 处理history变化
- * @param e history事件
- */
-export function handleHistoryChange(__e: Event) {
-  visualTrackFunc();
-  setReport();
-}
-
-/**
- * 设置信息并触发上报
- */
-function setReport() {
-  let pageUrl = location.href;
-
-  /**
-   * 此判断的逻辑是因为spa且hash模式下，路由搜索参数更改也会触发handleHistoryChange事件
-   * 所以路由栈中的信息只保存无搜索参数的地址
-   */
-  if (Config.hash && Config.spa) {
-    const currentUrlSplit = location.href.split('#');
-    let currentUrlPostfix = '';
-    if (currentUrlSplit[1]) {
-      const index = currentUrlSplit[1].indexOf('?');
-      if (index > -1) {
-        currentUrlPostfix = currentUrlSplit[1].substring(0, index);
-      } else {
-        currentUrlPostfix = currentUrlSplit[1];
-      }
-    }
-    const currentUrlResult = `${currentUrlSplit[0]}#${currentUrlPostfix}`;
-    pageUrl = currentUrlResult;
-  }
-
-  const { originPage, page } = setRouteStack(pageUrl);
-  // 愿页面等于当前页面，说明无路由变更。只有spa且hash模式下才会出现
-  if (originPage === page) {
-    return;
-  }
-
-  const currentTime = new Date().getTime();
-  // 页面停留时间
-  const stayTime = currentTime - time;
-
-  // 设置触发路由变化的时间
-  time = currentTime;
-  // 设置信息
-  setReportValue<IReport, 'originPage'>('originPage', originPage);
-  setReportValue<IReport, 'page'>('page', page);
-
-  setReportValue<IReport, 'type'>('type', 'pv');
-  setReportValue<IReport, 'pv'>('pv', { stayTime });
-  // 上报数据
-  report(getReport());
-}
-
-export function setPVTime() {
-  time = new Date().getTime();
-}
-
-/**
- * @description 添加路由栈信息
- * @param page 页面信息
- */
-export function setRouteStack(page: string | string[]): { originPage: string; page: string } {
-  if (typeof page === 'string') {
-    routerStack.push(page);
-  } else {
-    routerStack = routerStack.concat(page);
-  }
-
-  // 路由栈只需保留两个来作为源页面和当前页面
-  routerStack = routerStack.slice(-2);
-
-  return {
-    originPage: routerStack[0],
-    page: routerStack[1] || routerStack[0],
-  };
-}

package/src/handlers/user-activity.ts

@@ -1,69 +0,0 @@
-/*
- * @Author: Mark.Zhang
- * @Date: 2020-10-26 11:10:04
- * @Description 用户行为处理方法
- */
-
-import { getElmPath } from '../utils';
-import { report } from '../reporter';
-import { getReport, setReportValue } from '../config/global';
-import { IReport } from '../types/global';
-
-/**
- * @description 点击事件触发后的操作
- */
-export function handleClick(event: Event) {
-  const target = event.target as HTMLElement;
-  if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
-    return;
-  }
-  const path = getElmPath(target);
-  if (path) {
-    setReportValue<IReport, 'type'>('type', 'ua');
-    setReportValue<IReport, 'ua'>('ua', {
-      subType: 'ui.click',
-      x: (event as MouseEvent).x,
-      y: (event as MouseEvent).y,
-      path,
-    });
-    report(getReport());
-  }
-}
-
-/**
- * @description 点击触发失焦后的操作
- */
-export function handleBlur(event: Event) {
-  const target = event.target as any;
-
-  if (target.nodeName !== 'INPUT' && target.nodeName !== 'TEXTAREA') {
-    return;
-  }
-  const path = getElmPath(target);
-  if (path) {
-    setReportValue<IReport, 'type'>('type', 'ua');
-    setReportValue<IReport, 'ua'>('ua', {
-      subType: 'ui.blur',
-      x: (event as MouseEvent).x,
-      y: (event as MouseEvent).y,
-      path,
-      value: target.value,
-    });
-    report(getReport());
-  }
-}
-
-/**
- * @description 滚动的操作
- */
-let timeout: NodeJS.Timeout;
-export function handleScroll(_event: Event) {
-  clearTimeout(timeout);
-  timeout = setTimeout(() => {
-    setReportValue<IReport, 'type'>('type', 'ua');
-    setReportValue<IReport, 'ua'>('ua', {
-      subType: 'ui.scroll',
-    });
-    report(getReport());
-  }, 1000);
-}

package/src/index.ts

@@ -1,127 +0,0 @@
-import { on, off, visualTrackFunc, initWindowObjectFunction, handleLocationChange } from './utils';
-import { setConfig, Config } from './config';
-import { hackFetch, initReport, recordXMLHttpRequestLog } from './config/global';
-import { pv, error, userActivity } from './handlers';
-import { _history } from './handlers/pv';
-import { IConfig } from './types/config';
-import { shuyunTrackSessionId } from './constant';
-
-export default class Track {
-  init(config: IConfig) {
-    // 是否开启日志收集
-    if (!config || !config.enable) {
-      return;
-    }
-
-    // 没有项目ID，则不监听任何事件
-    if (!config.projectID) {
-      // eslint-disable-next-line no-console
-      console.warn('缺少项目ID或token!');
-      return;
-    }
-
-    // 没有reportUrl
-    if (!config.reportUrl) {
-      // eslint-disable-next-line no-console
-      console.warn('缺少上报地址!');
-      return;
-    }
-
-    if (this.ignoreUrl(config?.ignore?.urls || [])) {
-      return;
-    }
-    setConfig(config);
-    initReport();
-
-    recordXMLHttpRequestLog(config.XMLHttpRequestTimeout);
-    hackFetch(config.XMLHttpRequestTimeout);
-
-    Config.spa && this.addListenRouterChange();
-
-    Config.enableBehavior && this.addListenUserActivity();
-
-    Config.enableError && this.addListenJSUncaught();
-
-    this.visualTrack();
-
-    this.addListenUnload();
-    initWindowObjectFunction();
-  }
-
-  visualTrack = () => {
-    window.onload = () => {
-      visualTrackFunc();
-    };
-  };
-
-  /**
-   * @description 监听错误异常
-   */
-  addListenJSUncaught() {
-    on('error', error.handleError);
-    on('unhandledrejection', error.handleError);
-  }
-
-  /**
-   * @description 监听行为
-   */
-  addListenUserActivity() {
-    on('click', userActivity.handleClick); // 非输入框点击
-    on('blur', userActivity.handleBlur); // 输入框失焦
-    on('scroll', userActivity.handleScroll); // 输入框失焦
-  }
-
-  /**
-   * @description 监听路由变化
-   */
-  addListenRouterChange() {
-    on('popstate', handleLocationChange);
-    // on('hashchange', pv.handleHashChange);  //触发hashchange的同时也会触发popstate
-    if (Config.spa && !Config.hash) {
-      history.pushState = _history('pushState');
-      history.replaceState = _history('replaceState');
-      on('pushState', handleLocationChange);
-      on('replaceState', handleLocationChange);
-    }
-  }
-
-  /**
-   * @description 页面将要关闭
-   */
-  addListenUnload() {
-    on('beforeunload', () => {
-      this.destroy();
-    });
-  }
-
-  /**
-   * 忽略的url
-   * @param urls
-   */
-  ignoreUrl(urls: string[]) {
-    const someUrl = urls.some((url) => location.href.includes(url));
-    return someUrl;
-  }
-
-  /**
-   * @description 销毁监听器
-   */
-  destroy() {
-    if (Config.spa) {
-      // off('hashchange', pv.handleHashChange);
-      off('pushState', pv.handleHistoryChange);
-      off('popstate', pv.handleHistoryChange);
-      off('replaceState', pv.handleHistoryChange);
-    }
-
-    if (Config.enableBehavior) {
-      off('click', userActivity.handleClick);
-      off('blur', userActivity.handleBlur);
-      off('scroll', userActivity.handleScroll);
-    }
-    if (Config.enableError) {
-      off('error', error.handleError);
-    }
-    sessionStorage.removeItem(shuyunTrackSessionId);
-  }
-}

package/src/main.ts

@@ -1,8 +0,0 @@
-/* eslint-disable no-undef */
-import Track from './index';
-
-//@ts-ignore
-if (SCRIPT_SRC) {
-  //@ts-ignore
-  window.Track = Track;
-}