背景

之前项目中要加入sentry，但是由于UMI4 引入似乎有bug, 查看, 而且官方的插件还不怎么支持，umi-plugin-sentry

解决方案

  1. 我们可以在CI/CD 上做修改，比如我们可以在build 之后，使用sentry-cli 命令行工具，将build 之后的文件上传到sentry, 上传完成后删除sourcemap 文件

.build:
  image: ccr.ccs.tencentyun.com/guanmai/node:18.16.0-alpine-rsync
  script:
    - echo "$CI_COMMIT_REF_SLUG"
    - pnpm config set registry https://registry.npmmirror.com
    - pnpm config get registry
    - pnpm install --verbose --frozen-lockfile # 如果package.json 和 yarn.lock 不匹配，那么报错
    - pnpm run build
    - cat ./build/index.html
    - |
      if [ "$CI_COMMIT_REF_NAME" == 'master' ];then
        pnpm exec sentry-cli releases files ${CI_COMMIT_SHA} upload-sourcemaps ./build --ext js --ext map --url-prefix '~/'
      fi
    - rm -rf ./build/*.map
  artifacts:
    name: ${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHA}
    expire_in: 1 mos
    paths:
      - build/
    when: on_success

当然了，我们还需要配置.sentryclirc

因为@sentry/webpack-plugin在umi 中无法使用，但我们仍然可以看下他的实现方式

@sentry/webpack-plugin 的实现思路

  1. 在 webpack 构建过程中，在afterEmit中拿到 assets, 然后对 js 文件进行二次处理，生成新的${debugId}-${chunkIndex}文件，从当前文件中找到对应的sourcemap 文件，然后将新的${debugId}-${chunkIndex} 文件和对应的sourcemap 文件上传到sentry

  2. 开始上传，多线程上传文件

  3. 上传完成后，删除sourcemap 文件

自己实现一个sentry-webpack-plugin

  1. 实现思路和@sentry/webpack-plugin 类似

仓库地址 webpack-sentry-uploader

结果

result.png