vite+vue3+sentry 前端监控 集成

介绍

最近 在项目中 接入 sentry 前端报错监控 做个记录 和 踩坑点

参考：https://docs.sentry.io/platforms/javascript/guides/vue/

集成

// 用于收集 vue 项目中 错误信息
npm install --save @sentry/vue
// vite 插件 集成 sentry-cli 用于上传 sourceMap
npm install @sentry/vite-plugin --save-dev

sentry 后台创建 vue项目

获取 到 分配的 dsn 后续项目错误上报要用到

main.ts 中 初始化

vite 配置文件

这时候 启动项目 可以 正常上传错误了 只是 生产环境 无法定位错误具体位置 需要最后一步 打包的时候上传 sourceMap

打包配置

1. url: 要写成自己后端服务的地址 默认是 sass 免费版的地址 上传会报错
2. urlPrefix 很重要 需要根据项目部署的情况 去修改 不然sentry 后台 sourceMap 会失效

org:

authToken 需要 满足 project:write 写权限开启