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

相关推荐
小满zs5 小时前
Zustand 第五章(订阅)
前端·react.js
涵信6 小时前
第一节 基础核心概念-TypeScript与JavaScript的核心区别
前端·javascript·typescript
谢尔登6 小时前
【React】常用的状态管理库比对
前端·spring·react.js
编程乐学(Arfan开发工程师)6 小时前
56、原生组件注入-原生注解与Spring方式注入
java·前端·后端·spring·tensorflow·bug·lua
小公主6 小时前
JavaScript 柯里化完全指南:闭包 + 手写 curry,一步步拆解原理
前端·javascript
姑苏洛言8 小时前
如何解决答题小程序大小超过2M的问题
前端
GISer_Jing9 小时前
JWT授权token前端存储策略
前端·javascript·面试
开开心心就好9 小时前
电脑扩展屏幕工具
java·开发语言·前端·电脑·php·excel·batch
拉不动的猪9 小时前
es6常见数组、对象中的整合与拆解
前端·javascript·面试
GISer_Jing9 小时前
Vue Router知识框架以及面试高频问题详解
前端·vue.js·面试