增加系统日志功能：怎么向springboot+vue+element-plues做的系统里面增加系统日志功能

### 在 Spring Boot 和 Vue (Element Plus) 中实现系统日志记录功能 #### 后端部分：Spring Boot 的日志配置 在 Spring Boot 项目中，默认的日志框架是 Logback。可以通过修改 `application.properties` 或者 `application.yml` 文件来调整日志输出行为。 以下是基于 `application.properties` 配置文件的一个简单示例： ```properties logging.level.root=INFO logging.file.name=./logs/app.log logging.pattern.console=%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n logging.pattern.file=%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n ``` 上述配置设置了全局日志级别为 INFO，并指定了日志文件路径以及控制台和文件中的日志格式[^2]。 如果需要更复杂的日志管理，比如按天分隔日志文件或者设置不同包的日志级别，则可以在项目的资源目录下创建 `logback-spring.xml` 文件并定义高级规则。例如： ```xml <configuration> <appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender"> <file>./logs/application.log</file> <encoder> <pattern>%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n</pattern> </encoder> <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy"> <!-- daily rollover --> <fileNamePattern>./logs/application.%d{yyyy-MM-dd}.log</fileNamePattern> <!-- keep 30 days' worth of history capped at 1GB total size --> <maxHistory>30</maxHistory> <totalSizeCap>1GB</totalSizeCap> </rollingPolicy> </appender> <root level="info"> <appender-ref ref="FILE"/> </root> </configuration> ``` 此 XML 定义了一个滚动策略，支持每日生成新的日志文件并保留最近 30 天的历史数据。 #### 前端部分：Vue + Element Plus 的日志处理 对于前端应用，在生产环境中通常不会直接打印调试信息到浏览器控制台，而是通过埋点技术将错误或操作事件发送至服务器保存下来。可以利用 JavaScript 提供的 Error 对象捕获异常并将它们上报给后端 API 接口。 下面是一个简单的例子展示如何监听未被捕获的 Promise 错误以及其他运行时错误： ```javascript // main.js or equivalent entry file window.addEventListener('unhandledrejection', event => { console.error('Unhandled Rejection:', event.reason); sendErrorToServer(event.reason); // 自定义函数用于向服务端提交错误详情 }); window.addEventListener('error', event => { console.error('Global Error:', event.message, 'at line ', event.lineno, 'in file ', event.filename); const errorDetails = { message: event.message, filename: event.filename, lineno: event.lineno, colno: event.colno }; sendErrorToServer(errorDetails); }); ``` 其中 `sendErrorToServer()` 函数负责调用 HTTP 请求把客户端发生的错误传递回后台存储起来以便后续分析[^1]。 另外还可以考虑引入第三方库如 Sentry 来增强用户体验监控能力，它不仅能够自动收集各种类型的崩溃报告还能提供实时告警通知等功能。 ---