feat: 新增 sentry 配置

.env.production

@@ -35,3 +35,9 @@ VITE_USE_PWA = false
 
 # Is it compatible with older browsers
 VITE_LEGACY = false
+
+# Sentry
+VITE_SENTRY_URL=https://sentry.yiring.com
+VITE_SENTRY_ORG=yiring
+VITE_SENTRY_PROJECT=basic-vue-admin
+VITE_SENTRY_DSN=https://72b9b829b2dfbb2379e94c7cbd3609e7@sentry.yiring.com/16

.gitignore

@@ -31,3 +31,9 @@ pnpm-debug.log*
 
 .mocks
 .history
+
+# Sentry Config File
+.env.sentry-build-plugin
+
+# Sentry Config File
+.env.sentry-build-plugin

.vscode/settings.json

@@ -49,12 +49,12 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "[vue]": {
         "editor.codeActionsOnSave": {
-            "source.fixAll.eslint": true,
-            "source.fixAll.stylelint": true
+            "source.fixAll.eslint": "explicit",
+            "source.fixAll.stylelint": "explicit"
         }
     },
 

build/script/postBuild.ts

 // #!/usr/bin/env node
 
+import fs from 'node:fs'
 import process from 'node:process'
 import colors from 'picocolors'
 
 import pkg from '../../package.json'
+import { getRootPath } from '../utils'
+import { OUTPUT_DIR } from '../constant'
 import { runBuildConfig } from './buildConf'
 
 export async function runBuild() {
@@ -15,6 +18,15 @@ export async function runBuild() {
             runBuildConfig()
         }
 
+        // 递归删除 dist 目录下的 map 后缀文件
+        const dir = getRootPath(OUTPUT_DIR)
+        const files = fs.readdirSync(dir)
+        files.forEach((file) => {
+            if (file.endsWith('.map')) {
+                fs.unlinkSync(`${dir}/${file}`)
+            }
+        })
+
         console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - build successfully!')
     } catch (error) {
         console.log(colors.red(`vite build error:\n${error}`))

build/vite/plugin/index.ts

@@ -16,6 +16,7 @@ import { configVisualizerConfig } from './visualizer'
 import { configThemePlugin } from './theme'
 import { configSvgIconsPlugin } from './svgSprite'
 import { configAutoImportPlugin } from './autoImport'
+import { configSentryPlugin } from './sentry'
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     const { VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
@@ -74,6 +75,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
             // vite-plugin-pwa
             vitePlugins.push(configPwaConfig(viteEnv))
         }
+
+        // Sentry
+        vitePlugins.push(configSentryPlugin(viteEnv))
     }
 
     return vitePlugins

build/vite/plugin/sentry.ts

+import process from 'node:process'
+import type { SentryVitePluginOptions } from '@sentry/vite-plugin'
+import { sentryVitePlugin } from '@sentry/vite-plugin'
+import colors from 'picocolors'
+import pkg from '../../../package.json'
+import { OUTPUT_DIR } from '../../constant'
+
+export function configSentryPlugin(env: ViteEnv) {
+    const config: SentryVitePluginOptions = {
+        org: env.VITE_SENTRY_ORG,
+        project: env.VITE_SENTRY_PROJECT,
+        url: env.VITE_SENTRY_URL,
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        release: {
+            name: `${pkg.name}@${pkg.version}`,
+        },
+        sourcemaps: {
+            filesToDeleteAfterUpload: [`${OUTPUT_DIR}/**/*.js.map`],
+        },
+        debug: true,
+    }
+
+    console.log(`✨ ${colors.cyan(`[Sentry]`)} config`, config)
+    return sentryVitePlugin(config)
+}

package.json

@@ -26,6 +26,7 @@
         "serve": "npm run dev",
         "dev": "vite",
         "build": "vite build && esno ./build/script/postBuild.ts",
+        "postbuild": "rimraf -g ./dist/**/*.map",
         "build:test": "vite build --mode test",
         "build:preview": "vite build --mode preview",
         "build:no-cache": "pnpm clean:cache && npm run build",
@@ -59,6 +60,7 @@
         "@iconify/iconify": "^3.1.1",
         "@logicflow/core": "^1.2.15",
         "@logicflow/extension": "^1.2.16",
+        "@sentry/vue": "^7.107.0",
         "@stomp/stompjs": "^7.0.0",
         "@vue/runtime-core": "^3.3.4",
         "@vue/shared": "^3.3.4",
@@ -103,6 +105,8 @@
         "@commitlint/cli": "^17.7.2",
         "@commitlint/config-conventional": "^17.7.0",
         "@iconify/json": "^2.2.125",
+        "@sentry/cli": "^2.30.2",
+        "@sentry/vite-plugin": "^2.15.0",
         "@types/codemirror": "^5.60.10",
         "@types/crypto-js": "^4.1.2",
         "@types/fs-extra": "^11.0.2",

src/logics/error-handle/index.ts

@@ -170,6 +170,7 @@ export function setupErrorHandle(app: App) {
     if (!useErrorHandle) {
         return
     }
+
     // Vue exception monitoring;
     app.config.errorHandler = vueErrorHandler
 

src/main.ts

@@ -6,6 +6,7 @@ import 'virtual:windi-utilities.css'
 // Register icon sprite
 import 'virtual:svg-icons-register'
 import { createApp } from 'vue'
+import * as Sentry from '@sentry/vue'
 import App from './App.vue'
 import { initAppConfigStore } from '/@/logics/initAppConfig'
 import { setupErrorHandle } from '/@/logics/error-handle'
@@ -16,8 +17,7 @@ import { setupGlobDirectives } from '/@/directives'
 import { setupI18n } from '/@/locales/setupI18n'
 import { setupAppConfig } from '/@/config/app'
 import { registerGlobComp } from '/@/components/registerGlobComp'
-
-import { isDevMode } from './utils/env'
+import { isDevMode, isProdMode } from './utils/env'
 
 // fix: Added non-passive event listener to a scroll-blocking 'wheel' event
 // import 'default-passive-events'
@@ -29,6 +29,20 @@ if (isDevMode()) {
 async function bootstrap() {
     const app = createApp(App)
 
+    // Sentry
+    if (isProdMode()) {
+        Sentry.init({
+            app,
+            dsn: import.meta.env.VITE_SENTRY_DSN,
+            integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+            // Performance Monitoring
+            tracesSampleRate: 1.0,
+            // Session Replay
+            replaysSessionSampleRate: 0.1,
+            replaysOnErrorSampleRate: 1.0,
+        })
+    }
+
     // 注册 App 配置
     setupAppConfig(app)
 

types/global.d.ts

@@ -73,6 +73,13 @@ declare global {
         VITE_LEGACY: boolean
         VITE_USE_IMAGEMIN: boolean
         VITE_GENERATE_UI: string
+
+        // Sentry
+        VITE_SENTRY_URL: string
+        VITE_SENTRY_TOKEN: string
+        VITE_SENTRY_ORG: string
+        VITE_SENTRY_PROJECT: string
+        VITE_SENTRY_DSN: string
     }
 
     declare function parseInt(s: string | number, radix?: number): number

vite.config.ts

@@ -66,6 +66,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
             // Turning off brotliSize display can slightly reduce packaging time
             reportCompressedSize: false,
             chunkSizeWarningLimit: 2000,
+            // Sentry upload sourcemap
+            sourcemap: true,
         },
         define: {
             // setting vue-i18-next