178.HarmonyOS NEXT系列教程之列表交换组件错误处理机制

温馨提示：本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦！

HarmonyOS NEXT系列教程之列表交换组件错误处理机制

效果演示

1. 错误处理架构

1.1 错误类型定义

// 错误类型枚举
enum ErrorType {
    DATA_ERROR,      // 数据错误
    OPERATION_ERROR, // 操作错误
    NETWORK_ERROR,   // 网络错误
    UI_ERROR,        // UI错误
    SYSTEM_ERROR     // 系统错误
}

// 自定义错误类
class ListExchangeError extends Error {
    constructor(
        public type: ErrorType,
        public message: string,
        public details?: any
    ) {
        super(message);
        this.name = 'ListExchangeError';
    }
}

1.2 错误处理中心

class ErrorCenter {
    private static instance: ErrorCenter;
    private handlers: Map<ErrorType, ErrorHandler[]> = new Map();

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

    // 注册错误处理器
    registerHandler(type: ErrorType, handler: ErrorHandler): void {
        if (!this.handlers.has(type)) {
            this.handlers.set(type, []);
        }
        this.handlers.get(type).push(handler);
    }

    // 处理错误
    handleError(error: ListExchangeError): void {
        const handlers = this.handlers.get(error.type) || [];
        handlers.forEach(handler => {
            try {
                handler(error);
            } catch (e) {
                console.error('Error handler failed:', e);
            }
        });
    }
}

2. 异常捕获机制

2.1 全局异常捕获

class GlobalErrorHandler {
    // 设置全局错误处理
    static setup(): void {
        globalThis.onerror = (message, source, line, column, error) => {
            this.handleGlobalError(error);
            return true;
        };

        globalThis.onunhandledrejection = (event) => {
            this.handleUnhandledRejection(event.reason);
            return true;
        };
    }

    // 处理全局错误
    private static handleGlobalError(error: Error): void {
        ErrorCenter.getInstance().handleError(
            new ListExchangeError(
                ErrorType.SYSTEM_ERROR,
                error.message,
                error
            )
        );
    }
}

2.2 组件级异常处理

@Component
struct SafeComponent {
    @State hasError: boolean = false;
    @State errorInfo: string = '';

    // 错误边界
    onError(error: Error): void {
        this.hasError = true;
        this.errorInfo = error.message;
        ErrorCenter.getInstance().handleError(
            new ListExchangeError(
                ErrorType.UI_ERROR,
                error.message,
                error
            )
        );
    }

    build() {
        if (this.hasError) {
            this.renderErrorUI()
        } else {
            this.renderContent()
        }
    }
}

3. 错误恢复策略

3.1 状态恢复

class StateRecovery {
    private static stateHistory: Array<any> = [];
    private static readonly MAX_HISTORY = 10;

    // 保存状态
    static saveState(state: any): void {
        this.stateHistory.push(JSON.parse(JSON.stringify(state)));
        if (this.stateHistory.length > this.MAX_HISTORY) {
            this.stateHistory.shift();
        }
    }

    // 恢复状态
    static restoreState(): any {
        return this.stateHistory.pop();
    }

    // 恢复到最后一个有效状态
    static async recoverToLastValidState(): Promise<void> {
        while (this.stateHistory.length > 0) {
            const state = this.restoreState();
            if (await this.validateState(state)) {
                return state;
            }
        }
        throw new Error('No valid state found');
    }
}

3.2 数据恢复

class DataRecovery {
    // 数据备份
    static async backupData(data: any): Promise<void> {
        try {
            await localStorage.setItem(
                'data_backup',
                JSON.stringify(data)
            );
        } catch (error) {
            console.error('Backup failed:', error);
        }
    }

    // 恢复数据
    static async recoverData(): Promise<any> {
        try {
            const backup = await localStorage.getItem('data_backup');
            return JSON.parse(backup);
        } catch (error) {
            console.error('Recovery failed:', error);
            return null;
        }
    }
}

4. 错误日志系统

4.1 日志记录

class Logger {
    private static readonly LOG_LEVELS = {
        DEBUG: 0,
        INFO: 1,
        WARN: 2,
        ERROR: 3
    };

    // 记录错误日志
    static logError(error: ListExchangeError): void {
        const logEntry = {
            timestamp: new Date().toISOString(),
            type: error.type,
            message: error.message,
            details: error.details,
            stack: error.stack
        };

        // 保存日志
        this.saveLog(logEntry);
        
        // 发送到服务器
        this.sendToServer(logEntry);
    }

    // 保存日志
    private static async saveLog(entry: any): Promise<void> {
        const logs = await this.getLogs();
        logs.push(entry);
        await localStorage.setItem('error_logs', JSON.stringify(logs));
    }
}

4.2 日志分析

class LogAnalyzer {
    // 分析错误模式
    static analyzeErrorPatterns(logs: any[]): ErrorPattern[] {
        const patterns: Map<string, number> = new Map();
        
        logs.forEach(log => {
            const key = `${log.type}:${log.message}`;
            patterns.set(key, (patterns.get(key) || 0) + 1);
        });

        return Array.from(patterns.entries())
            .map(([key, count]) => ({
                pattern: key,
                frequency: count,
                severity: this.calculateSeverity(count)
            }));
    }

    // 生成分析报告
    static generateReport(patterns: ErrorPattern[]): string {
        return patterns
            .sort((a, b) => b.frequency - a.frequency)
            .map(p => `${p.pattern}: ${p.frequency} times (${p.severity})`)
            .join('\n');
    }
}

5. 用户反馈机制

5.1 错误提示

class ErrorNotifier {
    // 显示错误提示
    static showErrorToast(error: ListExchangeError): void {
        promptAction.showToast({
            message: this.formatErrorMessage(error),
            duration: 3000,
            bottom: true
        });
    }

    // 显示错误对话框
    static showErrorDialog(error: ListExchangeError): void {
        AlertDialog.show({
            title: '错误提示',
            message: this.formatErrorMessage(error),
            primaryButton: {
                value: '重试',
                action: () => this.retryOperation(error)
            },
            secondaryButton: {
                value: '取消',
                action: () => {}
            }
        });
    }
}

5.2 错误反馈

class FeedbackCollector {
    // 收集用户反馈
    static collectFeedback(error: ListExchangeError): void {
        Dialog.show({
            title: '问题反馈',
            message: '请描述您遇到的问题',
            buttons: [
                {
                    text: '提交',
                    onClick: async (feedback: string) => {
                        await this.submitFeedback({
                            error,
                            feedback,
                            timestamp: Date.now()
                        });
                    }
                }
            ]
        });
    }
}

6. 调试支持

6.1 调试工具

class DebugTool {
    private static isDebugMode: boolean = false;

    // 启用调试模式
    static enableDebugMode(): void {
        this.isDebugMode = true;
        this.setupDebugListeners();
    }

    // 设置调试监听器
    private static setupDebugListeners(): void {
        if (this.isDebugMode) {
            // 监听状态变化
            this.watchStateChanges();
            // 监听错误发生
            this.watchErrors();
            // 监听性能指标
            this.watchPerformance();
        }
    }
}

6.2 调试信息

class DebugInfo {
    // 收集调试信息
    static collectDebugInfo(): DebugReport {
        return {
            timestamp: Date.now(),
            state: this.getCurrentState(),
            errors: this.getRecentErrors(),
            performance: this.getPerformanceMetrics()
        };
    }

    // 导出调试报告
    static exportDebugReport(): void {
        const report = this.collectDebugInfo();
        const blob = new Blob(
            [JSON.stringify(report, null, 2)],
            { type: 'application/json' }
        );
        // 导出文件逻辑
    }
}

7. 最佳实践

7.1 错误处理建议

1. 实现完整的错误处理链
2. 提供友好的用户反馈
3. 保持详细的错误日志
4. 实现可靠的恢复机制

7.2 开发建议

1. 预防性错误处理
2. 合理使用错误边界
3. 实现错误监控
4. 提供调试支持

8. 小结

本篇教程详细介绍了：

1. 错误处理的架构设计
2. 异常捕获的实现方法
3. 错误恢复的策略
4. 日志系统的建立
5. 调试支持的实现

下一篇将介绍工具类设计的实现。