monitor-track 1.10.0

package/dist/esm/config/global.js

@@ -0,0 +1,271 @@
+import { v4 } from 'uuid';
+import { report } from '../reporter.js';
+import { getSessionId, getNavigator, getViewport, getUid } from '../utils/index.js';
+import { setRouteStack, setPVTime } from '../handlers/pv.js';
+import { Config } from './index.js';
+import { version } from '../package.json.js';
+
+/*
+ * @Author: Mark.Zhang
+ * @Date: 2020-10-26 15:40:16
+ * @Description 全局配置项
+ */
+// 上报数据
+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: v4(),
+    sessionId: getSessionId(),
+};
+/**
+ * @description 初始化上报数据并上报
+ */
+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 = Object.assign(Object.assign({}, getReport()), {
+        page: location.href,
+        originPage: location.href,
+        type: 'init',
+        perf: performance,
+        sessionId: getSessionId(),
+        lifeCycleId: v4(),
+    });
+    report(Report);
+}
+/**
+ * @description 设置Report的值
+ * @param key Report key
+ * @param value Report 值
+ */
+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,
+            });
+        }
+        Report[key] = value;
+    }
+}
+/**
+ * @description 获取上报数据
+ */
+function getReport() {
+    const nav = getNavigator();
+    const viewport = getViewport();
+    return Object.assign(Object.assign(Object.assign({}, 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) {
+    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 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,
+                        }));
+                    }
+                }
+            }
+            // 当前请求成功后就在数组中移除掉
+            timeRecordArray.splice(i, 1);
+        }
+    });
+};
+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)}`;
+                    }
+                    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.log('hackFetch err', err);
+            });
+        };
+    }
+};
+
+export { getReport, hackFetch, initReport, recordXMLHttpRequestLog, setReportValue };

package/dist/esm/config/index.d.ts

@@ -0,0 +1,33 @@
+import { IConfig } from '../types/config';
+/**  */
+/**
+ * @description config配置项默认值
+ */
+export declare const Config: IConfig;
+/**
+ * @description 设置config配置项
+ * @param config 配置项
+ */
+export declare function setConfig(config: IConfig): void;
+/**
+ * @description 设置config配置项
+ * @param config 配置项
+ */
+export declare function setConfigValue<T extends IConfig, K extends keyof T>(key: K, value: T[K]): void;
+/**
+ * @description 获取通过key值获取配置项value
+ * @param key
+ * @returns value的值
+ */
+export declare function getConfigValue(key: keyof IConfig): string | number | boolean | {
+    urls?: string[] | undefined;
+    errors?: (string | {
+        regExp: boolean;
+        /**
+         * @description 设置config配置项
+         * @param config 配置项
+         */
+        input: string;
+    })[] | undefined;
+    apis?: string[] | undefined;
+} | undefined;

package/dist/esm/config/index.js

@@ -0,0 +1,32 @@
+/*
+ * @Author: Mark.Zhang
+ * @Description 配置项相关参数及方法
+ */
+/**  */
+/**
+ * @description config配置项默认值
+ */
+const Config = {
+    reportUrl: '',
+    projectID: '',
+    maxLength: 1000,
+    spa: false,
+    hash: false,
+    enableBehavior: true,
+    enableError: true,
+    enableVisualTrack: false,
+    ignore: {
+        urls: [],
+        errors: [],
+        apis: [],
+    },
+};
+/**
+ * @description 设置config配置项
+ * @param config 配置项
+ */
+function setConfig(config) {
+    Object.assign(Config, config);
+}
+
+export { Config, setConfig };

package/dist/esm/constant.d.ts

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

package/dist/esm/constant.js

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

package/dist/esm/handlers/error.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @description 错误事件触发后的操作
+ */
+export declare function handleError(event: ErrorEvent | Event | PromiseRejectionEvent): void;
+/**
+ * @description 设置错误信息
+ */
+export declare function setCaughtError(event: ErrorEvent): void;
+/**
+ * @description 设置异步错误信息
+ */
+export declare function setPromiseError(event: PromiseRejectionEvent): void;
+/**
+ * @description 设置资源错误信息
+ */
+export declare function setResourceError(event: Event): void;
+/**
+ * 忽略的error
+ * @param errorMsg 错误信息
+ */
+export declare function ignoreError(errorMsg: string): boolean;
+export declare function getUserEvents(notUseCache: boolean): string | undefined;
+export declare function getFullScreenShoot(filename: string | undefined): Promise<File>;

package/dist/esm/handlers/error.js

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

package/dist/esm/handlers/index.d.ts

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

package/dist/esm/handlers/pv.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @description 派发pushState， replaceState 的监听
+ * @param type
+ */
+export declare function _history(type: 'pushState' | 'replaceState'): () => void;
+/**
+ * @description 处理hash变化
+ * @param e hash事件
+ */
+export declare function handleHashChange(__e: Event): void;
+/**
+ * @description 处理history变化
+ * @param e history事件
+ */
+export declare function handleHistoryChange(__e: Event): void;
+export declare function setPVTime(): void;
+/**
+ * @description 添加路由栈信息
+ * @param page 页面信息
+ */
+export declare function setRouteStack(page: string | string[]): {
+    originPage: string;
+    page: string;
+};

package/dist/esm/handlers/pv.js

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

package/dist/esm/handlers/user-activity.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description 点击事件触发后的操作
+ */
+export declare function handleClick(event: Event): void;
+/**
+ * @description 点击触发失焦后的操作
+ */
+export declare function handleBlur(event: Event): void;
+export declare function handleScroll(_event: Event): void;