创建sentry project
图片.png
创建后在代码中引入sentry的方式有cdn和npm，建议使用cdn，npm有安全令牌不存在及跨域问题，通过代理可解决跨域问题，但安全令牌问题不知道怎么解决，直接使用cdn引入则没有任何问题
sourcemap自动上传
- 安装vite-plugin-sentry
npm i vite-plugin-sentry -D
-在vite.config.js中引入
import { defineConfig, loadEnv } from 'vite'
import viteSentry from 'vite-plugin-sentry'
const srcPath = path.resolve(__dirname, "src");
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => ({
plugins: [
viteSentry({
url: 'http://ip:9000',
authToken: '...', //sentry授权令牌
org: 'sentry',
project: loadEnv(mode, process.cwd()).VITE_SENTRY_PROJECT,
release: loadEnv(mode, process.cwd()).VITE_SENTRY_VERSION,
deploy: {
env: 'production'
},
setCommits: {
auto: true
},
sourceMaps: {
include: ['./dist/assets'],
ignore: ['node_modules'],
urlPrefix: '~/assets'
}
}),
vue(),
],
...
build: {
sourcemap: true
}
-在.env.production中添加sentry配置
VITE_SENTRY_DSN:'', //项目dsn，从sentry后台获取
VITE_SENTRY_PROJECT:'Vue', //同上图创建sentry project所填
VITE_SENTRY_VERSION:'product@0.0.1', //自定义的release版本，上传sourcemap后可在sentry中项目的版本中看到
- 在main.js中添加init代码
if (!import.meta.env.DEV) {
Sentry.init({
app,
dsn: import.meta.env.VITE_SENTRY_DSN,
release: import.meta.env.VITE_SENTRY_VERSION,
environment: 'production',
integrations: [new Sentry.Integrations.Vue({ app, attachProps: true })],
tracesSampler: samplingContext => {
return 1; //按需设置0至1
}
})
}
