vite+vue3+sentry front-end monitoring integration

introduce

Recently, I connected to sentry front-end error monitoring in the project to make a record and avoid pitfalls.

Reference: https://docs.sentry.io/platforms/javascript/guides/vue/

integrated

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

Create vue project in sentry background

Obtain the assigned dsn, which will be used for subsequent project error reporting.

Initialized in main.ts

vite configuration file

At this time, when starting the project, the error can be uploaded normally. However, the production environment cannot locate the specific location of the error. The sourceMap needs to be uploaded in the last step of packaging.

Package configuration

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

org:

authToken needs to meet the project:write write permission to be turned on