前端项目集成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/")

相关推荐
洗刷先生14 分钟前
uniapp 文件查找失败:main.js
前端
前端小巷子15 分钟前
JS 打造仿腾讯影视轮播导航
前端·javascript·面试
2501_9159214319 分钟前
前端开发工具有哪些?常用前端开发工具、前端调试工具、前端构建工具与效率提升工具对比与最佳实践
android·前端·ios·小程序·uni-app·iphone·webview
知否技术31 分钟前
别再踩坑了!这份 Vue3+TypeScript 项目教程,赶紧收藏!
前端·typescript
IT_陈寒34 分钟前
JavaScript 2024:10个颠覆你认知的ES新特性实战解析
前端·人工智能·后端
meng半颗糖44 分钟前
JavaScript 性能优化实战指南
前端·javascript·servlet·性能优化
EndingCoder1 小时前
离线应用开发:Service Worker 与缓存
前端·javascript·缓存·性能优化·electron·前端框架
遗憾随她而去.1 小时前
css3的 --自定义属性, 变量
前端·css·css3
haogexiaole3 小时前
vue知识点总结
前端·javascript·vue.js
哆啦A梦15885 小时前
[前台小程序] 01 项目初始化
前端·vue.js·uni-app