怎么利用JavaScript进行前端监控？

window.onerror = function(message, source, lineno, colno, error) {
    console.error('捕获到JS运行时错误:', { message, source, lineno, colno, error });
    // 在这里将错误信息上报到你的监控服务
    // reportErrorToService({
    //     type: 'js_runtime_error',
    //     message: message,
    //     stack: error ? error.stack : 'No stack trace available',
    //     url: source,
    //     line: lineno,
    //     column: colno,
    //     userAgent: navigator.userAgent
    // });
    return true; // 返回true可以阻止浏览器默认的错误处理，如控制台输出
};

window.addEventListener('unhandledrejection', function(event) {
    console.error('捕获到Promise未处理的拒绝:', event.reason);
    // event.reason就是Promise被拒绝的原因，通常是一个Error对象
    // reportErrorToService({
    //     type: 'promise_rejection',
    //     message: event.reason ? event.reason.message : 'Unknown Promise rejection',
    //     stack: event.reason && event.reason.stack ? event.reason.stack : 'No stack trace available',
    //     userAgent: navigator.userAgent
    // });
});

window.addEventListener('error', function(event) {
    // 检查event.target是否是HTML元素，并且有src或href属性
    if (event.target && (event.target.src || event.target.href)) {
        console.error('捕获到资源加载错误:', event.target.tagName, event.target.src || event.target.href);
        // reportErrorToService({
        //     type: 'resource_load_error',
        //     tagName: event.target.tagName,
        //     src: event.target.src || event.target.href,
        //     outerHTML: event.target.outerHTML,
        //     userAgent: navigator.userAgent
        // });
    }
}, true); // 注意：第三个参数为true，表示在捕获阶段处理事件

function reportErrorToService(errorData) {
    const payload = {
        timestamp: new Date().toISOString(),
        ...errorData,
        // 更多上下文信息
        pageUrl: window.location.href,
        userAgent: navigator.userAgent,
        // 可以加上当前用户的行为轨迹
        // userActions: getUserActions() 
    };

    // 使用sendBeacon，即使页面关闭也能发送数据
    if (navigator.sendBeacon) {
        navigator.sendBeacon('/api/monitor/error', JSON.stringify(payload));
    } else {
        // 兼容性处理
        fetch('/api/monitor/error', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
            keepalive: true // 尝试在页面卸载时保持请求
        }).catch(err => console.warn('错误上报失败:', err));
    }
}

window.addEventListener('load', function() {
    setTimeout(() => { // 确保所有性能数据都已记录
        const performance = window.performance;
        if (!performance || !performance.timing) return;

        const timing = performance.timing;
        const navigationStart = timing.navigationStart;

        const whiteScreenTime = timing.responseStart - navigationStart; // 从请求发出到收到第一个字节
        const domReadyTime = timing.domContentLoadedEventEnd - navigationStart; // DOM加载完成
        const loadTime = timing.loadEventEnd - navigationStart; // 页面完全加载

        console.log('白屏时间:', whiteScreenTime, 'ms');
        console.log('DOM Ready时间:', domReadyTime, 'ms');
        console.log('页面完全加载时间:', loadTime, 'ms');

        // 上报数据
        // reportPerformanceData({
        //     whiteScreenTime,
        //     domReadyTime,
        //     loadTime
        // });
    }, 0);
});

// 观察LCP（Largest Contentful Paint）
if (PerformanceObserver) {
    const lcpObserver = new PerformanceObserver((entryList) => {
        const entries = entryList.getEntries();
        const lastEntry = entries[entries.length - 1]; // 最后一个就是最终的LCP
        console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime, 'ms');
        // reportPerformanceData({ lcp: lastEntry.renderTime || lastEntry.loadTime });
    });
    lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

    // 观察FID（First Input Delay）
    const fidObserver = new PerformanceObserver((entryList) => {
        const entries = entryList.getEntries();
        const lastEntry = entries[entries.length - 1];
        console.log('FID:', lastEntry.duration, 'ms');
        // reportPerformanceData({ fid: lastEntry.duration });
    });
    fidObserver.observe({ type: 'first-input-delay', buffered: true });

    // 观察CLS（Cumulative Layout Shift）
    let cls = 0;
    const clsObserver = new PerformanceObserver((entryList) => {
        for (const entry of entryList.getEntries()) {
            if (!entry.hadRecentInput) { // 排除用户交互引起的布局偏移
                cls += entry.value;
            }
        }
        console.log('CLS:', cls);
        // 可以在页面卸载时上报最终的CLS值
    });
    clsObserver.observe({ type: 'layout-shift', buffered: true });
}

// 在页面加载完成后获取资源性能数据
window.addEventListener('load', function() {
    setTimeout(() => {
        const resources = performance.getEntriesByType('resource');
        resources.forEach(resource => {
            // 过滤掉一些不重要的资源，或者只关注加载时间长的
            if (resource.duration > 100 && resource.initiatorType !== 'xmlhttprequest') {
                console.log(`资源: ${resource.name}, 类型: ${resource.initiatorType}, 加载时间: ${resource.duration}ms`);
                // reportResourcePerformance({
                //     name: resource.name,
                //     type: resource.initiatorType,
                //     duration: resource.duration,
                //     transferSize: resource.transferSize
                // });
            }
        });
    }, 0);
});

if (PerformanceObserver) {
    const longTaskObserver = new PerformanceObserver((entryList) => {
        for (const entry of entryList.getEntries()) {
            console.warn('捕获到长任务:', entry.name, '持续时间:', entry.duration, 'ms');
            // reportLongTask({
            //     name: entry.name,
            //     duration: entry.duration,
            //     startTime: entry.startTime,
            //     // 可以尝试获取长任务发生时的堆栈信息，但这比较复杂，通常需要额外工具
            // });
        }
    });
    longTaskObserver.observe({ type: 'longtask', buffered: true });
}