前端项目集成sentry

初始化Sentry

js 复制代码
import * as Sentry from '@sentry/vue';
Sentry.init({
  Vue,
  dsn: "https://****2c7e6e9b102****@sentry-inc.***.***.com/160",
})

dns在Sentry平台上创建项目后就会有

配置sourcemap

js 复制代码
const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");

configureWebpack: {
    devtool: 'source-map',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
    plugins: [
      // Put the Sentry Webpack plugin after all other plugins
      sentryWebpackPlugin({
        authToken: '****28e2e47cc1820d95a4aedb352899a1****',
        sourcemap: {
          urlPrefix: '~/test-project/' //~/只代表域名
        },
        org: "sentry",
        project: "test-project",
        url: "https://sentry-inc.***.***.com/",
      }),
    ],
  },

还可以使用插件unplugin-sentry配置sourcemap

js 复制代码
npm i unplugin-sentry -D

// webpack config
const unpluginSentry = require('unplugin-sentry/webpack').default;

plugins: [
	unpluginSentry({
      url: 'https://sentry-inc.***.***.***//',
      org: 'sentry',
      project: 'sentry项目名字',
      authToken: '创建的authToken', 
      publish: env !== 'development', // 默认本地运行时不发布sourceMap
      cleanLocal: true, // 清空本地sourcemap
      sourcemap: {
        urlPrefix: '~/'
      },
      release: release,
      deploy: {
        env: environment
      }
    })
]

sentry init时读取配置

js 复制代码
import * as sentryMeta from 'virtual-unplugin-sentry-runtime';
import * as Sentry from '@sentry/vue';

try {
    // 初始化sentry
    // eslint-disable-next-line no-undef
    Sentry.init({
	  Vue,
      dsn: 'dsn',
      // eslint-disable-next-line no-undef
      release: sentryMeta.RELEASE,
      environment: sentryMeta.ENV,
      // eslint-disable-next-line no-undef
      integrations: [new Sentry.BrowserTracing({
      	routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      	tracePropagationTargets: []
      })],
      // Set tracesSampleRate to 1.0 to capture 100%
      // of transactions for performance monitoring.
      // We recommend adjusting this value in production
      // eslint-disable-next-line no-undef
      tracesSampleRate: environment === 'production' ? 0.6 : 1
    });
  } catch (err) {
    console.log(`sentry 初始化失败${err}`);
  }

通过插件读取打包时的release和env,保证两边一致才能匹配sourcemap

复制代码

authToken的生成

没有使用sourcemap时

使用sourcemap后

sourcemap配置正确, npm run build打包会提示相应的信息

打包报错

sentry-webpack-plugin\] Warning: No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: [docs.sentry.io/api/auth/](https://link.juejin.cn?target=https%3A%2F%2Fdocs.sentry.io%2Fapi%2Fauth%2F "https://docs.sentry.io/api/auth/")

相关推荐
张3蜂2 分钟前
HTML5语义化标签:现代网页的骨架与灵魂
前端·html·html5
悟空瞎说14 分钟前
我用 PixiJS 撸了个圆桌会议选座系统,从 0 到 1 踩坑全复盘
前端
码云之上28 分钟前
从 SPA 到全栈:AI 时代的前端架构升级实践
前端·架构·ai编程
小陈同学呦39 分钟前
关于如何使用CI/CD做自动化部署
前端·后端
前端Ah40 分钟前
记 华为鸿蒙机型小程序使用uni.createInnerAudioContext() 播放音频播放两次的问题
前端
用户221765927921 小时前
css border-left 怎么设置 border 展示为椭圆
前端
御形封灵1 小时前
纯CSS实现方块下落等待动画
前端·css
Luna-player1 小时前
gitee上的vue项目,刚刚创建了一个分支,怎么在本地上拉取分支项目
前端·vue.js·gitee
徐小夕1 小时前
借助AI,1周,0后端成本,我开源了一款Office预览SDK
前端·vue.js·github
转角羊儿1 小时前
CSS补充重要知识
前端·css