前端错误的分类和优先级管理建议

#javascript

总结

错误分级
优先级定义
错误处理体系

1. 错误分类体系

1.1. 致命错误（P0级）：白屏、崩溃、安全漏洞、业务流中断

这类错误会导致应用完全无法使用或核心功能瘫痪 ==需要立即处理==的场景：

白屏 & 应用崩溃
核心业务流程中断
数据丢失
安全漏洞动作：
立即上报并通知相关人员
可能需要执行==紧急恢复措施==

// 错误监控示例
class CriticalErrorMonitor {
    static monitor() {
        // 1. JavaScript运行时错误
        window.onerror = (message, source, lineno, colno, error) => {
            this.handleCriticalError({
                type: 'RuntimeError',
                level: 'P0',
                details: { message, source, lineno, colno, error }
            });
        };

        // 2. Promise未捕获错误
        window.addEventListener('unhandledrejection', (event) => {
            this.handleCriticalError({
                type: 'UnhandledPromiseRejection',
                level: 'P0',
                details: { reason: event.reason }
            });
        });
    }

    static handleCriticalError(errorInfo) {
        // 立即上报并通知相关人员
        ErrorReporter.reportImmediately(errorInfo);
        // 可能需要执行紧急恢复措施
        ErrorRecovery.attemptRecovery(errorInfo);
    }
}

1.2. 严重错误（P1级）： ==影响主要功能但不会导致应用完全不可用==

class SevereErrorHandler {
    static handle(error) {
        const errorInfo = {
            level: 'P1',
            timestamp: new Date().toISOString(),
            type: this.classifyError(error),
            impact: this.assessImpact(error)
        };

        // 错误分类和上报
        switch(errorInfo.type) {
            case 'API_ERROR':
                this.handleAPIError(error);
                break;
            case 'RESOURCE_ERROR':
                this.handleResourceError(error);
                break;
            case 'STATE_ERROR':
                this.handleStateError(error);
                break;
        }
    }

    static classifyError(error) {
        // 错误分类逻辑
    }

    static assessImpact(error) {
        // 评估影响范围
    }
}

主要关注场景：

主要功能模块异常
关键 API 接口错误
- API_ERROR
==重要资源==加载失败
- RESOURCE_ERROR
状态管理错误
- STATE_ERROR
评估影响范围

1.3. 一般错误（P2级）：影响用户体验但不影响核心功能

class GeneralErrorMonitor {
    static monitorPerformance() {
        // 性能监控
        const observer = new PerformanceObserver((list) => {
            const entries = list.getEntries();
            entries.forEach(entry => {
                if (this.isPerformanceIssue(entry)) {
                    this.reportPerformanceIssue(entry);
                }
            });
        });

        observer.observe({ entryTypes: ['paint', 'largest-contentful-paint', 'first-input'] });
    }

    static isPerformanceIssue(entry) {
        const thresholds = {
            'first-contentful-paint': 2000,
            'largest-contentful-paint': 2500,
            'first-input-delay': 100
        };
        return entry.duration > thresholds[entry.entryType];
    }
}

监控项目：

性能问题
UI 渲染异常
非核心功能异常
用户体验问题

1.4. P3：优化类问题：下次迭代优化

2. 错误处理最佳实践

2.1. 统一错误管理中心

上报信息统一处理

级别
堆栈信息
时间戳
上下文信息
- url
- ua 信息等

class ErrorCenter {
    private static instance: ErrorCenter;
    private errorQueue: Array<ErrorInfo> = [];

    static getInstance() {
        if (!ErrorCenter.instance) {
            ErrorCenter.instance = new ErrorCenter();
        }
        return ErrorCenter.instance;
    }

    handleError(error: Error, level: ErrorLevel) {
        const errorInfo = this.formatError(error, level);
        
        if (level === 'P0' || level === 'P1') {
            this.reportImmediately(errorInfo);
        } else {
            this.queueError(errorInfo);
        }

        this.triggerRecovery(errorInfo);
    }

    private formatError(error: Error, level: ErrorLevel): ErrorInfo {
        return {
            level,
            message: error.message,
            stack: error.stack,
            timestamp: new Date().toISOString(),
            context: this.getErrorContext()
        };
    }

    private getErrorContext() {
        return {
            url: window.location.href,
            userAgent: navigator.userAgent,
            timestamp: Date.now(),
            // 其他上下文信息
        };
    }
}

2.2. 错误恢复策略 → 比如降级、重试机制

class ErrorRecovery {
    static async attemptRecovery(error: ErrorInfo) {
        const strategies = {
            NetworkError: this.handleNetworkError,
            StateError: this.handleStateError,
            ResourceError: this.handleResourceError
        };

        const strategy = strategies[error.type];
        if (strategy) {
            await strategy(error);
        }
    }

    private static async handleNetworkError(error: ErrorInfo) {
        // 实现网络错误恢复策略
        const maxRetries = 3;
        let retryCount = 0;

        while (retryCount < maxRetries) {
            try {
                await this.retryRequest(error.request);
                break;
            } catch (e) {
                retryCount++;
                await this.delay(Math.pow(2, retryCount) * 1000); // 指数退避
            }
        }
    }
}

2.3. 错误上报策略

立即上报，并通知拉群
批量上报情况

class ErrorReporter {
    private static batchSize = 10;
    private static batchTimeout = 5000;
    private static errorQueue: ErrorInfo[] = [];
    private static timer: NodeJS.Timeout | null = null;

    static queueError(error: ErrorInfo) {
        this.errorQueue.push(error);

        if (this.errorQueue.length >= this.batchSize) {
            this.flushQueue();
        } else if (!this.timer) {
            this.timer = setTimeout(() => this.flushQueue(), this.batchTimeout);
        }
    }

    static async flushQueue() {
        if (this.errorQueue.length === 0) return;

        const errors = [...this.errorQueue];
        this.errorQueue = [];
        
        try {
            await this.sendToServer(errors);
        } catch (e) {
            // 处理上报失败的情况
            this.handleReportFailure(errors);
        }
    }
}