class MonitoringSDK {
    private endpoint: string;

    constructor(endpoint: string) {
        this.endpoint = endpoint;
        this.init();
    }

    private init() {
        this.collectPerformanceData();
        this.setupErrorHandling();
    }

    private collectPerformanceData() {
        window.addEventListener('load', () => {
            const performanceData = {
                event_type: 'performance',
                timestamp: new Date().toISOString(),
                data: {
                    pageLoadTime: performance.timing.loadEventEnd - performance.timing.navigationStart,
                    fcp: performance.getEntriesByName('first-contentful-paint')[0]?.startTime || null,
                    lcp: performance.getEntriesByType('largest-contentful-paint')[0]?.startTime || null,
                    tti: performance.timing.domInteractive - performance.timing.navigationStart
                }
            };
            this.sendData(performanceData);
        });
    }

    private setupErrorHandling() {
        window.onerror = (message, source, lineno, colno, error) => {
            const errorData = {
                event_type: 'error',
                timestamp: new Date().toISOString(),
                data: {
                    message,
                    source,
                    lineno,
                    colno,
                    stack: error?.stack || ''
                }
            };
            this.sendData(errorData);
        };

        window.addEventListener('unhandledrejection', (event) => {
            const rejectionData = {
                event_type: 'unhandledrejection',
                timestamp: new Date().toISOString(),
                data: {
                    reason: event.reason,
                    stack: event.reason?.stack || ''
                }
            };
            this.sendData(rejectionData);
        });
    }

    private sendData(data: any) {
        navigator.sendBeacon(this.endpoint, JSON.stringify(data));
    }
}

// 使用示例
const monitoring = new MonitoringSDK('https://your-server.com/api/monitoring');

import MonitoringSDK from './monitoring-sdk';

// 初始化SDK
const monitoring = new MonitoringSDK('https://your-server.com/api/monitoring');

import { Controller, Post, Body } from '@nestjs/common';
import { MonitoringService } from './monitoring.service';

@Controller('monitoring')
export class MonitoringController {
    constructor(private readonly monitoringService: MonitoringService) {}

    @Post()
    async receiveData(@Body() data: any) {
        // 将数据传递给服务层处理
        await this.monitoringService.processData(data);
        return { status:'success' };
    }
}

import { Injectable } from '@nestjs/common';
import { Kafka } from 'kafkajs';

@Injectable()
export class MonitoringService {
    private kafkaProducer;

    constructor() {
        const kafka = new Kafka({
            clientId:'monitoring-service',
            brokers: ['kafka:9092']
        });

        this.kafkaProducer = kafka.producer();
        this.kafkaProducer.connect();
    }

    async processData(data: any) {
        // 清洗数据或添加额外信息
        const enrichedData = {
           ...data,
            receivedAt: new Date().toISOString(),
            environment: process.env.NODE_ENV
        };

        // 推送数据到Kafka主题
        await this.kafkaProducer.send({
            topic:'monitoring-events',
            messages: [{ value: JSON.stringify(enrichedData) }]
        });
    }
}

import { Injectable } from '@nestjs/common';
import { Client } from 'clickhouse';

@Injectable()
export class ClickhouseService {
    private client;

    constructor() {
        this.client = new Client({
            url: 'http://clickhouse-server:8123',
            basicAuth: {
                username: 'default',
                password: ''
            },
            debug: false
        });
    }

    async insertData(data: any) {
        const query = `
            INSERT INTO monitoring_data (event_type, timestamp, user_id, session_id, device, url, referrer, element_id, x_position, y_position)
            VALUES?
        `;
        await this.client.insert(query, [data]);
    }

    async queryData() {
        const query = `
            SELECT event_type, COUNT(*) AS event_count
            FROM monitoring_data
            WHERE timestamp >= now() - INTERVAL 1 HOUR
            GROUP BY event_type
            ORDER BY event_count DESC
        `;
        return await this.client.query(query).toPromise();
    }
}

import { Injectable, OnModuleInit } from '@nestjs/common';
import { Kafka } from 'kafkajs';

@Injectable()
export class KafkaConsumerService implements OnModuleInit {
    private kafkaConsumer;

    constructor() {
        const kafka = new Kafka({
            clientId:'monitoring-consumer',
            brokers: ['kafka:9092']
        });

        this.kafkaConsumer = kafka.consumer({ groupId:'monitoring-group' });
    }

    async onModuleInit() {
        await this.kafkaConsumer.connect();
        await this.kafkaConsumer.subscribe({ topic:'monitoring-events', fromBeginning: true });

        this.kafkaConsumer.run({
            eachMessage: async ({ topic, partition, message }) => {
                const eventData = JSON.parse(message.value.toString());
                // 在这里处理数据，例如推送到ClickHouse或进行实时分析
                await this.processEventData(eventData);
            }
        });
    }

    async processEventData(data: any) {
        // 在这里进行数据的清洗、聚合等处理
        console.log(`Processing event: ${data.event_type}`);
        // 将数据推送到ClickHouse
        // this.clickhouseService.insertData(data);
    }
}

import axios from 'axios';
import { useEffect, useState } from'react';

function MonitoringDashboard() {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get('https://your-server.com/api/monitoring/dashboard');
            setData(response.data);
        };

        fetchData();
    }, []);

    return (
        <div>
            {/* 使用ECharts或其他图表库展示数据 */}
        </div>
    );
}

// 定期任务或实时检测
function checkForAlerts(data) {
    if (data.errorCount > 100) {
        sendAlert('High error rate detected!');
    }
}

function sendAlert(message) {
    axios.post('https://alert-service.com/api/send', {
        message,
        recipients: ['admin@example.com']
    });
}