为你的前端项目接入Sentry

npm i @vue/cli -g# 初始化vue2项目vue create vue2-sentry

# Using npmnpm install --save @sentry/vue @sentry/tracing

// src/main.js import Vue from "vue"; import Router from "vue-router"; import * as Sentry from "@sentry/vue"; import { Integrations } from "@sentry/tracing"; Vue.use(Router); const router = new Router({ // ... }); Sentry.init({ Vue, dsn: "http://xdsdfafda21212@119.75.24.41:9000/2", integrations: [ new Integrations.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ["localhost", "my-site-url.com", /^//], }), ], // 不同的环境上报到不同的 environment 分类 // environment: process.env.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: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都npm run build上传都修改版本号 }); // ... new Vue({ router, render: h => h(App), }).$mount("#app");

npm i @sentry/webpack-plugin -D

// vue.config.js const SentryCliPlugin = require('@sentry/webpack-plugin') module.exports = { // 打包生成sourcemap，打包完上传到sentry之后在删除，不要把sourcemao传到生产环境 productionSourceMap: process.env.NODE_ENV !== 'development', configureWebpack: config=> { if (process.env.NODE_ENV !== 'development') { config.plugins.push( new SentryCliPlugin({ include: './dist/js', // 只上传js ignore: ['node_modules', 'webpack.config.js'], ignoreFile: '.sentrycliignore', release: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都npm run build上传都修改版本号 对应main.js中设置的Sentry.init版本号 cleanArtifacts: true, // Remove all the artifacts in the release before the upload. // URL prefix to add to the beginning of all filenames. Defaults to ~/ but you might want to set this to the full URL. This is also useful if your files are stored in a sub folder. eg: url-prefix '~/static/js' urlPrefix: '~/js', // 线上对应的url资源的相对路径 注意修改这里，否则上传sourcemap还原错误信息有问题 // urlPrefix： 关于这个，是要看你线上项目的资源地址，比如 // 怎么看资源地址呢， 例如谷歌浏览器， F12控制台， 或者去Application里面找到对应资源打开 }), ) } }, }

# .sentryclirc[auth]token=填入控制台创建的TOKEN[defaults]url=https://sentry.io/org=sentryproject=vue

npm run build

// 方式1 "scripts": { "build": "vue-cli-service build && rimraf ./dist/js/*.map" } // 方式2 单独生成map // vue.config.js configureWebpack(config) { config.output.sourceMapFilename('sourceMap/[name].[chunkhash].map.js') config.plugin('sentry').use(SentryCliPlugin, [{ include: './dist/sourceMap', // 只上传js ignore: ['node_modules'], configFile: 'sentry.properties', release: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都npm run build上传都修改版本号 cleanArtifacts: true, // 先清理再上传 }]) } // 方式3 webpack插件清理 $ npm i webpack-delete-sourcemaps-plugin -D // vue.config.js const { DeleteSourceMapsPlugin } = require('webpack-delete-sourcemaps-plugin') configureWebpack(config) { config.plugin.push( new DeleteSourceMapsPlugin(), // 清理sourcemap ) }