一个配置项成功上传soucemap文件到sentry

之前用的fundebug 很好用，但是收费，在掘金发现了sentry这个好用的监控平台。部署的就不说了，可以使用官方提供的，但是错误数量显示5000以内，超过就不能用了，一般都是公司自己部署，这篇文章主要记录使用sentry上传sourcemap遇到的一些问题。

因为使用的vue开发，所以为了方便使用的插件是：@sentry/webpack-plugin

前面项目引入的就不多说了：

import * as Sentry from '@sentry/vue'
import { Integrations } from '@sentry/tracing
if(process.env.NODE_ENV==='production'){Sentry.init({app,dsn: "https://086274867e1b4e74b89530c083439827@o1160714.ingest.sentry.io/6487100",integrations: [new BrowserTracing({routingInstrumentation: Sentry.vueRouterInstrumentation(router),tracingOrigins: ["localhost", "my-site-url.com", /^\//],}),],// Set tracesSampleRate to 1.0 to capture 100%// of transactions for performance monitoring.// We recommend adjusting this value in productiontracesSampleRate: 1.0,release: process.env.SENTRY_RELEASE,});
}

因为我发现在开发的时候引入sentry，会导致控制台输出的内容不能指定到所在行，所以就加了打包限制。只有打包的时候才引入。

很多文档上面写的需要生成.sentryclirc文件，我感觉完全不需要。

直接在vue.config.js里面引入：

const SentryCliPlugin = require('@sentry/webpack-plugin')

然后就是plugins里面填写配置即可：

pluginsConf.push(new SentryCliPlugin({authToken: you token,url: 'https://sentry.io/',org: "org111",include: './malldist',project: 'mall',ignoreFile: '.gitignore',ignore: ['node_modules'],// configFile: 'sentry.properties',release: process.env.SENTRY_RELEASE, // 对应main.js版本号// cleanArtifacts: true, // 先清理再上传}))

这个参数的配置文档都有说明，我是用的sentry.io基础版本的。地址就直接是默认的

文档地址：https://github.com/getsentry/sentry-webpack-plugin

然后打包就可以自动上传sourcemap文件了：然后就是上传线上的时候删除map文件。

Tap：

看了很多删除sourcemap的插件，都感觉不好用，分享一下我删除的方法：

1.首先是我在项目中使用了UglifyJsPlugin这个插件,打包的话会删除soucemap文件，所以就用了他的功能来实现，

2.修改page.json

 "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","sentry": "vue-cli-service build --mode sentry","lint": "vue-cli-service lint"},

增加sentry命令，用于打包并上传sourcemap文件：

3.修改vue.config.js

if (process.env.NODE_ENV === 'production' && process.env.NODE_TYPE === 'production') {pluginsConf.push(new UglifyJsPlugin({uglifyOptions: {output: {comments: false,// 去掉注释},compress: {// warnings: false,drop_console: true,drop_debugger: false,pure_funcs: ['console.log']// 移除console}}}))
}
if (process.env.NODE_ENV === 'production'&& process.env.NODE_TYPE === 'sentry') {pluginsConf.push(new SentryCliPlugin({同上}))
}

通过不同的环境变量env.NODE_ENV来区分，本来想直接设置sentry的环境变量为sentry，但是一直不能生成sourcemap文件，只能在NODE_ENV为production的时候才能生成，所以创建env.sentry 文件，通过sentry命令选择这个文件，然后里面设置变量：

NODE_ENV=production
NODE_TYPE=sentry

其他mode下面，设置的NODE_TYPE为production，至此成功上传soucemap文件到sentry服务器，自己配置的服务器同理：

打包操作如下：

npm run sentry
上传到sentry
npm run build
将生成的文件上传到服务器

使用sentry上传sourcemap相关推荐

sentry使用webpack上传sourceMap源文件定位错误到更详细具体的代码片段
配置文件 sentry上传sourMap的前提是先设置webpack的配置文件 1.在项目文件的根目录新建一个.sentryclirc文件 sentry会自动检测并使用.sentryclirc文件中的 ...
sentry 手动上传sourcemap文件
全局安装 @sentry/cli npm i -g @sentry/cli 1. 登录sentry 私有化部署方式登录 sentry-cli --url https://myserver login ...
前端多图片上传怎么控制顺序_Web前端经典面试题有哪些如何能走向高薪之路...
Web前端经典面试题有哪些?如何能走向高薪之路?Web前端在近几年是越来越火热了,很多人看到了前端的高薪资,更看到了前端行业的发展前景,所以纷纷投入到学习前端技术学习中来.下面给大家总结整理一些Web ...
在ASP.NET Core 3.1 MVC中集成Vue.js V4和使用Dropzone文件上传
目录介绍先决条件 Node.js的介绍您已经安装了Node.js/NPM吗? Node/ NPM版本相关的常见错误 Vue.js简介安装Vue.js V4 NET Core介绍安装Visua ...
Airtable无法上传附件/图片；点击附件上传没反应；不安全的地址怎么设置为受信任；解决方法亲测有效
问题描述在使用Airtable的时候突然遇到附件上传不了的情况,就是或者是检查的时候刷新页面,点击附件上传反复出现下面这些信息: DevTools 无法加载来源映射:无法加载 net::ERR ...
还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提效摸鱼
1. 前言大家好,我是若川.持续组织了近一年的源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整 ...
OCR身份证实名认证+图片上传+拍照上传图片（自用）
chooseImage() {const that = this;Taro.chooseImage({sizeType: ["original", "compressed ...
使用Multer进行文件上传
File upload is a common feature that almost every website needs. We will go through step by step on ...
微信开发者工具上传时包超出限制的问题
记录一下微信开发者工具包明明没有超过限制但是上传的时候缺提示包超出了限制但是看了一下本地代码大小并没有超出限制啊我又把微信开发者工具关了重新运行的时候才看到原来运行模式下不压缩代码且含有s ...

使用sentry上传sourcemap

一个配置项成功上传soucemap文件到sentry

Tap：

使用sentry上传sourcemap相关推荐

最新文章

热门文章