JS 前端日志收集系统 - 用户行为跟踪与异常上报的完整方案

PerformanceObserver

performance.timing

window.onerror

window.addEventListener('unhandledrejection')

XMLHttpRequest

fetch

navigator.sendBeacon

fetch

XMLHttpRequest

document.addEventListener('click', handler, true)

handler

event.target

data-*

data-log-id

data-track-event

document.addEventListener('click', (e) => {
    let target = e.target;
    // 向上冒泡查找具有特定日志属性的父元素
    while (target && target !== document.body) {
        if (target.dataset.logId) {
            // 找到需要记录的元素
            const logData = {
                type: 'click',
                elementId: target.dataset.logId,
                elementText: target.innerText.substring(0, 50), // 截取部分文本，避免过长
                // ... 其他上下文信息，如页面URL，时间戳
            };
            // 假设 LogSender 是你的日志发送模块
            LogSender.add(logData);
            break;
        }
        target = target.parentNode;
    }
}, true); // 使用捕获阶段

window.onload

window.onbeforeunload

history.pushState

history.replaceState

// 简单的history劫持示例
(function(history){
    const pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        // 触发自定义事件
        const event = new Event('pushstate');
        event.state = state;
        window.dispatchEvent(event);
        return pushState.apply(history, arguments);
    };
})(window.history);

window.addEventListener('pushstate', (e) => {
    // 记录新的页面访问
    const logData = {
        type: 'page_view',
        url: window.location.href,
        // ... 其他信息
    };
    LogSender.add(logData);
});
// 首次加载也需要记录
window.addEventListener('load', () => {
    const logData = {
        type: 'page_view',
        url: window.location.href,
        // ...
    };
    LogSender.add(logData);
});

focus

blur

change

window.onerror

try...catch

Script error.

crossorigin="anonymous"

catch

window.addEventListener('unhandledrejection', event => { /* 处理 event.reason */ });

window.addEventListener('error', handler, true)

event.target

XMLHttpRequest

fetch

// 劫持 XMLHttpRequest 示例
const originalXHRopen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
    this._url = url; // 保存请求URL
    return originalXHRopen.apply(this, arguments);
};
const originalXHRsend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
    this.addEventListener('loadend', () => {
        if (this.status >= 400 || this.status === 0) { // 捕获HTTP错误或网络错误
            const errorLog = {
                type: 'api_error',
                url: this._url,
                status: this.status,
                responseText: this.responseText.substring(0, 200),
                // ...其他上下文
            };
            LogSender.add(errorLog);
        }
    });
    return originalXHRsend.apply(this, arguments);
};

PerformanceObserver

// 收集LCP的示例
const lcpObserver = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        const lcpData = {
            type: 'performance_lcp',
            value: entry.startTime, // 或 entry.renderTime
            element: entry.element ? entry.element.tagName : 'N/A',
            url: window.location.href,
            // ...
        };
        LogSender.add(lcpData);
    }
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

// 收集CLS的示例
const clsObserver = new PerformanceObserver((entryList) => {
    let cls = 0;
    for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) { // 排除用户输入导致的布局偏移
            cls += entry.value;
        }
    }
    if (cls > 0) {
        LogSender.add({
            type: 'performance_cls',
            value: cls,
            url: window.location.href,
        });
    }
});
clsObserver.observe({ type: 'layout-shift', buffered: true });

performance.getEntriesByType('navigation')

performance.getEntriesByType('resource')

fetch

XMLHttpRequest

navigator.sendBeacon

// 使用 navigator.sendBeacon 发送日志
function sendLogWithBeacon(logData) {
    const blob = new Blob([JSON.stringify(logData)], { type: 'application/json' });
    navigator.sendBeacon('/api/log/collect', blob);
}

// 页面卸载时发送关键日志
window.addEventListener('beforeunload', () => {
    const finalLogs = LogSender.getBufferedLogs(); // 获取缓存中剩余的日志
    if (finalLogs.length > 0) {
        sendLogWithBeacon({ logs: finalLogs, sessionEnd: true });
    }
});

// 简单的日志缓存与批量发送机制
const logBuffer = [];
let timer = null;
const BATCH_SIZE = 50;
const BATCH_INTERVAL = 5000; // 5秒

function addLog(log) {