monitor-track 1.11.0 → 1.12.0

package/cjs/index.js

@@ -1,64 +1,36 @@
 'use strict';
 
-var axios = require('axios');
 var uuid = require('uuid');
-var uaParserJs = require('ua-parser-js');
-var rrweb = require('rrweb');
 var ErrorStackParser = require('error-stack-parser');
 var html2canvas = require('html2canvas');
+var rrweb = require('rrweb');
+var axios = require('axios');
+var uaParserJs = require('ua-parser-js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
-var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var rrweb__namespace = /*#__PURE__*/_interopNamespace(rrweb);
 var ErrorStackParser__default = /*#__PURE__*/_interopDefaultLegacy(ErrorStackParser);
 var html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-const monitorTrackId = 'monitor-track-id';
-const monitorTrackSessionId = 'monitor-track-session-id';
+var rrweb__namespace = /*#__PURE__*/_interopNamespace(rrweb);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 
 /**  */
 /**
@@ -87,6 +59,8 @@ function setConfig(config) {
     Object.assign(Config, config);
 }
 
+var version = "1.12.0";
+
 const eventsMatrix = [[]];
 rrweb__namespace.record({
     emit(event, isCheckout) {
@@ -254,1118 +228,1182 @@ function getFullScreenShoot(filename) {
     });
 }
 
-/** 上报数据映射 */
-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',
-};
-const xhrFunc = (filename, userId, asyncUpdateId, file, res, callback, rest) => {
-    const formData = new FormData();
-    for (const i in rest) {
-        if (Object.prototype.hasOwnProperty.call(rest, i)) {
-            formData.append(i, rest[i]);
-        }
-    }
-    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 () {
-        var _a;
-        if (xhr.readyState === 4) {
-            if (xhr.status === 200) {
-                try {
-                    const response = xhr.responseText;
-                    const resp = JSON.parse(response);
-                    callback((_a = resp.result) === null || _a === void 0 ? void 0 : _a.response);
-                }
-                catch (_err) {
-                    //
-                }
-                res();
-            }
-            else {
-                res();
-            }
-        }
-    };
-    xhr.send(formData);
-};
-const ERROR_MESSAGE_MAP = {};
-function reportFunc(data) {
-    var _a, _b, _c;
-    const payload = convertToSchema(data, reportMap);
-    payload.time = new Date().getTime(); // 设置上报时间
-    let picturePromise = Promise.resolve();
-    let hasErrorEvent = false;
-    const filename = uuid.v4();
-    if (data.type === 'error') {
-        let message = ((_a = data.error) === null || _a === void 0 ? void 0 : _a.message) || 'default';
-        if (((_b = data.error) === null || _b === void 0 ? void 0 : _b.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 ((_c = data.error) === null || _c === void 0 ? void 0 : _c.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) => {
-                return new Promise((res) => {
-                    xhrFunc(file.name, data.uuid, filename, file, res, (result) => {
-                        payload.error.pic = result;
-                    }, { p, pid, host, bN, pt });
-                });
-            })
-                .catch((err) => {
-                payload.error.picError = (err === null || err === void 0 ? void 0 : err.stack) || (err === null || err === void 0 ? void 0 : err.toString());
-            });
-        }
-    }
-    return picturePromise
-        .then(() => {
-        var _a;
-        if ((_a = payload.error) === null || _a === void 0 ? void 0 : _a.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) => {
-        //
-    });
-}
-// 上报
-function report(data) {
-    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);
-        }
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
+}
+
+const monitorTrackId = 'monitor-track-id';
+const monitorTrackSessionId = 'monitor-track-session-id';
+
+/**
+ * @description 点击事件触发后的操作
+ */
+function handleClick(event) {
+    const target = event.target;
+    if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
+        return;
+    }
+    const path = getElmPath(target);
+    if (path) {
+        setReportValue('type', 'ua');
+        setReportValue('ua', {
+            subType: 'ui.click',
+            x: event.x,
+            y: event.y,
+            path,
+        });
+        report(getReport());
+    }
 }
 /**
- * @description 将数据转换成最终提交的数据，主要目的是简化数据的key的长度，从而降低荷载大小
- * @param data 要转换的数据
- * @param map 要转换的数据的字段映射
- * @param redundancyData 冗余数据
+ * @description 点击触发失焦后的操作
  */
-function convertToSchema(data, map, redundancyData) {
-    const reportData = {};
-    if (redundancyData) {
-        map = Object.assign(Object.assign({}, map), redundancyData);
+function handleBlur(event) {
+    const target = event.target;
+    if (target.nodeName !== 'INPUT' && target.nodeName !== 'TEXTAREA') {
+        return;
     }
-    for (const result of Object.entries(map)) {
-        const [key, mapKey] = result;
-        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], map[key]);
-                    }
-                }
-                else {
-                    reportData[key] = data[key];
-                }
-            }
-            else {
-                // 排除undefined
-                if (data[key] !== undefined) {
-                    reportData[mapKey] = data[key];
-                }
-            }
-        }
+    const path = getElmPath(target);
+    if (path) {
+        setReportValue('type', 'ua');
+        setReportValue('ua', {
+            subType: 'ui.blur',
+            x: event.x,
+            y: event.y,
+            path,
+            value: target.value,
+        });
+        report(getReport());
     }
-    return reportData;
+}
+/**
+ * @description 滚动的操作
+ */
+let timeout$1;
+function handleScroll(_event) {
+    clearTimeout(timeout$1);
+    timeout$1 = setTimeout(() => {
+        setReportValue('type', 'ua');
+        setReportValue('ua', {
+            subType: 'ui.scroll',
+        });
+        report(getReport());
+    }, 1000);
 }
 
-/** 路由栈数组，存储路由变化信息 */
-let routerStack = [];
-/** 路由触发的时间 */
-let time = 0;
+const parser = new uaParserJs.UAParser();
 /**
- * @description 派发pushState， replaceState 的监听
- * @param type
+ * @description 获取uuid
  */
-function _history(type) {
-    const origin = history[type];
-    return function () {
-        // @ts-ignore
-        // eslint-disable-next-line prefer-rest-params
-        const r = origin.apply(this, arguments);
-        const e = new Event(type);
-        // @ts-ignore
-        // eslint-disable-next-line prefer-rest-params
-        e.arguments = arguments;
-        window.dispatchEvent(e);
-        return r;
-    };
+function getUid() {
+    let uid = localStorage.getItem(monitorTrackId) || '';
+    if (!uid) {
+        uid = uuid.v4();
+        localStorage.setItem(monitorTrackId, uid);
+    }
+    return uid;
 }
 /**
- * @description 处理history变化
- * @param e history事件
+ * @description 获取session id
  */
-function handleHistoryChange(__e) {
-    visualTrackFunc();
-    setReport();
+function getSessionId() {
+    const sessionId = sessionStorage.getItem(monitorTrackSessionId);
+    if (sessionId) {
+        return sessionId;
+    }
+    else {
+        const id = uuid.v4();
+        sessionStorage.setItem(monitorTrackSessionId, id);
+        return id;
+    }
 }
 /**
- * 设置信息并触发上报
+ * @description 获取浏览器信息
  */
-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('originPage', originPage);
-    setReportValue('page', page);
-    setReportValue('type', 'pv');
-    setReportValue('pv', { stayTime });
-    // 上报数据
-    report(getReport());
+function getNavigator() {
+    var _a;
+    const uaResult = parser.getResult();
+    return {
+        language: navigator.language,
+        navigatorVendor: navigator.vendor,
+        connectionType: ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.connection) === null || _a === void 0 ? void 0 : _a.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 || '',
+    };
 }
-function setPVTime() {
-    time = new Date().getTime();
+/**
+ * @description 获取viewport的宽高
+ */
+function getViewport() {
+    const w = document.documentElement.clientWidth || document.body.clientWidth;
+    const h = document.documentElement.clientHeight || document.body.clientHeight;
+    return `${w} x ${h}`;
 }
 /**
- * @description 添加路由栈信息
- * @param page 页面信息
+ * @description 获取元素路径，最多保留5层
+ * @param e
  */
-function setRouteStack(page) {
-    if (typeof page === 'string') {
-        routerStack.push(page);
+const getElmPath = function (target) {
+    if (!target || target.nodeType !== 1) {
+        return '';
     }
-    else {
-        routerStack = routerStack.concat(page);
+    const ret = [];
+    // 层数，最多5层
+    let deepLength = 0;
+    // 元素
+    let elm = '';
+    if (typeof target.innerText === 'string') {
+        ret.push(`(${target.innerText.substr(0, 50)})`);
     }
-    // 路由栈只需保留两个来作为源页面和当前页面
-    routerStack = routerStack.slice(-2);
-    return {
-        originPage: routerStack[0],
-        page: routerStack[1] || routerStack[0],
-    };
-}
-
-var version = "1.11.0";
-
-// 上报数据
-let Report = {
-    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: uuid.v4(),
-    sessionId: getSessionId(),
+    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 初始化上报数据并上报
+ * @description 处理html node
+ * @param e
  */
-function initReport() {
-    if (document.readyState === 'complete') {
-        initReportFunc();
+const normalTarget = function (target) {
+    let t, n, r, a, i;
+    const o = [];
+    if (!target || !target.tagName) {
+        return '';
     }
-    else {
-        // 注意：这里不要使用window.onload，因为一个项目window.onload只能用一次，如果这里用了就会影响宿主项目的功能
-        window.addEventListener('load', initReportFunc);
+    o.push(target.tagName.toLowerCase());
+    if (target.id) {
+        o.push('#'.concat(target.id));
     }
-}
-function initReportFunc() {
-    setRouteStack([location.href, location.href]);
-    setPVTime();
-    Report = Object.assign(Object.assign({}, getReport()), {
-        page: location.href,
-        originPage: location.href,
-        type: 'init',
-        perf: performance,
-        sessionId: getSessionId(),
-        lifeCycleId: uuid.v4(),
-    });
-    report(Report);
-}
+    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 设置Report的值
- * @param key Report key
- * @param value Report 值
+ * @description 序列化对象
+ * @param obj
  */
-function setReportValue(key, value) {
-    if (Object.prototype.hasOwnProperty.call(Report, key)) {
-        if (['pv', 'ua', 'error', 'request'].includes(key)) {
-            Report = Object.assign(Object.assign({}, Report), {
-                pv: null,
-                ua: null,
-                error: null,
-                req: null,
-                manualReport: undefined,
-                perf: null,
-            });
+function serialize(obj) {
+    const str = [];
+    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));
         }
-        Report[key] = value;
     }
+    return str.join('&');
 }
 /**
- * @description 获取上报数据
+ * @description 注册事件监听
+ * @param event 事件
+ * @param fn 回调方法
  */
-function getReport() {
-    const nav = getNavigator();
-    const viewport = getViewport();
-    const uuid = localStorage.getItem('username') || getUid();
-    return Object.assign(Object.assign(Object.assign({}, Report), nav), {
-        version,
-        projectID: Config.projectID,
-        host: location.host,
-        uuid,
-        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) {
-    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) {
-        // eslint-disable-next-line no-console
-        console.warn('realXHR.onerror, e', e);
-    };
-    return realXHR;
-}
+const on = function (event, fn) {
+    if (window.addEventListener) {
+        window.addEventListener(event, fn, true);
+    }
+    else {
+        window.attachEvent(`on${event}`, fn);
+    }
+};
 /**
- * 页面接口请求监控
+ * @description 移除事件监听
+ * @param event 事件
+ * @param fn 回调方法
  */
-const tempUrlInfo = {};
-const recordXMLHttpRequestLog = (XMLHttpRequestTimeout) => {
-    XMLHttpRequestTimeout = typeof XMLHttpRequestTimeout === 'number' ? XMLHttpRequestTimeout : 1000;
-    const timeRecordArray = [];
-    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 = [].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 ;
-                if (request.reason) {
-                    if (!tempUrlInfo[responseURL]) {
-                        tempUrlInfo[responseURL] = true;
-                        setTimeout(() => {
-                            delete tempUrlInfo[responseURL];
-                        }, 10);
-                        setReportValue('error', null);
-                        report(Object.assign(Object.assign({}, getReport()), {
-                            page: location.href,
-                            originPage: location.href,
-                            type: 'request',
-                            req: request,
-                        }));
-                    }
-                }
+const off = function (event, fn) {
+    if (window.removeEventListener) {
+        return window.removeEventListener(event, fn);
+    }
+    else {
+        return window.detachEvent(`on${event}`, fn);
+    }
+};
+const formatTrackElementXPath = (xPath) => {
+    const result = [];
+    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;
             }
-            // 当前请求成功后就在数组中移除掉
-            timeRecordArray.splice(i, 1);
+            else {
+                return false;
+            }
+        })) {
+            result.push(item);
         }
     });
+    return result.join('/');
 };
-const hackFetch = (XMLHttpRequestTimeout) => {
-    XMLHttpRequestTimeout = typeof XMLHttpRequestTimeout === 'number' ? XMLHttpRequestTimeout : 1000;
-    if (typeof window.fetch === 'function') {
-        const __fetch__ = window.fetch;
-        window.__fetch__ = __fetch__;
-        window.fetch = function (t, ...args) {
-            const begin = Date.now();
-            //禁用数组的扩展运算符,否则portal的生产环境会报Uncaught TypeError: Object(...) is not a function,
-            //编译后的__spreadArray函数有问题,而这个函数来自于tslib.具体报错原因不知.
-            //其他平台使用数组的扩展运算符没有问题,比如前端监控平台的管理界面
-            const params = [].concat(t).concat(args);
-            return __fetch__
-                .apply(window, params)
-                .then(function (res) {
-                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 === null || result === void 0 ? void 0 : result.slice(0, 500)}`;
+const formatElementXPath = (info) => {
+    var _a;
+    let elementXPathValue = '';
+    const elementXPath = info.elementXPath;
+    if (elementXPath) {
+        const xpathElement = document.evaluate(formatTrackElementXPath(elementXPath), document).iterateNext();
+        elementXPathValue = xpathElement ? (_a = (xpathElement.textContent || xpathElement.value)) === null || _a === void 0 ? void 0 : _a.trim() : '';
+    }
+    return {
+        elementXPath,
+        elementXPathValue,
+    };
+};
+let existTrackListenEvent = {};
+const elements = [];
+let timeout;
+const visualTrackFunc = () => {
+    if (Config.enableVisualTrack) {
+        if (timeout)
+            clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            timeout = null;
+            const url = location.href.split('?')[0];
+            axios__default["default"].get(`${Config.reportUrl.replace('/s/r', '')}/visual/get_data_list?url=${encodeURIComponent(url)}`).then((res) => {
+                var _a, _b;
+                const listData = (_b = (_a = res.data.result) === null || _a === void 0 ? void 0 : _a.result) === null || _b === void 0 ? void 0 : _b.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 = () => {
+                                        var _a;
+                                        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 ((_a = window.navigator) === null || _a === void 0 ? void 0 : _a.sendBeacon) === 'function') {
+                                            const formData = new FormData();
+                                            for (const i in payload) {
+                                                if (Object.prototype.hasOwnProperty.call(payload, i)) {
+                                                    const value = payload[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);
+                                    }
+                                }
+                            }
+                        });
                     }
-                    if (request.reason) {
-                        if (!tempUrlInfo[url]) {
-                            tempUrlInfo[url] = true;
-                            setTimeout(() => {
-                                delete tempUrlInfo[url];
-                            }, 10);
-                            setReportValue('error', null);
-                            report(Object.assign(Object.assign({}, getReport()), {
-                                page: location.href,
-                                originPage: location.href,
-                                type: 'request',
-                                req: request,
-                            }));
-                        }
+                    catch (err) {
+                        // eslint-disable-next-line no-console
+                        console.log('visual track evaluate err', err);
                     }
-                })
-                    .catch((err) => {
-                    // eslint-disable-next-line no-console
-                    console.log('hackFetch response.text() err', err);
+                }
+            });
+        }, 1000);
+    }
+};
+const visualReportEvent = (item) => {
+    var _a;
+    const { elementXPath, elementXPathValue } = formatElementXPath(item.trackNameInfo);
+    const visualTrackData = {
+        trackType: item.trackType,
+        trackName: elementXPath ? elementXPathValue : item.trackNameInfo.name,
+        params: (_a = item.params) === null || _a === void 0 ? void 0 : _a.map((child) => {
+            const { elementXPath, elementXPathValue } = formatElementXPath(child);
+            return {
+                name: child.name,
+                value: elementXPath ? elementXPathValue : child.value,
+            };
+        }),
+    };
+    setReportValue('type', 'visual');
+    setReportValue('vD', visualTrackData);
+    report(getReport());
+    setReportValue('vD', undefined);
+};
+const clickEventFunc = (e) => {
+    //@ts-ignore
+    const item = JSON.parse(e.target.getAttribute('visual-track-data-attr'));
+    visualReportEvent(item);
+};
+const initWindowObjectFunction = () => {
+    if (typeof window.manualReportTrackFunc === 'undefined') {
+        window.manualReportTrackFunc = (data) => {
+            if (Object.prototype.toString.call(data) !== '[object Object]') {
+                // eslint-disable-next-line no-console
+                console.warn('manualReportTrackFunc参数必须是一个对象！');
+            }
+            else {
+                setReportValue('type', 'manual');
+                setReportValue('manualReport', data);
+                report(getReport());
+                setReportValue('manualReport', undefined);
+            }
+        };
+    }
+    if (typeof window.getFullScreenShootFunc === 'undefined') {
+        //下载页面截图
+        window.getFullScreenShootFunc = (filename) => __awaiter(void 0, void 0, void 0, function* () {
+            const file = yield 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 = () => {
+            setReportValue('type', 'error');
+            setReportValue('error', {
+                subType: 'manual',
+                message: 'manual trigger',
+                events: getUserEvents(true),
+            });
+            report(getReport());
+        };
+    }
+};
+let prewHref = '';
+const handleLocationChange = (e) => {
+    const curHref = location.href;
+    // href中`？`后面的值改变，不触发后续动作
+    if (prewHref.split('?')[0] === curHref.split('?')[0]) {
+        return;
+    }
+    prewHref = curHref;
+    handleHistoryChange();
+    elements.forEach((element) => {
+        element === null || element === void 0 ? void 0 : element.removeEventListener('click', clickEventFunc);
+    });
+    //清空可视化埋点之前的数据
+    existTrackListenEvent = {};
+    elements.length = 0;
+    visualTrackFunc();
+};
+
+/** 上报数据映射 */
+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: {
+        /** 停留时间 */
+        stayTime: 'sT',
+    },
+    lag: {
+        /** 页面卡顿时间 */
+        lagTime: 'lT',
+    },
+    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',
+        /** 上报时带上的请求参数 */
+        requestData: 'rD',
+        /** 上报时带上的请求方法 */
+        method: 'rM',
+    },
+    vD: {
+        /** 埋点名称 */
+        trackName: 'tN',
+        /** 埋点参数 */
+        params: 'params',
+    },
+    manualReport: 'mR',
+    lifeCycleId: 'li',
+    sessionId: 'sI',
+};
+const xhrFunc = (filename, userId, asyncUpdateId, file, res, callback, rest) => {
+    const formData = new FormData();
+    for (const i in rest) {
+        if (Object.prototype.hasOwnProperty.call(rest, i)) {
+            formData.append(i, rest[i]);
+        }
+    }
+    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 () {
+        var _a;
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                try {
+                    const response = xhr.responseText;
+                    const resp = JSON.parse(response);
+                    callback((_a = resp.result) === null || _a === void 0 ? void 0 : _a.response);
+                }
+                catch (_err) {
+                }
+                res();
+            }
+            else {
+                res();
+            }
+        }
+    };
+    xhr.send(formData);
+};
+const ERROR_MESSAGE_MAP = {};
+function reportFunc(data) {
+    var _a, _b, _c;
+    const payload = convertToSchema(data, reportMap);
+    payload.time = new Date().getTime(); // 设置上报时间
+    let picturePromise = Promise.resolve();
+    let hasErrorEvent = false;
+    const filename = uuid.v4();
+    if (data.type === 'error') {
+        let message = ((_a = data.error) === null || _a === void 0 ? void 0 : _a.message) || 'default';
+        if (((_b = data.error) === null || _b === void 0 ? void 0 : _b.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 ((_c = data.error) === null || _c === void 0 ? void 0 : _c.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) => {
+                return new Promise((res) => {
+                    xhrFunc(file.name, data.uuid, filename, file, res, (result) => {
+                        payload.error.pic = result;
+                    }, { p, pid, host, bN, pt });
                 });
-                return res;
             })
                 .catch((err) => {
-                // eslint-disable-next-line no-console
-                console.log('hackFetch err', err);
+                payload.error.picError = (err === null || err === void 0 ? void 0 : err.stack) || (err === null || err === void 0 ? void 0 : err.toString());
             });
-        };
-    }
-};
-
-/**
- * @description 点击事件触发后的操作
- */
-function handleClick(event) {
-    const target = event.target;
-    if (target.nodeName === 'INPUT' || target.nodeName === 'TEXTAREA') {
-        return;
-    }
-    const path = getElmPath(target);
-    if (path) {
-        setReportValue('type', 'ua');
-        setReportValue('ua', {
-            subType: 'ui.click',
-            x: event.x,
-            y: event.y,
-            path,
-        });
-        report(getReport());
+        }
     }
+    return picturePromise
+        .then(() => {
+        var _a;
+        if ((_a = payload.error) === null || _a === void 0 ? void 0 : _a.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) => {
+        //
+    });
+}
+// 上报
+function report(data) {
+    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 点击触发失焦后的操作
+ * @description 将数据转换成最终提交的数据，主要目的是简化数据的key的长度，从而降低荷载大小
+ * @param data 要转换的数据
+ * @param map 要转换的数据的字段映射
+ * @param redundancyData 冗余数据
  */
-function handleBlur(event) {
-    const target = event.target;
-    if (target.nodeName !== 'INPUT' && target.nodeName !== 'TEXTAREA') {
-        return;
+function convertToSchema(data, map, redundancyData) {
+    const reportData = {};
+    if (redundancyData) {
+        map = Object.assign(Object.assign({}, map), redundancyData);
     }
-    const path = getElmPath(target);
-    if (path) {
-        setReportValue('type', 'ua');
-        setReportValue('ua', {
-            subType: 'ui.blur',
-            x: event.x,
-            y: event.y,
-            path,
-            value: target.value,
-        });
-        report(getReport());
+    for (const result of Object.entries(map)) {
+        const [key, mapKey] = result;
+        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], map[key]);
+                    }
+                }
+                else {
+                    reportData[key] = data[key];
+                }
+            }
+            else {
+                // 排除undefined
+                if (data[key] !== undefined) {
+                    reportData[mapKey] = data[key];
+                }
+            }
+        }
     }
-}
-/**
- * @description 滚动的操作
- */
-let timeout$1;
-function handleScroll(_event) {
-    clearTimeout(timeout$1);
-    timeout$1 = setTimeout(() => {
-        setReportValue('type', 'ua');
-        setReportValue('ua', {
-            subType: 'ui.scroll',
-        });
-        report(getReport());
-    }, 1000);
+    return reportData;
 }
 
-const parser = new uaParserJs.UAParser();
-/**
- * @description 获取uuid
- */
-function getUid() {
-    let uid = localStorage.getItem(monitorTrackId) || '';
-    if (!uid) {
-        uid = uuid.v4();
-        localStorage.setItem(monitorTrackId, uid);
-    }
-    return uid;
-}
+/** 路由栈数组，存储路由变化信息 */
+let routerStack = [];
+/** 路由触发的时间 */
+let time = 0;
 /**
- * @description 获取session id
+ * @description 派发pushState， replaceState 的监听
+ * @param type
  */
-function getSessionId() {
-    const sessionId = sessionStorage.getItem(monitorTrackSessionId);
-    if (sessionId) {
-        return sessionId;
-    }
-    else {
-        const id = uuid.v4();
-        sessionStorage.setItem(monitorTrackSessionId, id);
-        return id;
-    }
+function _history(type) {
+    const origin = history[type];
+    return function () {
+        // @ts-ignore
+        // eslint-disable-next-line prefer-rest-params
+        const r = origin.apply(this, arguments);
+        const e = new Event(type);
+        // @ts-ignore
+        // eslint-disable-next-line prefer-rest-params
+        e.arguments = arguments;
+        window.dispatchEvent(e);
+        return r;
+    };
 }
 /**
- * @description 获取浏览器信息
+ * @description 处理history变化
+ * @param e history事件
  */
-function getNavigator() {
-    var _a;
-    const uaResult = parser.getResult();
-    return {
-        language: navigator.language,
-        navigatorVendor: navigator.vendor,
-        connectionType: ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.connection) === null || _a === void 0 ? void 0 : _a.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 || '',
-    };
+function handleHistoryChange(__e) {
+    visualTrackFunc();
+    setReport({ type: 'pv' });
 }
 /**
- * @description 获取viewport的宽高
+ * 设置信息并触发上报
  */
-function getViewport() {
-    const w = document.documentElement.clientWidth || document.body.clientWidth;
-    const h = document.documentElement.clientHeight || document.body.clientHeight;
-    return `${w} x ${h}`;
+function setReport({ type, lagTime }) {
+    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 && type === 'pv') {
+        return;
+    }
+    const currentTime = new Date().getTime();
+    // 页面停留时间
+    const stayTime = currentTime - time;
+    // 设置触发路由变化的时间
+    time = currentTime;
+    // 设置信息
+    setReportValue('originPage', originPage);
+    setReportValue('page', page);
+    if (type === 'pv') {
+        setReportValue('type', 'pv');
+        setReportValue('pv', { stayTime });
+    }
+    else if (type === 'lag') {
+        setReportValue('type', 'lag');
+        setReportValue('lag', { lagTime: lagTime });
+    }
+    // 上报数据
+    report(getReport());
+}
+function setPVTime() {
+    time = new Date().getTime();
 }
 /**
- * @description 获取元素路径，最多保留5层
- * @param e
+ * @description 添加路由栈信息
+ * @param page 页面信息
  */
-const getElmPath = function (target) {
-    if (!target || target.nodeType !== 1) {
-        return '';
-    }
-    const ret = [];
-    // 层数，最多5层
-    let deepLength = 0;
-    // 元素
-    let elm = '';
-    if (typeof target.innerText === 'string') {
-        ret.push(`(${target.innerText.substr(0, 50)})`);
+function setRouteStack(page) {
+    if (typeof page === 'string') {
+        routerStack.push(page);
     }
-    for (let t = target || null; t && deepLength++ < 5 && !((elm = normalTarget(t)) === 'html');) {
-        // eslint-disable-next-line no-sequences
-        ret.push(elm), (t = t.parentNode);
+    else {
+        routerStack = routerStack.concat(page);
     }
-    return ret.reverse().join(' > ');
+    // 路由栈只需保留两个来作为源页面和当前页面
+    routerStack = routerStack.slice(-2);
+    return {
+        originPage: routerStack[0],
+        page: routerStack[1] || routerStack[0],
+    };
+}
+function handlePageLag(lagTime) {
+    // console.log('检测到页面卡顿', lagTime);
+    setReport({ type: 'lag', lagTime });
+}
+
+// 上报数据
+let Report = {
+    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,
+    lag: null,
+    ua: null,
+    error: null,
+    req: null,
+    dpr: 1,
+    perf: null,
+    vD: undefined,
+    manualReport: undefined,
+    lifeCycleId: uuid.v4(),
+    sessionId: getSessionId(),
 };
 /**
- * @description 处理html node
- * @param e
+ * @description 初始化上报数据并上报
  */
-const normalTarget = function (target) {
-    let t, n, r, a, i;
-    const o = [];
-    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]));
-        }
+function initReport() {
+    if (document.readyState === 'complete') {
+        initReportFunc();
     }
-    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, '"]'));
-        }
+    else {
+        // 注意：这里不要使用window.onload，因为一个项目window.onload只能用一次，如果这里用了就会影响宿主项目的功能
+        window.addEventListener('load', initReportFunc);
     }
-    return o.join('');
-};
+}
+function initReportFunc() {
+    setRouteStack([location.href, location.href]);
+    setPVTime();
+    Report = Object.assign(Object.assign({}, getReport()), {
+        page: location.href,
+        originPage: location.href,
+        type: 'init',
+        perf: performance,
+        sessionId: getSessionId(),
+        lifeCycleId: uuid.v4(),
+    });
+    report(Report);
+}
 /**
- * @description 序列化对象
- * @param obj
+ * @description 设置Report的值
+ * @param key Report key
+ * @param value Report 值
  */
-function serialize(obj) {
-    const str = [];
-    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));
+function setReportValue(key, value) {
+    if (Object.prototype.hasOwnProperty.call(Report, key)) {
+        if (['pv', 'ua', 'error', 'request', 'lag'].includes(key)) {
+            Report = Object.assign(Object.assign({}, Report), {
+                pv: null,
+                lag: null,
+                ua: null,
+                error: null,
+                req: null,
+                manualReport: undefined,
+                perf: null,
+            });
         }
+        Report[key] = value;
     }
-    return str.join('&');
 }
 /**
- * @description 注册事件监听
- * @param event 事件
- * @param fn 回调方法
+ * @description 获取上报数据
  */
-const on = function (event, fn) {
-    if (window.addEventListener) {
-        window.addEventListener(event, fn, true);
-    }
-    else {
-        window.attachEvent(`on${event}`, fn);
-    }
-};
+function getReport() {
+    const nav = getNavigator();
+    const viewport = getViewport();
+    const uuid = localStorage.getItem('username') || getUid();
+    return Object.assign(Object.assign(Object.assign({}, Report), nav), {
+        version,
+        projectID: Config.projectID,
+        host: location.host,
+        uuid,
+        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) {
+    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) {
+        // eslint-disable-next-line no-console
+        console.warn('realXHR.onerror, e', e);
+    };
+    return realXHR;
+}
 /**
- * @description 移除事件监听
- * @param event 事件
- * @param fn 回调方法
+ * 页面接口请求监控
  */
-const off = function (event, fn) {
-    if (window.removeEventListener) {
-        return window.removeEventListener(event, fn);
-    }
-    else {
-        return window.detachEvent(`on${event}`, fn);
-    }
-};
-const formatTrackElementXPath = (xPath) => {
-    const result = [];
-    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;
+const tempUrlInfo = {};
+const recordXMLHttpRequestLog = (XMLHttpRequestTimeout) => {
+    XMLHttpRequestTimeout = typeof XMLHttpRequestTimeout === 'number' ? XMLHttpRequestTimeout : 1000;
+    const timeRecordArray = [];
+    //@ts-ignore
+    window.__XMLHttpRequest__ = window.XMLHttpRequest;
+    //@ts-ignore
+    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 = [].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: '',
+                    requestData: '',
+                    method: '',
+                };
+                if (loadTime && loadTime > XMLHttpRequestTimeout) {
+                    request.reason = 'slow';
+                    request.detail = `request is too slow, XMLHttpRequestTimeout: ${loadTime}`;
+                }
+                else if (status && status >= 300 && statusText && statusText.toLowerCase() !== 'ok') {
+                    request.reason = 'failed';
+                    request.detail = `request is failed, status: ${status}, statusText: ${statusText}`;
+                }
+                else ;
+                if (request.reason) {
+                    if (!tempUrlInfo[responseURL]) {
+                        tempUrlInfo[responseURL] = true;
+                        setTimeout(() => {
+                            delete tempUrlInfo[responseURL];
+                        }, 10);
+                        setReportValue('error', null);
+                        report(Object.assign(Object.assign({}, getReport()), {
+                            page: location.href,
+                            originPage: location.href,
+                            type: 'request',
+                            req: request,
+                        }));
+                    }
+                }
             }
-        })) {
-            result.push(item);
+            // 当前请求成功后就在数组中移除掉
+            timeRecordArray.splice(i, 1);
         }
     });
-    return result.join('/');
-};
-const formatElementXPath = (info) => {
-    var _a;
-    let elementXPathValue = '';
-    const elementXPath = info.elementXPath;
-    if (elementXPath) {
-        const xpathElement = document.evaluate(formatTrackElementXPath(elementXPath), document).iterateNext();
-        elementXPathValue = xpathElement ? (_a = (xpathElement.textContent || xpathElement.value)) === null || _a === void 0 ? void 0 : _a.trim() : '';
-    }
-    return {
-        elementXPath,
-        elementXPathValue,
-    };
 };
-let existTrackListenEvent = {};
-const elements = [];
-let timeout;
-const visualTrackFunc = () => {
-    if (Config.enableVisualTrack) {
-        if (timeout)
-            clearTimeout(timeout);
-        timeout = setTimeout(() => {
-            timeout = null;
-            const url = location.href.split('?')[0];
-            axios__default["default"]
-                .get(`${Config.reportUrl.replace('/s/r', '')}/visual/get_data_list?url=${encodeURIComponent(url)}`)
-                .then((res) => {
-                var _a, _b;
-                const listData = (_b = (_a = res.data.result) === null || _a === void 0 ? void 0 : _a.result) === null || _b === void 0 ? void 0 : _b.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 = () => {
-                                        var _a;
-                                        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 ((_a = window.navigator) === null || _a === void 0 ? void 0 : _a.sendBeacon) === 'function') {
-                                            const formData = new FormData();
-                                            for (const i in payload) {
-                                                if (Object.prototype.hasOwnProperty.call(payload, i)) {
-                                                    const value = payload[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);
+const hackFetch = (XMLHttpRequestTimeout) => {
+    XMLHttpRequestTimeout = typeof XMLHttpRequestTimeout === 'number' ? XMLHttpRequestTimeout : 1000;
+    if (typeof window.fetch === 'function') {
+        const __fetch__ = window.fetch;
+        window.__fetch__ = __fetch__;
+        //@ts-ignore
+        window.fetch = function (t, ...args) {
+            const begin = Date.now();
+            //禁用数组的扩展运算符,否则portal的生产环境会报Uncaught TypeError: Object(...) is not a function,
+            //编译后的__spreadArray函数有问题,而这个函数来自于tslib.具体报错原因不知.
+            //其他平台使用数组的扩展运算符没有问题,比如前端监控平台的管理界面
+            const params = [].concat(t).concat(args);
+            return __fetch__
+                .apply(window, params)
+                .then(function (res) {
+                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;
                     }
                 }
-            });
-        }, 1000);
-    }
-};
-const visualReportEvent = (item) => {
-    var _a;
-    const { elementXPath, elementXPathValue } = formatElementXPath(item.trackNameInfo);
-    const visualTrackData = {
-        trackType: item.trackType,
-        trackName: elementXPath ? elementXPathValue : item.trackNameInfo.name,
-        params: (_a = item.params) === null || _a === void 0 ? void 0 : _a.map((child) => {
-            const { elementXPath, elementXPathValue } = formatElementXPath(child);
-            return {
-                name: child.name,
-                value: elementXPath ? elementXPathValue : child.value,
-            };
-        }),
-    };
-    setReportValue('type', 'visual');
-    setReportValue('vD', visualTrackData);
-    report(getReport());
-    setReportValue('vD', undefined);
-};
-const clickEventFunc = (e) => {
-    //@ts-ignore
-    const item = JSON.parse(e.target.getAttribute('visual-track-data-attr'));
-    visualReportEvent(item);
-};
-const initWindowObjectFunction = () => {
-    if (typeof window.manualReportTrackFunc === 'undefined') {
-        window.manualReportTrackFunc = (data) => {
-            if (Object.prototype.toString.call(data) !== '[object Object]') {
+                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: '',
+                        requestData: '',
+                        method: '',
+                    };
+                    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: ${loadTime}, result: ${result === null || result === void 0 ? void 0 : result.slice(0, 500)}`;
+                    }
+                    if (request.reason) {
+                        if (!tempUrlInfo[url]) {
+                            tempUrlInfo[url] = true;
+                            setTimeout(() => {
+                                delete tempUrlInfo[url];
+                            }, 10);
+                            setReportValue('error', null);
+                            report(Object.assign(Object.assign({}, getReport()), {
+                                page: location.href,
+                                originPage: location.href,
+                                type: 'request',
+                                req: request,
+                            }));
+                        }
+                    }
+                })
+                    .catch((err) => {
+                    // eslint-disable-next-line no-console
+                    console.log('hackFetch response.text() err', err);
+                });
+                return res;
+            })
+                .catch((err) => {
                 // eslint-disable-next-line no-console
-                console.warn('manualReportTrackFunc参数必须是一个对象！');
-            }
-            else {
-                setReportValue('type', 'manual');
-                setReportValue('manualReport', data);
-                report(getReport());
-                setReportValue('manualReport', undefined);
-            }
-        };
-    }
-    if (typeof window.getFullScreenShootFunc === 'undefined') {
-        //下载页面截图
-        window.getFullScreenShootFunc = (filename) => __awaiter(void 0, void 0, void 0, function* () {
-            const file = yield 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 = () => {
-            setReportValue('type', 'error');
-            setReportValue('error', {
-                subType: 'manual',
-                message: 'manual trigger',
-                events: getUserEvents(true),
+                console.log('hackFetch err', err);
             });
-            report(getReport());
         };
     }
-};
-let prewHref = '';
-const handleLocationChange = (e) => {
-    const curHref = location.href;
-    // href中`？`后面的值改变，不触发后续动作
-    if (prewHref.split('?')[0] === curHref.split('?')[0]) {
-        return;
-    }
-    prewHref = curHref;
-    handleHistoryChange();
-    elements.forEach((element) => {
-        element === null || element === void 0 ? void 0 : element.removeEventListener('click', clickEventFunc);
-    });
-    //清空可视化埋点之前的数据
-    existTrackListenEvent = {};
-    elements.length = 0;
-    visualTrackFunc();
 };
 
 class Track {
     constructor() {
+        this.lagTimer = null;
+        this.observer = null;
         this.visualTrack = () => {
             window.onload = () => {
                 visualTrackFunc();
             };
         };
+        this.listenPageLag = () => {
+            this.observer = new PerformanceObserver((list) => {
+                list.getEntries().forEach((entry) => {
+                    if (entry.duration > 400) {
+                        handlePageLag(entry.duration);
+                    }
+                });
+            });
+            this.observer.observe({ entryTypes: ['longtask'] });
+        };
     }
     init(config) {
         var _a;
@@ -1376,7 +1414,7 @@ class Track {
         // 没有项目ID，则不监听任何事件
         if (!config.projectID) {
             // eslint-disable-next-line no-console
-            console.warn('缺少项目ID或token!');
+            console.warn('缺少项目ID或projectID!');
             return;
         }
         // 没有reportUrl
@@ -1396,6 +1434,7 @@ class Track {
         Config.enableBehavior && this.addListenUserActivity();
         Config.enableError && this.addListenJSUncaught();
         this.visualTrack();
+        this.listenPageLag();
         this.addListenUnload();
         initWindowObjectFunction();
     }
@@ -1447,6 +1486,7 @@ class Track {
      * @description 销毁监听器
      */
     destroy() {
+        var _a;
         if (Config.spa) {
             // off('hashchange', pv.handleHashChange);
             off('pushState', handleHistoryChange);
@@ -1461,6 +1501,8 @@ class Track {
         if (Config.enableError) {
             off('error', handleError);
         }
+        this.lagTimer && clearInterval(this.lagTimer);
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
         sessionStorage.removeItem(monitorTrackSessionId);
     }
 }