sentry + vue实现错误日志监控

起因

项目采用vue全家桶开发,现在拟嵌入sentry,实现对于线上网站进行错误日志记录。其实上传日志很简单,基本配置就可以了,但是上传配套的sourcemap则颇为费劲。这里记录一下使用心得。


实施步骤
上传日志

sentry使用文档,官方介绍很简单
main.js 中引入如下代码:


npm install @sentry/integrations
# or
yarn add @sentry/integrations
import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'your dsn',
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

其中 DSN 在项目的下图位置找到
DSN的位置
这样之后我们重新打包项目,错误就可以自动上传到sentry的项目下issues里面了。

通常我们还会做一步,设置release的版本,很简单,只需要在sentry初始化的时候配置一下release就可以了。后续所有的sourcemap文件上传也需要配置相同的release版本号。

Sentry.init({
  dsn: 'your dsn',
  release: 'release version',
  integration
### 在 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 来增强用户体验监控能力,它不仅能够自动收集各种类型的崩溃报告还能提供实时告警通知等功能。 ---
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值