vue+vite+sentry

查看搭建sentry

创建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
            }
        })
}