monitor-track 1.10.0

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

@@ -0,0 +1,45 @@
+import { INavigator } from '../types';
+/**
+ * @description 获取uuid
+ */
+export declare function getUid(): string;
+/**
+ * @description 获取session id
+ */
+export declare function getSessionId(): string;
+/**
+ * @description 获取浏览器信息
+ */
+export declare function getNavigator(): INavigator;
+/**
+ * @description 获取viewport的宽高
+ */
+export declare function getViewport(): string;
+/**
+ * @description 获取元素路径，最多保留5层
+ * @param e
+ */
+export declare const getElmPath: (target: any) => string;
+/**
+ * @description 序列化对象
+ * @param obj
+ */
+export declare function serialize(obj: {
+    [key: string]: any;
+}): string;
+/**
+ * @description 注册事件监听
+ * @param event 事件
+ * @param fn 回调方法
+ */
+export declare const on: (event: string, fn: (e: Event) => void) => void;
+/**
+ * @description 移除事件监听
+ * @param event 事件
+ * @param fn 回调方法
+ */
+export declare const off: (event: any, fn: (e: Event) => void) => any;
+export declare const visualTrackFunc: () => void;
+export declare const initWindowObjectFunction: () => void;
+export declare const handleLocationChange: (e: Event) => void;
+export declare function debounce(fn: Function): (...arg: unknown[]) => void;

package/dist/esm/utils/index.js

@@ -0,0 +1,354 @@
+import { __awaiter } from '../_virtual/_tslib.js';
+import axios from 'axios';
+import { v4 } from 'uuid';
+import { UAParser } from 'ua-parser-js';
+import { shuyunTrackSessionId, shuyunTrackId } from '../constant.js';
+import { setReportValue, getReport } from '../config/global.js';
+import { report } from '../reporter.js';
+import { Config } from '../config/index.js';
+import { version } from '../package.json.js';
+import { getUserEvents, getFullScreenShoot } from '../handlers/error.js';
+import { handleHistoryChange } from '../handlers/pv.js';
+
+const parser = new UAParser();
+/**
+ * @description 获取uuid
+ */
+function getUid() {
+    let uid = localStorage.getItem(shuyunTrackId) || '';
+    if (!uid) {
+        uid = v4();
+        localStorage.setItem(shuyunTrackId, uid);
+    }
+    return uid;
+}
+/**
+ * @description 获取session id
+ */
+function getSessionId() {
+    const sessionId = sessionStorage.getItem(shuyunTrackSessionId);
+    if (sessionId) {
+        return sessionId;
+    }
+    else {
+        const id = v4();
+        sessionStorage.setItem(shuyunTrackSessionId, id);
+        return id;
+    }
+}
+/**
+ * @description 获取浏览器信息
+ */
+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 || '',
+    };
+}
+/**
+ * @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 获取元素路径，最多保留5层
+ * @param e
+ */
+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)})`);
+    }
+    for (let t = target || null; t && deepLength++ < 5 && !((elm = normalTarget(t)) === 'html');) {
+        // eslint-disable-next-line no-sequences
+        ret.push(elm), (t = t.parentNode);
+    }
+    return ret.reverse().join(' > ');
+};
+/**
+ * @description 处理html node
+ * @param e
+ */
+const normalTarget = function (target) {
+    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]));
+        }
+    }
+    const s = ['type', 'name', 'title', 'alt'];
+    for (i = 0; i < s.length; i++) {
+        r = s[i];
+        if ((a = target.getAttribute(r))) {
+            o.push('['.concat(r, '="').concat(a, '"]'));
+        }
+    }
+    return o.join('');
+};
+/**
+ * @description 序列化对象
+ * @param obj
+ */
+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));
+        }
+    }
+    return str.join('&');
+}
+/**
+ * @description 注册事件监听
+ * @param event 事件
+ * @param fn 回调方法
+ */
+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 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;
+            }
+        })) {
+            result.push(item);
+        }
+    });
+    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
+                .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);
+                    }
+                }
+            });
+        }, 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();
+};
+
+export { getElmPath, getNavigator, getSessionId, getUid, getViewport, handleLocationChange, initWindowObjectFunction, off, on, serialize, visualTrackFunc };