欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 概述

错误处理与日志模块用于处理应用的错误和记录日志。在Cordova与OpenHarmony混合开发框架下，这个模块提供了完整的错误处理和日志记录功能。错误处理与日志功能的设计目标是提高应用的稳定性和可维护性。

🔗 完整流程

第一步：错误捕获

系统捕获应用中发生的错误。

第二步：错误处理

系统处理捕获的错误。

第三步：日志记录

系统记录错误信息和其他日志。

Web代码实现

HTML结构

错误处理与日志页面的HTML结构包含错误日志部分。错误日志显示所有捕获的错误信息。

<div id="error-page" class="page">
  <div class="page-header">
    <h1 class="page-title">错误处理与日志</h1>
  </div>

  <div class="page-content">
    <div class="error-section">
      <h2>错误日志</h2>
      <div id="error-list" class="error-list"></div>
    </div>
  </div>
</div>

JavaScript逻辑

错误处理与日志模块的核心是ErrorHandler和Logger类。ErrorHandler类捕获全局错误和未处理的Promise拒绝。Logger类提供了日志记录功能。

class ErrorHandler {
  constructor() {
    this.errors = [];
    this.init();
  }

  init() {
    window.addEventListener('error', (event) => {
      this.handleError(event.error);
    });
    
    window.addEventListener('unhandledrejection', (event) => {
      this.handleError(event.reason);
    });
  }

  handleError(error) {
    const errorRecord = {
      timestamp: new Date().toISOString(),
      message: error.message,
      stack: error.stack,
      type: error.name
    };
    
    this.errors.unshift(errorRecord);
    localStorage.setItem('errors', JSON.stringify(this.errors));
    console.error('错误已记录:', errorRecord);
  }

  getErrors() {
    return this.errors;
  }
}

class Logger {
  static log(level, message, data = null) {
    const logEntry = {
      timestamp: new Date().toISOString(),
      level: level,
      message: message,
      data: data
    };
    
    console.log(`[${level}] ${message}`, data);
    
    let logs = JSON.parse(localStorage.getItem('logs') || '[]');
    logs.unshift(logEntry);
    if (logs.length > 1000) {
      logs = logs.slice(0, 1000);
    }
    localStorage.setItem('logs', JSON.stringify(logs));
  }

  static info(message, data) {
    this.log('INFO', message, data);
  }

  static warn(message, data) {
    this.log('WARN', message, data);
  }

  static error(message, data) {
    this.log('ERROR', message, data);
  }
}

const errorHandler = new ErrorHandler();

CSS样式

错误部分使用白色背景和阴影，使其与页面背景区分开。错误列表使用Flexbox布局，将错误项目垂直排列。每条错误项目都有红色左边框来标识错误。

.error-section {
  padding: 20px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.error-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.error-item {
  padding: 15px;
  background: #FEF0F0;
  border-left: 4px solid #F56C6C;
  border-radius: 4px;
}

.error-time {
  color: #999;
  font-size: 12px;
}

.error-message {
  color: #F56C6C;
  font-weight: 500;
  margin: 5px 0;
}

.error-stack {
  color: #666;
  font-size: 12px;
  margin-top: 5px;
  white-space: pre-wrap;
  word-break: break-word;
}

OpenHarmony原生代码

OpenHarmony原生代码通过ErrorPlugin类实现错误报告的原生功能。reportError方法接收错误消息，然后在原生层记录错误。通过hilog记录日志，开发者可以追踪错误的发生过程。

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG: string = '[ErrorPlugin]';
const DOMAIN: number = 0xFF00;

export class ErrorPlugin {
  static async reportError(success: Function, error: Function, args: any[]): Promise<void> {
    try {
      const errorMessage = args[0];
      hilog.error(DOMAIN, TAG, `错误: ${errorMessage}`);
      success('错误已报告');
    } catch (err) {
      hilog.error(DOMAIN, TAG, `报告错误失败: ${err}`);
      error('报告错误失败');
    }
  }
}

Web-Native通信

Web层通过ErrorBridge类与原生代码进行通信。reportError方法使用Cordova的exec方法调用原生的ErrorPlugin，传递错误消息。原生代码记录错误后，将结果返回给Web层。这个通信过程是异步的，使用Promise来处理成功和失败的回调。

class ErrorBridge {
  static reportError(errorMessage) {
    return new Promise((resolve, reject) => {
      if (window.cordova) {
        cordova.exec(
          (result) => resolve(result),
          (error) => reject(error),
          'ErrorPlugin',
          'reportError',
          [errorMessage]
        );
      } else {
        reject('Cordova未加载');
      }
    });
  }
}

📝 总结

错误处理与日志模块提高了应用的稳定性和可维护性，支持完整的错误处理和日志记录。在Cordova与OpenHarmony混合开发框架下，错误处理与日志模块提供了全面的错误管理和日志记录解决方案。

通过本文介绍的错误处理与日志模块实现，开发者可以学习到以下关键技术点：

1. 全局错误捕获：如何捕获全局错误和未处理的Promise拒绝，防止应用崩溃。

2. 错误分类：如何对错误进行分类，区分不同类型的错误，采用不同的处理策略。

3. 日志级别：如何实现多个日志级别（DEBUG、INFO、WARN、ERROR），灵活控制日志输出。

4. 日志存储：如何存储日志，支持日志查询和导出，便于问题诊断。

5. 错误上报：如何将错误信息上报到服务器，便于远程监控和问题追踪。

6. 性能监控：如何记录应用的性能指标，识别性能瓶颈。

错误处理与日志模块是BugTracker Pro应用中的重要功能，它提高了应用的稳定性和可维护性。通过不断优化和扩展错误处理与日志功能，可以进一步提高应用的质量和用户体验。