sentry-cli上传sourcemap

前言

文档描述了上传sourcemap到sentry的操作流程以及注意点。

目的

方便定位错误和异常在源码中的位置，方便快速解决线上问题，以达到减少成本、提高收益的目的。

流程

1、gulp中配置名为jsmin的task

该task功能是压缩脚本并生成脚本的sourcemap，这里在配置的时候也遇到了一点问题，一直生成不全sourcemap文件。 后来经过仔细查看gulp 4官方文档以及验证，得到经验（一定要写好task，要么使用cb，要么使用gulp.src）。

gulp源码：

.pipe(sourceMap.init())
// 其他操作
.pipe(sourceMap.write('./'))
.pipe(gulp.dest(distPath.js))

2、安装sentry-cli

有两种方式：

第一种：

curl -sL https://sentry.io/get-cli/ | bash

第二种：

npm install @sentry/cli

在这里选择的是第二种，并将安装sentry-cli的操作直接写在build.sh中，但是由于在网格 npm i -g @sentry/cli 安装太慢，以及安装不成功，报权限问题。 后面通过咨询傅雄军，了解到网格不建议直接在项目的build.sh中执行软件安装等操作，于是又联系了运维部门相关人员钱能武帮忙在服务器安装了sentry-cli，问题得到解决。

3、上传脚本的sourcemap

通过阅读sentry的文档，就直接就开始写上传脚本并在st环境测试验证，发现一度把jenkins服务拖垮，后来经过与各位大佬的沟通， 了解到之前写的上传脚本，有等待用户输入的交互，才导致jenkins服务挂了。在王立栋大佬的帮助下写好了上传的shell脚本，并且上传成功。

shell源码：

变量初始化：

SENTRY_URL=http://sentry.zt.xxx.cn/
SENTRY_PROJECT=www_xxx_com
SENTRY_PROJECT_VERSION=www_xxx_com@v1.0
SENTRY_ORG=xxx
SENTRY_AUTH_TOKEN=xxxx
SENTRY_URL_PREFIX=http://www.xxx.com/js
SENTRY_URL_DIST=./dist/js

上传：

/usr/local/bin/sentry-cli --url ${SENTRY_URL} --auth-token ${SENTRY_AUTH_TOKEN} releases --org ${SENTRY_ORG} --project ${SENTRY_PROJECT} files ${SENTRY_PROJECT_VERSION} upload-sourcemaps --url-prefix ${SENTRY_URL_PREFIX} ${SENTRY_URL_DIST}

4、上传sourcemap之后的验证

以为做到这一步这个工作已经完成了，没想到在sentry系统上面并没有看到预期的效果（异常和错误显示在源码的某行某列），自以为上传sourcemap就可以了， 这里又经过多次咨询王亚军、仔细对比分析，以及实践验证，才认识到只有上传脚本以及对应的sourcemap，在sentry系统上才能看到预期的效果。

预期的效果如下：

5、上传sourcemap之后，dist包部署

到了这里，基本大功告成了，但是有一点要注意的是，我们并不希望我们项目的源码在浏览器端可以阅读到， 这里大佬又帮忙在shell脚本中将部署的资源中的文件名以.js.map结尾的文件排除，不打包进部署的包中。

shell源码:

其中exclude就是排除

tar -zcf "${BASE_DIR}/output_scm/${APP_PKG_NAME}.tar.gz" "${APP_PKG_NAME}" --exclude *.js.map

后语

在完成这个任务的过程中，感谢有大佬们的帮助！