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

相关推荐
AKclown8 分钟前
基于Monaco的diffEditor实现内容对比
前端·vue.js·react.js
摆烂工程师21 分钟前
(2025年11月)开发了 ChatGPT 导出聊天记录的插件,ChatGPT Free、Plus、Business、Team 等用户都可用
前端·后端·程序员
gongzemin31 分钟前
使用阿里云ECS部署前端应用
前端·vue.js·后端
用户411800341534132 分钟前
Flutter课题汇报
前端
环信35 分钟前
实战教程|快速上线音视频通话:手把手教你实现呼叫与接听全流程
前端
Dgua35 分钟前
✨TypeScript快速入门第一篇:从基础到 any、unknown、never 的实战解析
前端
海云前端136 分钟前
Vue3 大屏项目投屏功能开发:多显示器适配实践
前端
技术小丁1 小时前
使用 HTML + JavaScript 实现酒店订房日期选择器(附完整源码)
前端·javascript
hashiqimiya1 小时前
harmonyos的鸿蒙的跳转页面的部署
开发语言·前端·javascript
向日葵同志443301 小时前
使用@univerjs纯前端渲染excel, 显示图片、链接、样式
前端·react.js·excel