怎么利用JavaScript进行前端日志记录？

// 简单的日志封装和上报示例
class Logger {
    constructor(config) {
        this.config = {
            url: '/api/log', // 日志上报接口
            maxBatchSize: 10,
            batchInterval: 5000, // 5秒发送一次
            ...config
        };
        this.logs = [];
        this.timer = null;
        this.init();
    }

    init() {
        // 捕获全局错误
        window.onerror = (message, source, lineno, colno, error) => {
            this.error({
                message: message,
                source: source,
                lineno: lineno,
                colno: colno,
                stack: error ? error.stack : 'No stack trace available'
            });
            return true; // 阻止默认的错误处理
        };

        // 捕获未处理的Promise拒绝
        window.addEventListener('unhandledrejection', event => {
            this.error({
                message: `Unhandled Promise Rejection: ${event.reason}`,
                stack: event.reason instanceof Error ? event.reason.stack : 'No stack trace available'
            });
        });

        this.startBatchTimer();
    }

    startBatchTimer() {
        if (this.timer) clearInterval(this.timer);
        this.timer = setInterval(() => {
            if (this.logs.length > 0) {
                this.sendLogs();
            }
        }, this.config.batchInterval);
    }

    log(level, data) {
        const logEntry = {
            timestamp: new Date().toISOString(),
            level: level,
            url: window.location.href,
            userAgent: navigator.userAgent,
            ...data
        };

        if (process.env.NODE_ENV === 'development' || level === 'DEBUG') { // 开发环境或DEBUG级别才输出到控制台
            console[level.toLowerCase()]?.(logEntry);
        }

        this.logs.push(logEntry);
        if (this.logs.length >= this.config.maxBatchSize) {
            this.sendLogs();
        }
    }

    info(data) { this.log('INFO', data); }
    warn(data) { this.log('WARN', data); }
    error(data) { this.log('ERROR', data); }
    debug(data) { this.log('DEBUG', data); }

    sendLogs() {
        if (this.logs.length === 0) return;

        const logsToSend = [...this.logs];
        this.logs = []; // 清空待发送队列

        // 优先使用sendBeacon，在页面卸载时更可靠
        if (navigator.sendBeacon) {
            const blob = new Blob([JSON.stringify(logsToSend)], { type: 'application/json' });
            navigator.sendBeacon(this.config.url, blob);
        } else {
            fetch(this.config.url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(logsToSend),
                keepalive: true // 允许在页面卸载时继续发送
            }).catch(err => {
                console.error('Failed to send logs:', err);
                // 失败后可以考虑重新加入队列或存入localStorage
            });
        }
    }
}

// 示例使用
const logger = new Logger();
logger.info({ message: 'User entered homepage', userId: '123' });

try {
    throw new Error('Something went wrong in a specific module');
} catch (e) {
    logger.error({ message: e.message, stack: e.stack, component: 'MyComponent' });
}

// 模拟一个未处理的Promise拒绝
Promise.reject('Network request failed');

// 假设这是你的应用入口文件，例如 main.js 或 index.js
import * as Sentry from '@sentry/browser';
import { Integrations } from '@sentry/tracing';

Sentry.init({
  dsn: "YOUR_SENTRY_DSN", // 这是你的Sentry项目Dsn
  integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost", "your-app-domain.com", /^\//],
      // 捕获路由变化
      routingInstrumentation: Sentry.reactRouterV5Instrumentation || Sentry.reactRouterV6Instrumentation, // 根据你的路由版本选择
    }),
  ],
  tracesSampleRate: 1.0, // 采样率，生产环境可能设置为0.1或更低
  environment: process.env.NODE_ENV, // 'production', 'development'
  release: 'my-app@1.0.0', // 当前应用版本，用于版本回溯
  // 可以添加更多配置，比如忽略特定错误
  ignoreErrors: [
    /ResizeObserver loop limit exceeded/,
  ],
  beforeSend(event, hint) {
    // 可以在这里对事件进行修改，例如过滤敏感信息
    if (event.request && event.request.url.includes('/sensitive-api')) {
      delete event.request.data; // 移除敏感请求体
    }
    return event;
  }
});

// 如果你想手动记录一些非错误信息，Sentry也提供了
Sentry.captureMessage("User clicked on checkout button", "info");
Sentry.captureException(new Error("Custom error triggered"));