vue3项目接入sentry

vue3项目接入sentry

vue3项目接入sentry

什么是sentry？

是一套开源的实时的异常收集、追踪、监控系统。这套解决方案由对应各种语言的 SDK 和一套庞大的数据后台服务组成，通过 Sentry SDK 的配置，还可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关操作，便于后续异常追踪。异常数据上报到数据服务之后，会通过过滤、关键信息提取、归纳展示在数据后台的 Web 界面中

原文链接: /2022/07/27/sentry-summary/
Github:
文档 /

Vue3 + Vite + Sentry

# Using npm
npm i @sentry/vue @sentry/tracing

// src/main.js
import { 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: "xdfada1212@12.715.204.41:9000/2",integrations: [new Integrations.BrowserTracing({routingInstrumentation: Sentry.vueRouterInstrumentation(router),tracingOrigins: ["localhost", "my-site-url", /^//],}),],// 不同的环境上报到不同的 environment 分类// environment: v.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: v.SENTRY_VERSION || '0.0.1', // 版本号，每次都npm run build上传都修改版本号initialScope: scope => {// 手动设置一些信息// 参考文档： userName = Item('userName')const token = Item('token')scope.setUser({username: userName,})scope.setContext('登录信息', {token: token,})return scope},
});app.use(router);
unt("#app");// ...new Vue({router,render: h => h(App),
}).$mount("#app");

dns的获取

sourcemap上传

修改fig.js配置
安装npm i vite-plugin-sentry -D插件

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

组织名

authToken获取，新建新token时记得勾选project:write

此时当执行vite build时，viteSentry这个插件会将构建的sourcemap文件上传到sentry对应的项目release之下。当次版本新捕获到错误时就可以还原出错误行，以及详细的错误信息。

Settings——>Projects——>Client Keys可查看dns信息
Settings——>Projects——>Source Maps可查看Souuce Maps信息