puppeteer知识汇总

一、 基于 sentry-cli 上传

第一步：安装 sentry-cli

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

第二步：登陆 sentry-cli

# 如果你用的是官方版，不是自搭建的，可以直接 login
# 直接 login 其实就相当于：sentry-cli --url https://sentry.io/ login
sentry-cli login

# 如果是公司或者自己自己搭建的sentry服务，则用这句话
sentry-cli --url http://{ip}:9000/ login

其中：

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

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

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

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

第五步：上传 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 文件；

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

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

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 文件中的配置信息。

[defaults]
project=zfz-fp
org=zhifuzi
url=http://sentry.xxxxx.com/

[auth]
token=xxxxxxxxxxx

其中：

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

第三步：修改 umi 配置

在 umi 中借用 webpack 的 webpack-chain 的 API 修改 webpack 配置。

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'],
        },
      ])
    }
  },
}

配置说明：

• 配置参数configFile：配置文件地址，这个一定要有；
• 配置参数urlPrefix：是线上 JS 的完整路径，必须设置正确，不然会看不到源码。重要！！！
• 配置参数 release：版本号，要与项目的版本号做好一一对应；
• 配置参数 include：上传构建 bundle 文件的目录，此处是./dist目录；

第四步：删除 sourcemap

在完成 sourcemap 文件上传到 sentry 服务器后，还需将对应的 map 文件删除，避免根据 map 文件还原出相应源码。此处可以借助 npm 钩子来完成相应 map 文件的删除。
npm 提供了两种钩子，pre和post，分别代表操作前和操作后。比如：

"prebuild"
"build"
"postbuild"

当执行npm run build脚本，会按序执行npm run prebuild && npm run build && npm run postbuild。

在 package.json 中添加删除 map 文件脚本："postbuild:prod": "rimraf ./dist/**/*.js.map"，每当项目运行构建命令npm run build:prod完成项目后会自动删除相应的 map 文件。

scripts": {
	...
  "postbuild:prod": "rimraf ./dist/**/*.js.map"
},

第五步：验证上传成功

webpack 会有提示上传成功会有提示

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

三、 设置版本号

四、常见问题

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

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

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

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

# 配置项client_max_body_size 10M;

server {
	....
	location / {
   	...
		client_max_body_size 10M;
	}
}

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

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

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

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

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

参考链接

• https://www.yuque.com/sunyupeng/vscm7w/ke6q5c