一、 基于 sentry-cli 上传

第一步：安装 sentry-cli

  1. # 记得全局安装，这样方便点
  2. npm install @sentry/cli -g


第二步：登陆 sentry-cli

  1. # 如果你用的是官方版，不是自搭建的，可以直接 login
  2. # 直接 login 其实就相当于：sentry-cli --url https://sentry.io/ login
  3. sentry-cli login
  5. # 如果是公司或者自己自己搭建的sentry服务，则用这句话
  6. sentry-cli --url http://{ip}:9000/ login

其中：

  • --url 表示是自己搭建的服务器网址，而不是官方登陆；
  • ip 改成自己的 ip 地址，端口同理；

第三步：输入token
询问是否需要帮你打开浏览器，开不开都行。接下来重点来了：

  • 找到我们第一步生成的 API key令牌，粘贴进去；
  • 还记得之前说要勾上读写权限吗？作用就在这里了。
    WX20210528-174422.png

第四步：修改配置信息
根据 token 最后提示的保存位置，找到 .sentryclirc。在默认情况下，url 和 org 是没有的，需要自己补一下，就是服务器地址和组织名称。这里的配置很重要，这涉及到上传 sourceMap 文件的验证。

image.png

第五步：上传 sourceMap
然后回到自己项目中，开始上传 sourceMap。命令如下：

sentry-cli releases files v1.0.0 upload-sourcemaps ‘./dist/js’ —url-prefix ‘~/relx_demo/js’


参数说明：

  • releases：Sentry 通过 releases 来完成错误日志与 sourceMap 文件的匹配；
  • v1.0.0: 代表 sourceMap 文件对应的版本；
  • ./dist/js ：这个是你本地项目 sourceMap 文件所在目录的文件；
  • --url-prefix ：网页前缀。比如我们项目跑在 http://xxx.com/relx_demo/#/, 那我们的前缀就是relx_demo。我们需要访问http://xxx.com/relx_demo/js 才能找到对应的 JS 文件；

image.png

正常上传成功的提示如下：
image.png

注：
像我司跑的中后台项目模板，上传命令如下：

sentry-cli releases files 2.1.8 upload-sourcemaps —url-prefix ‘~/‘ ‘./dist/‘ —log-level=debug

二、 基于 webpack 上传

第一步：安装插件

安装 webpack 插件 @sentry/webpack-plugin
yarn add @sentry/webpack-plugin -D

PS: 反复安装不上的时候.可能需要翻墙

第二步：添加.sentryclirc

添加.sentryclirc 文件到项目根目录下，注意文件名称要写对。sentry 会自动检测并使用.sentryclirc 文件中的配置信息。

  1. [defaults]
  2. project=zfz-fp
  3. org=zhifuzi
  4. url=http://sentry.xxxxx.com/
  6. [auth]
  7. token=xxxxxxxxxxx

其中：

  • 参数url：sentry 上报错误日志的网址；
  • 参数project：项目名称；
  • 参数token：找到我们第一步生成的API key(一定要有**project:write**权限)，复制粘贴进去即可；
  • 参数org：项目所属的组织(注意：不是团队，是所属组织)；

    第三步：修改 umi 配置

    在 umi 中借用 webpack 的 webpack-chain 的 API 修改 webpack 配置。 ```javascript import SentryWebpackPlugin from ‘@sentry/webpack-plugin’

export default defineConfig { devtool: ‘source-map’,

// 省略其他配置…. chainWebpack: function (config, { webpack }) { if (process.env.REACT_APP_ENV === ‘prod’) { config.plugin(‘sentry’).use(SentryWebpackPlugin, [ { // sentry-cli configuration configFile: ‘./sentryclirc’, release: ‘2.1.2’, // TODO 添加文件前缀,上传时自动拼接在上传文件的前面 eg: /static/js/test.js // default: ‘~/‘ urlPrefix: ‘~/finance.phone’, // webpack specific configuration include: ‘./dist’, ignore: [‘node_modules’, ‘config’], }, ]) } }, }

  1. 配置说明：
  3. - 配置参数`configFile`：配置文件地址，这个一定要有；
  4. - 配置参数`urlPrefix`：是线上JS的完整路径，必须**设置正确**，不然会看不到源码。**重要！！！**
  5. - 配置参数 `release`：版本号，要与项目的版本号做好一一对应；
  6. - 配置参数 `include`：上传构建 bundle 文件的目录，此处是`./dist`目录；
  8. <a name="Z6UIE"></a>
  9. #### 第四步：删除 sourcemap
  10. 在完成 sourcemap 文件上传到 sentry 服务器后，还需将**对应的map文件删除**，避免根据 map 文件还原出相应源码。此处可以借助 npm 钩子来完成相应 map 文件的删除。<br />npm 提供了两种钩子，`pre`和`post`，分别代表操作前和操作后。比如：

“prebuild” “build” “postbuild”

  1. 当执行`npm run build`脚本，会按序执行`npm run prebuild && npm run build && npm run postbuild`。
  3. 在 `package.json` 中添加删除map文件脚本：`"postbuild:prod": "rimraf ./dist/**/*.js.map"`，每当项目运行构建命令`npm run build:prod`完成项目后会自动删除相应的 map 文件。
  4. ```json
  5. scripts": {
  6.     ...
  7.   "postbuild:prod": "rimraf ./dist/**/*.js.map"
  8. },

第五步：验证上传成功

webpack会有提示上传成功会有提示
image.png

或者 通过 【项目】 - 【设置（上传对应的项目中的设置）】 - 【source Maps】
image.png

三、 设置版本号

四、常见问题

问题一： 工件(artifacts)为0的情况，可能是未上传成功

umi中使用@sentry/webpack-plugin当出现错误时，不会进行报错（因为控制台被刷新掉了）
可以先使用sentry-cli方式上传尝试是否有报错。

问题二：souceMap文件无法上传，系统报413错误。

造成这一问题的主要原因是 sourceMap 文件是通过 Nginx 服务转发到sentry服务器上的，Nginx对文件上传有大小限制，针对这一问题，可以修改下Nginx配置即可，具体操作如下所示：

  1. # 配置项client_max_body_size 10M;
  3. server {
  4.     ....
  5.     location / {
  6.        ...
  7.         client_max_body_size 10M;
  8.     }
  9. }

问题三：本地dev环境的触发bug，在sentry上无法展开源码。

在使用本地 localhost 进行开发时，如果是 dev 环境，触发一个 bug 并上传到 sentry 中，是无法通过 sourceMap 进行源码定位的。因为本地 localhost 在 dev 环境下的生成缓存 bundle 文件和构建完生成的 bundle 文件基本是不一致(如dev环境下webpack的工作模式是development)，因为文件不一致所以sourceMap无法进行错误匹配。

问题四：安装 @sentry/cli 过慢？

如果 @sentry/cli 安装过慢，可以使用淘宝源，具体方法是在项目根目录新建 .npmrc 并增加以下：

  1. sentrycli_cdnurl=https://cdn.npm.taobao.org/dist/sentry-cli

参考链接