接入sentry安装@sentry/webpack-plugin依赖报错（附遇到的其他小问题）

news2024/11/13 15:26:34

背景

项目需要接入sentry，使用的是vue2 + vue-cli构建的，那么需要使用webpack构建的方式

见sentry官方文档

问题和尝试思路

根据文档安装@sentry/webpack-plugin依赖的时候一直失败

出现两种报错

第一种：下载安装包https://downloads.sentry-cdn.com/sentry-cli/1.75.2/sentry-cli-Darwin-universal超时

error /Users/项目路径名/node_modules/@sentry/cli: Command failed.
Exit code: 1
Command: node ./scripts/install.js
Arguments: 
Directory: /Users/项目路径名/node_modules/@sentry/cli
Output:
[sentry-cli] Downloading from https://downloads.sentry-cdn.com/sentry-cli/1.75.2/sentry-cli-Darwin-universal
Error: Unable to download sentry-cli binary from https://downloads.sentry-cdn.com/sentry-cli/1.75.2/sentry-cli-Darwin-universal.
Error code: ETIMEDOUT
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

使用浏览器打开这个链接，速度的确很慢，但是能够打开和下载，只是文件很大（21.5MB）

但是从/node_modules/@sentry/cli/node_modules/@sentry/cli/script/install.js文件的来看，我并不知道下载好的要放在哪里。。。

第二种：运行脚本过程中报错，但是没有输出日志

error /Users/项目路径名/node_modules/@sentry/cli: Command failed.
Exit code: 1
Command: node ./scripts/install.js
Arguments: 
Directory: /Users/项目路径名/node_modules/@sentry/cli
Output:

这个经验证，还是上面超时的问题阻断了

最终解决方案

修改sentry_cli_cdnurl的仓库地址，改为淘宝源

然后卸载重装，成功了

npm config set sentrycli_cdnurl="https://npm.taobao.org/mirrors/sentry-cli"
npm uninstall @sentry/webpack-plugin
npm i -D @sentry/webpack-plugin

遇到其他的问题

Invalid options in vue.config.js: "devtool" is not allowed. "plugins" is not allowed

官方文档的webpack.config.js的配置如下

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

module.exports = {
  // ... other config above ...

  devtool: "source-map", // Source map generation must be turned on
  plugins: [
    new SentryWebpackPlugin({
      org: "example-org",
      project: "example-project",

      // Specify the directory containing build artifacts
      include: "./dist",

      // Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
      // and needs the `project:releases` and `org:read` scopes
      authToken: process.env.SENTRY_AUTH_TOKEN,

      // Optionally uncomment the line below to override automatic release name detection
      // release: process.env.RELEASE,
    }),
  ],
};

其中devool和plugins是放在module.exports的根属性中，但是在我的vue.confnig.js中，这么用报错了
实际需要放在根属性/configureWebpack中，如下

const SentryWebpackPlugin = require('@sentry/webpack-plugin');

module.exports = {
  publicPath: '/',
  // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为
  outputDir: 'dist/public',

  // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader)
  lintOnSave: false,

  // 配置cpu核心数
  parallel: 1,

  configureWebpack: {
    devtool: 'source-map', // Source map generation must be turned on
    plugins: [
      new SentryWebpackPlugin({
        org: 'sentry',
        project: 'xxx',
  
        // Specify the directory containing build artifacts
        include: './dist',
  
        // Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
        // and needs the `project:releases` and `org:read` scopes
        authToken:
          'xxxxx'
  
        // Optionally uncomment the line below to override automatic release name detection
        // release: process.env.RELEASE,
      })
    ]
  },

启动之后控制台报错API request failed

Sentry CLI Plugin: Command failed: /Users/你的项目/node_modules/@sentry/cli/sentry-cli releases new 109c2c87dc7e9142521b16fb76f9c5ae01455acc
error: API request failed
  caused by: [28] Timeout was reached (Failed to connect to sentry.io port 443 after 75036 ms: Operation timed out)

Add --log-level=[info|debug] or export SENTRY_LOG_LEVEL=[info|debug] to see more output.
Please attach the full debug log to all bug reports.