cool-admin(midway版)前端错误监控：最佳实践

【免费下载链接】cool-admin-midway 🔥 cool-admin(midway版)一个很酷的后台权限管理框架，模块化、插件化、CRUD极速开发，永久开源免费，基于midway.js 3.x、typescript、typeorm、mysql、jwt、vue3、vite、element-ui等构建 项目地址: https://gitcode.com/gh_mirrors/co/cool-admin-midway

cool-admin(midway版)是一个基于midway.js 3.x构建的模块化后台权限管理框架，提供了完善的错误监控与日志管理机制。本文将介绍如何在cool-admin(midway版)项目中实现高效的前端错误监控，帮助开发者快速定位和解决问题。

错误捕获机制解析

cool-admin(midway版)采用了多层次的错误捕获策略，确保系统异常能够被及时发现和处理。在框架源码中，我们可以看到大量使用try-catch结构来捕获同步错误，例如在任务调度模块中：

// src/modules/task/service/local.ts
try {
  // 任务执行逻辑
} catch (e) {
  this.logger.error('Init local task error:', e);
}

对于异步操作，框架同样提供了完善的错误处理机制，如在队列任务执行过程中：

// src/modules/task/queue/task.ts
try {
  // 异步任务执行
} catch (error) {
  this.taskBullService.record(job.data, 0, error.message);
}

日志记录与管理

框架内置了强大的日志记录功能，通过统一的日志服务将错误信息持久化存储。系统日志相关的代码主要集中在以下文件：

• 系统日志实体定义：src/modules/base/entity/sys/log.ts
• 日志服务实现：src/modules/base/service/sys/log.ts
• 日志中间件：src/modules/base/middleware/log.ts

日志模块支持按时间自动清理，通过配置文件可以设置日志保存时间：

// src/modules/task/config.ts
config.task = {
  // 日志保留时间，单位天
  logKeepDays: 30
}

错误监控最佳实践

1. 全局错误捕获

在前端应用中添加全局错误监听，捕获未被处理的异常：

// 监听全局错误
window.addEventListener('error', (event) => {
  // 收集错误信息并发送到后端
  const errorInfo = {
    message: event.error.message,
    stack: event.error.stack,
    url: window.location.href,
    time: new Date().toISOString()
  };
  
  // 发送错误日志到后端 [src/modules/base/controller/admin/sys/log.ts](https://link.gitcode.com/i/9f82c3c957887c32d0bbb9edef409cc6)
  fetch('/admin/sys/log/error', {
    method: 'POST',
    body: JSON.stringify(errorInfo),
    headers: {
      'Content-Type': 'application/json'
    }
  });
});

2. 接口请求错误处理

统一处理API请求错误，确保所有接口异常都能被捕获和记录：

// 请求拦截器错误处理
axios.interceptors.response.use(
  response => response,
  error => {
    // 记录错误信息
    const errorInfo = {
      type: 'api',
      url: error.config.url,
      method: error.config.method,
      status: error.response?.status,
      message: error.message,
      time: new Date().toISOString()
    };
    
    // 调用日志服务 [src/modules/base/service/sys/log.ts](https://link.gitcode.com/i/122dc11c816eda7c002173eadd30f742)
    logService.recordError(errorInfo);
    
    return Promise.reject(error);
  }
);

3. 错误分级处理策略

根据错误严重程度实施不同的处理策略：

• 严重错误：立即报警并记录详细日志
• 一般错误：记录日志并尝试自动恢复
• 轻微错误：仅记录日志，不干扰用户操作

// src/modules/base/service/sys/log.ts
async recordError(errorInfo) {
  // 根据错误级别进行不同处理
  if (errorInfo.level === 'critical') {
    // 严重错误，发送邮件或短信通知
    await this.notifyAdmin(errorInfo);
  }
  
  // 统一记录错误日志
  await this.saveToDatabase(errorInfo);
}

错误分析与调试技巧

1. 错误日志查询

通过日志管理界面可以方便地查询和筛选错误日志，访问路径：/admin/sys/log，对应控制器实现：src/modules/base/controller/admin/sys/log.ts

2. 错误定位与复现

结合错误日志中的堆栈信息和请求上下文，快速定位问题代码位置。对于难以复现的错误，可以使用框架提供的任务日志功能：

// src/modules/task/service/info.ts
async getTaskLog(taskId) {
  // 查询任务执行日志
  return await this.taskLogRepository.find({
    where: { taskId },
    order: { createTime: 'DESC' }
  });
}

3. 性能监控与错误关联

将错误监控与性能监控结合，分析错误发生时的系统状态，帮助发现潜在问题。相关实现可参考任务监控模块：src/modules/task/controller/admin/info.ts

总结

cool-admin(midway版)提供了完善的错误监控基础设施，通过合理配置和扩展，可以构建起强大的前端错误监控体系。关键是要充分利用框架内置的日志服务、错误捕获机制和任务调度功能，结合项目实际需求，制定适合的错误处理策略。

通过本文介绍的最佳实践，开发者可以有效提升系统的稳定性和可维护性，为用户提供更可靠的服务体验。如需进一步扩展错误监控功能，可以参考插件开发文档，开发自定义的错误监控插件。

【免费下载链接】cool-admin-midway 🔥 cool-admin(midway版)一个很酷的后台权限管理框架，模块化、插件化、CRUD极速开发，永久开源免费，基于midway.js 3.x、typescript、typeorm、mysql、jwt、vue3、vite、element-ui等构建 项目地址: https://gitcode.com/gh_mirrors/co/cool-admin-midway