原文链接:https://dsx2016.com/?p=1220
公众号:大师兄2016
配置文件
sentry
上传sourMap
的前提是先设置webpack
的配置文件
1.
在项目文件的根目录新建一个.sentryclirc
文件
sentry
会自动检测并使用.sentryclirc
文件中的配置信息
webpack目录.sentryclirc文件
2.sentryclirc
文件中的配置内容
[auth]
token=f0a0ee24d2cd4b2eade96280e1698762c5df9bac87ea423a6dbe3090f3a3a72
[defaults]
url = https://dsx2016.youdomain.cc/
project=projectName
org=sentry
3.
配置中的参数说明
token
token
为API
令牌,不是安全令牌,在sentry
的设置中不要弄混淆了
sentry API key
url
如果是是官方网站,则参考官方文档
本位这里为自建的sentry
,所以url
设置为自定义的域名
sentry 自定义的域名
project
项目名称从项目面板查看即可
sentry 项目
org
注意这里是组织,不是团队,不要弄错了
sentry 组织
官方文档:
https://docs.sentry.io/cli/configuration/
更多其他配置和参数,请参考sentry官方文档中的内容
WebPack
插件上传sourcemap
的方式有很多种,如手动上传和sentry-cli
上传
本文使用的是sentry/webpack-plugin
(webpack
插件),它的特点是
自动化,比如其他几种方式要更为方便
相对安全,自己构建sourceMap
文件,上传后删除,不会影响到线上,不会暴露token
和密钥等信息
安装和操作简单,两步设置完成
1.安装插件
npm install --save-dev @sentry/webpack-plugin
2.在项目中配置
在webpack.config.js
中配置
// 引入插件
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
// 设置插件内容
module.exports = {
// 其他配置
plugins: [
// 建议放在pluins的最后面
new SentryWebpackPlugin({
release:"v1.0.1",
include: ".",
ignoreFile: ".sentrycliignore",
ignore: ["node_modules", "webpack.config.js"],
configFile: "sentry.properties",
urlPrefix:"~/static/js"
}),
],
};
记得版本号和sentry
初始化的版本号保持一致
Sentry.init({
dsn: "http://[email protected]//2",
release:"v1.0.1",
integrations: [new VueIntegration({ Vue, attachProps: true ,logErrors: true}),new Integrations.BrowserTracing()],
tracesSampleRate: 1.0, // Be sure to lower this in production
});
官方文档:
https://docs.sentry.io/platforms/javascript/config/sourcemaps/#webpack
先打包
npm run build
然后到打包好的文件启动服务
这里使用http-server
,没有安装过的可以先安装
npm install http-server -g
运行
http-server
webpack打包
访问网站
产生预先设置的错误,让sentry
捕捉并记录日志
sentry错误日志
1.查看发布的版本,从对应版本进入项目
sentry 源码
2.查看错误日志
随便找一个错误日志
没有错误,可以在构建前手动创建一个错误看看效果
sentry错误日志
3.切换配置,查看源码信息
上传sourceMap
前只有 Full
和Raw
两个选项,而且错误日志不是很明确,不能定位到发生错误的地方
sourceMap
上传并生效后,如图可以切换Original
等选项,切换后可以看到报错的代码内容
sentry source map
Tips
在上传sourceMap
的时候会遇到几个坑
安装插件前要先配置.sentryclirc
文件,只有插件是无法上传到指定项目的
token
为API
令牌,需要自己创建,不是错以为是设置中的安全令牌或者其他key
插件方法SentryWebpackPlugin
中要设置release
参数指定版本,同时Sentry.init
方法中也要release
参数指定版本,两个版本号需要保持一致,sourceMap
才会生效
即便上传了sourceMap
和保持release
版本号一致,还需要一个文件路径的配置,方便sourceMap
定位到要访问的文件,需要指定urlPrefix
参数
urlPrefix
不设置的话,默认为~/
,~
代表网站的协议和域名
map
文件一般被webpack
打包在根目录/static/js/的文件夹下,如访问https://dsx2016.com
,那么map文件就是https://dsx2016.com/static/js/xxx.map
,所以要指定urlPrefix为"~/static/js"
如果经过nginx
等代理导致目录更深一级等,就加入到对应的前缀即可,如果nginx
代理网站为https://dsx2016.com/home
,那么map文件就是https://dsx2016.com/home/static/js/xxx.map
,所以要指定urlPrefix为"~/home/static/js"
,具体的目录看具体的场景,直接看打包好部署的map
在哪个文件即可
只需要指定在生产环境(线上环境)上传map
即可,即build
的时候,run dev
太频繁,不需要source map
,上传sourceMap
文件过于频繁,sentry
会报错,如在webpack.prod.conf.js
文件中配置等
webpack source map
END.