monitor-track 1.10.0

package/dist/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "monitor-track",
+  "version": "1.10.0",
+  "description": "前端监控及埋点SDK工具javascript版本",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "unpkg": "index.js",
+  "scripts": {
+    "clean": "shx rm -rf ./dist",
+    "codecheck": "eslint \"src/**/*.{ts,js}\" && tsc -p ../../tsconfig.json --noEmit",
+    "cp": "node ./scripts/cp.js",
+    "build:esm": "tsc -p ./tsconfig.esm.json",
+    "version": "npm run build",
+    "build": "npm run clean && rollup --config && npm run cp"
+  },
+  "packageInfo": {
+    "repoPath": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "keywords": [
+    "monitor",
+    "track"
+  ],
+  "license": "ISC",
+  "sideEffects": false,
+  "dependencies": {
+    "axios": "^1.2.3",
+    "error-stack-parser": "^2.0.6",
+    "html2canvas": "^1.4.1",
+    "rrweb": "^1.0.4",
+    "ua-parser-js": "^0.7.22",
+    "uuid": "^8.3.1"
+  },
+  "devDependencies": {
+    "@types/uuid": "^8.3.4"
+  }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "monitor-track",
+  "version": "1.10.0",
+  "description": "前端监控及埋点SDK工具javascript版本",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "types": "esm/index.d.ts",
+  "unpkg": "index.js",
+  "scripts": {
+    "clean": "shx rm -rf ./dist",
+    "codecheck": "eslint \"src/**/*.{ts,js}\" && tsc -p ../../tsconfig.json --noEmit",
+    "cp": "node ./scripts/cp.js",
+    "build:esm": "tsc -p ./tsconfig.esm.json",
+    "version": "npm run build",
+    "build": "npm run clean && rollup --config && npm run cp"
+  },
+  "packageInfo": {
+    "repoPath": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "keywords": [
+    "monitor",
+    "track"
+  ],
+  "license": "ISC",
+  "sideEffects": false,
+  "dependencies": {
+    "axios": "^1.2.3",
+    "error-stack-parser": "^2.0.6",
+    "html2canvas": "^1.4.1",
+    "rrweb": "^1.0.4",
+    "ua-parser-js": "^0.7.22",
+    "uuid": "^8.3.1"
+  },
+  "devDependencies": {
+    "@types/uuid": "^8.3.4"
+  },
+  "gitHead": "e6cba26b3c8ebb2dc2c83cdbbb837bbec744cf7e"
+}

package/rollup.config.js

@@ -0,0 +1,66 @@
+import typescript from '@rollup/plugin-typescript';
+import typescript2 from 'rollup-plugin-typescript2';
+// import dts from 'rollup-plugin-dts';
+import json from '@rollup/plugin-json';
+import { dependencies as rootDependencies } from '../../package.json';
+import { dependencies } from './package.json';
+
+const paths = {
+  '@packages': ['../../packages'],
+  '@': ['./src'],
+};
+
+// eslint-disable-next-line no-console
+// console.log('xxx', [...Object.keys(dependencies)]);
+
+export default [
+  {
+    input: './src/index.ts',
+    output: {
+      dir: './dist/cjs',
+      format: 'cjs',
+    },
+    plugins: [
+      json(),
+      typescript2({
+        tsconfigOverride: {
+          compilerOptions: {
+            declaration: true,
+            declarationMap: false,
+            module: 'ESNext',
+            paths,
+          },
+        },
+        tsconfig: './tsconfig.esm.json',
+      }),
+    ],
+    external: [...Object.keys({ ...rootDependencies, dependencies })],
+  },
+  {
+    input: './src/index.ts',
+    output: {
+      dir: './dist/esm',
+      format: 'esm',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+    },
+    plugins: [
+      json(),
+      typescript2({
+        useTsconfigDeclarationDir: false,
+        tsconfig: './tsconfig.esm.json',
+      }),
+    ],
+    external: [...Object.keys({ ...rootDependencies, dependencies })],
+  },
+  {
+    input: './src/index.ts',
+    output: {
+      dir: './dist',
+      format: 'iife',
+      name: 'ShuyunTrack',
+    },
+    plugins: [json(), typescript()],
+    external: [...Object.keys(dependencies)],
+  },
+];

package/scripts/cp.js

@@ -0,0 +1,11 @@
+const shell = require('shelljs');
+
+shell.cp('-R', 'dist/esm/src/*', 'dist/esm');
+shell.cp('-R', 'dist/cjs/src/*', 'dist/cjs');
+
+shell.cp('./README.md', './dist');
+shell.cp('./CHANGELOG.md', './dist');
+shell.cp('./package.json', './dist');
+
+shell.rm('-rf', './dist/esm/src');
+shell.rm('-rf', './dist/cjs/src');

package/src/config/global.ts

@@ -0,0 +1,309 @@
+/*
+ * @Author: Mark.Zhang
+ * @Date: 2020-10-26 15:40:16
+ * @Description 全局配置项
+ */
+import { v4 as uuidv4 } from 'uuid';
+import { report } from '../reporter';
+import { getNavigator, getSessionId, getUid, getViewport } from '../utils';
+import { setPVTime, setRouteStack } from '../handlers/pv';
+import { Config } from '.';
+import { version } from '../../package.json';
+import { IReport } from '../types/global';
+
+// 上报数据
+let Report: IReport = {
+  uuid: '',
+  projectID: '',
+  host: '',
+  originPage: '',
+  page: '',
+  time: 0,
+  browserName: '',
+  browserVersion: '',
+  engineName: '',
+  engineVersion: '',
+  language: '',
+  navigatorVendor: '',
+  connectionType: '2g',
+  osName: '',
+  osVersion: '',
+  type: 'init',
+  viewport: '',
+  screen: '',
+  version: '',
+  charset: '',
+  pageTitle: '',
+  referrer: '',
+  pv: null,
+  ua: null,
+  error: null,
+  dpr: 1,
+  perf: null,
+  vD: undefined,
+  manualReport: undefined,
+  lifeCycleId: uuidv4(),
+  sessionId: getSessionId(),
+};
+
+/**
+ * @description 初始化上报数据并上报
+ */
+export function initReport() {
+  if (document.readyState === 'complete') {
+    initReportFunc();
+  } else {
+    // 注意：这里不要使用window.onload，因为一个项目window.onload只能用一次，如果这里用了就会影响宿主项目的功能
+    window.addEventListener('load', initReportFunc);
+  }
+}
+
+function initReportFunc() {
+  setRouteStack([location.href, location.href]);
+  setPVTime();
+  Report = {
+    ...getReport(),
+    ...{
+      page: location.href,
+      originPage: location.href,
+      type: 'init',
+      perf: performance,
+      sessionId: getSessionId(),
+      lifeCycleId: uuidv4(),
+    },
+  };
+  report(Report);
+}
+
+/**
+ * @description 设置Report的值
+ * @param key Report key
+ * @param value Report 值
+ */
+export function setReportValue<T extends IReport, K extends keyof T>(key: K, value: T[K]) {
+  if (Object.prototype.hasOwnProperty.call(Report, key)) {
+    if (['pv', 'ua', 'error', 'request'].includes(key as string)) {
+      Report = {
+        ...Report,
+        ...{
+          pv: null,
+          ua: null,
+          error: null,
+          req: null,
+          manualReport: undefined,
+          perf: null,
+        },
+      };
+    }
+    (Report as any)[key] = value;
+  }
+}
+
+/**
+ * @description 获取上报数据
+ */
+export function getReport(): IReport {
+  const nav = getNavigator();
+  const viewport = getViewport();
+
+  return {
+    ...Report,
+    ...nav,
+    ...{
+      version,
+      projectID: Config.projectID,
+      host: location.host,
+      uuid: getUid(),
+      viewport,
+      screen: `${screen.width} x ${screen.height}`,
+      pageTitle: document.title,
+      referrer: document.referrer,
+      charset: document.charset,
+      customPayload: Config.customPayload,
+      dpr: window.devicePixelRatio,
+    },
+  };
+}
+
+function ajaxEventTrigger(event: 'ajaxLoadStart' | 'ajaxLoadEnd') {
+  const ajaxEvent = new CustomEvent(event, {
+    detail: this,
+  });
+  window.dispatchEvent(ajaxEvent);
+}
+
+const OldXHR = window.XMLHttpRequest;
+function newXHR() {
+  const realXHR = new OldXHR();
+  realXHR.addEventListener(
+    'loadstart',
+    function () {
+      ajaxEventTrigger.call(this, 'ajaxLoadStart');
+    },
+    false,
+  );
+  realXHR.addEventListener(
+    'loadend',
+    function () {
+      ajaxEventTrigger.call(this, 'ajaxLoadEnd');
+    },
+    false,
+  );
+  // 此处的捕获的异常会连日志接口也一起捕获，如果日志上报接口异常了，就会导致死循环了。
+  realXHR.onerror = function (e: Error) {
+    // eslint-disable-next-line no-console
+    console.warn('realXHR.onerror, e', e);
+  };
+  return realXHR;
+}
+
+/**
+ * 页面接口请求监控
+ */
+const tempUrlInfo: { [k: string]: boolean } = {};
+export const recordXMLHttpRequestLog = (XMLHttpRequestTimeout?: number) => {
+  XMLHttpRequestTimeout = typeof XMLHttpRequestTimeout === 'number' ? XMLHttpRequestTimeout : 1000;
+  const timeRecordArray: {
+    timeStamp: number;
+    event: any;
+  }[] = [];
+  window.__XMLHttpRequest__ = window.XMLHttpRequest;
+  window.XMLHttpRequest = newXHR;
+  window.addEventListener('ajaxLoadStart', function (e) {
+    const tempObj = {
+      timeStamp: new Date().getTime(),
+      event: e,
+    };
+    timeRecordArray.push(tempObj);
+  });
+  window.addEventListener('ajaxLoadEnd', function () {
+    const timeRecordArrayCopy = ([] as any).concat(timeRecordArray);
+    for (let i = 0; i < timeRecordArrayCopy.length; i++) {
+      if (timeRecordArrayCopy[i].event.detail && timeRecordArrayCopy[i].event.detail.status > 0) {
+        const currentTime = new Date().getTime();
+        const { responseURL, status, statusText, timeStamp } = timeRecordArrayCopy[i].event.detail;
+        const previousTime = timeStamp || timeRecordArrayCopy[i].timeStamp;
+        const loadTime = currentTime - previousTime;
+        const request = {
+          requestType: 'xhr',
+          responseURL,
+          status,
+          loadTime,
+          statusText,
+          reason: '',
+          detail: '',
+        };
+        if (loadTime && loadTime > XMLHttpRequestTimeout!) {
+          request.reason = 'slow';
+          request.detail = `request is too slow, XMLHttpRequestTimeout: ${XMLHttpRequestTimeout}`;
+        } else if (status && status >= 300 && statusText && statusText.toLowerCase() !== 'ok') {
+          request.reason = 'failed';
+          request.detail = `request is failed, status: ${status}, statusText: ${statusText}`;
+        } else {
+          // console.log('responseURL', responseURL);
+        }
+        if (request.reason) {
+          if (!tempUrlInfo[responseURL]) {
+            tempUrlInfo[responseURL] = true;
+            setTimeout(() => {
+              delete tempUrlInfo[responseURL];
+            }, 10);
+            setReportValue<IReport, 'error'>('error', null);
+            report({
+              ...getReport(),
+              ...{
+                page: location.href,
+                originPage: location.href,
+                type: 'request',
+                req: request,
+              },
+            });
+          }
+        }
+      } else {
+        //status为0,请求未响应,比如取消请求
+      }
+      // 当前请求成功后就在数组中移除掉
+      timeRecordArray.splice(i, 1);
+    }
+  });
+};
+
+export const hackFetch = (XMLHttpRequestTimeout?: number) => {
+  XMLHttpRequestTimeout = typeof XMLHttpRequestTimeout === 'number' ? XMLHttpRequestTimeout : 1000;
+  if (typeof window.fetch === 'function') {
+    const __fetch__ = window.fetch;
+    window.__fetch__ = __fetch__;
+    window.fetch = function (t: string, ...args: any[]) {
+      const begin = Date.now();
+      //禁用数组的扩展运算符,否则portal的生产环境会报Uncaught TypeError: Object(...) is not a function,
+      //编译后的__spreadArray函数有问题,而这个函数来自于tslib.具体报错原因不知.
+      //其他平台使用数组的扩展运算符没有问题,比如前端监控平台的管理界面
+      const params = ([] as any).concat(t).concat(args);
+      return __fetch__
+        .apply(window, params)
+        .then(function (res: any) {
+          const response = res.clone();
+          const headers = response.headers;
+          if (headers && typeof headers.get === 'function') {
+            const ct = headers.get('content-type');
+            if (ct && !/(text)|(json)/.test(ct)) {
+              return res;
+            }
+          }
+          const loadTime = Date.now() - begin;
+          response
+            .text()
+            .then(function (result: []) {
+              const { url, status, statusText, ok } = response;
+              const request = {
+                requestType: 'fetch',
+                responseURL: url,
+                status,
+                loadTime,
+                statusText,
+                reason: '',
+                detail: '',
+              };
+              if (!ok || status >= 300) {
+                request.reason = 'failed';
+                request.detail = `request is failed, status: ${status}, statusText: ${statusText}`;
+              } else if (loadTime > XMLHttpRequestTimeout!) {
+                request.reason = 'slow';
+                request.detail = `request is too slow, XMLHttpRequestTimeout: ${XMLHttpRequestTimeout}, result: ${result?.slice(
+                  0,
+                  500,
+                )}`;
+              }
+              if (request.reason) {
+                if (!tempUrlInfo[url]) {
+                  tempUrlInfo[url] = true;
+                  setTimeout(() => {
+                    delete tempUrlInfo[url];
+                  }, 10);
+                  setReportValue<IReport, 'error'>('error', null);
+                  report({
+                    ...getReport(),
+                    ...{
+                      page: location.href,
+                      originPage: location.href,
+                      type: 'request',
+                      req: request,
+                    },
+                  });
+                }
+              }
+            })
+            .catch((err: Error) => {
+              // eslint-disable-next-line no-console
+              console.log('hackFetch response.text() err', err);
+            });
+          return res;
+        })
+        .catch((err: Error) => {
+          // eslint-disable-next-line no-console
+          console.log('hackFetch err', err);
+        });
+    };
+  }
+};

package/src/config/index.ts

@@ -0,0 +1,53 @@
+/*
+ * @Author: Mark.Zhang
+ * @Description 配置项相关参数及方法
+ */
+
+import { IConfig } from '../types/config';
+
+/**  */
+/**
+ * @description config配置项默认值
+ */
+export const Config: IConfig = {
+  reportUrl: '',
+  projectID: '',
+  maxLength: 1000,
+  spa: false,
+  hash: false,
+  enableBehavior: true,
+  enableError: true,
+  enableVisualTrack: false,
+  ignore: {
+    urls: [],
+    errors: [],
+    apis: [],
+  },
+};
+
+/**
+ * @description 设置config配置项
+ * @param config 配置项
+ */
+export function setConfig(config: IConfig) {
+  Object.assign(Config, config);
+}
+
+/**
+ * @description 设置config配置项
+ * @param config 配置项
+ */
+export function setConfigValue<T extends IConfig, K extends keyof T>(key: K, value: T[K]) {
+  if ((Config as any)[key]) {
+    (Config as any)[key] = value;
+  }
+}
+
+/**
+ * @description 获取通过key值获取配置项value
+ * @param key
+ * @returns value的值
+ */
+export function getConfigValue(key: keyof IConfig) {
+  return Config[key];
+}

package/src/constant.ts

@@ -0,0 +1,2 @@
+export const shuyunTrackId = 'shuyun-track-id';
+export const shuyunTrackSessionId = 'shuyun-track-session-id';