vue3项目接入sentry _追踪

vue3项目接入什么是？
是一套开源的实时的异常收集、追踪、监控系统。这套解决方案由对应各种语言的 SDK 和一套庞大的数据后台服务组成，通过SDK 的配置，还可以上报错误关联的版本信息、发布环境。同时SDK 会自动捕捉异常发生前的相关操作，便于后续异常追踪。异常数据上报到数据服务之后，会通过过滤、关键信息提取、归纳展示在数据后台的 Web 界面中
原文链接:
【vue3项目接入sentry】:
文档
Vue3 + Vite +
# Using npmnpm i @sentry/vue @sentry/tracing

文章插图

// src/main.jsimport { createApp } from "vue";import { createRouter } from "vue-router";import * as Sentry from "@sentry/vue";import { Integrations } from "@sentry/tracing";const app = createApp({// ...});const router = createRouter({// ...});Sentry.init({app,dsn: "http://xdfada1212@12.715.204.41:9000/2",integrations: [new Integrations.BrowserTracing({routingInstrumentation: Sentry.vueRouterInstrumentation(router),tracingOrigins: ["localhost", "my-site-url.com", /^\//],}),],// 不同的环境上报到不同的 environment 分类// environment: process.env.ENVIRONMENT,// Set tracesSampleRate to 1.0 to capture 100%// of transactions for performance monitoring.// We recommend adjusting this value in production// 高访问量应用可以控制上报百分比tracesSampleRate: 1.0,release: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都npm run build上传都修改版本号initialScope: scope => {// 手动设置一些信息// 参考文档：https://docs.sentry.io/platforms/javascript/enriching-events/const userName = localStorage.getItem('userName')const token = localStorage.getItem('token')scope.setUser({username: userName,})scope.setContext('登录信息', {token: token,})return scope},});app.use(router);app.mount("#app");// ...new Vue({router,render: h => h(App),}).$mount("#app");

dns的获取
上传
修改vite..js配置
安装npm i vite-- -D插件

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import viteSentry from 'vite-plugin-sentry'const sentryConfig = {url: 'https://XXX.com.cn',authToken: 'XXX',//sentry授权令牌 org: '组织名称',project: '项目名称',release: process.env.SENTRY_VERSION || '0.0.1',setCommits: {auto: true},sourceMaps: {include: ['./dist/assets'],ignore: ['node_modules'],urlPrefix: '~/assets'}}// https://vitejs.dev/config/export default defineConfig({plugins: [vue(),process.env.NODE_ENV === 'production' ? viteSentry(sentryConfig) : null,],build: {sourcemap: process.env.NODE_ENV === 'production',},})

文章插图
组织名
获?。陆ㄐ聇oken时记得勾选:write
此时当执行vite build时，这个插件会将构建的文件上传到对应的项目之下。当次版本新捕获到错误时就可以还原出错误行，以及详细的错误信息。
——>——> Keys可查看dns信息
——>——> Maps可查看 Maps信息