Raven在Sentry中无法为TS/JS代码使用Source Maps问题求助

我之前也碰到过类似的Source Maps不生效的坑，结合自己的调试经验给你几个排查方向，应该能帮到你！

• 确认Source Maps生成配置的正确性
  不管用tsc还是webpack编译，都得保证生成的Source Maps文件和编译后的JS文件路径对应。比如tsconfig.json里要这么设置：

  {
    "compilerOptions": {
      "sourceMap": true,
      "inlineSourceMap": false, // 别用内联映射，Sentry需要单独的.map文件
      "outDir": "./dist",
      "rootDir": "./src"
    }
  }
  

  用webpack的话，devtool要设为source-map（别用eval-source-map这类开发模式的选项，生产环境必须用标准的source-map），同时确保output里的filename和sourceMapFilename配置准确。

• 校验Sentry CLI上传命令的关键参数
  上传时几个参数绝对不能错：

  • --release：必须和代码里Sentry初始化时设置的release完全一致，比如代码里写Sentry.init({ release: 'my-project@1.0.0' })，上传命令就得加--release my-project@1.0.0
  • --include：指定编译后的JS文件目录，比如--include ./dist
  • --url-prefix：对应线上JS文件的路径前缀，比如JS文件部署在/assets/下，就要加--url-prefix '~/assets'（这里的~代表Sentry项目的根URL）
  • 建议加上--validate参数，上传时会自动校验Source Maps和JS文件的匹配性，能快速定位问题

• 确保错误被Sentry正确捕获
  有时候不是Source Maps的问题，而是错误没被正确上报。Node.js里的未捕获异常、Promise拒绝需要手动监听：

  import * as Sentry from '@sentry/node';
  
  Sentry.init({
    dsn: '你的项目DSN',
    release: 'my-project@1.0.0',
  });
  
  // 监听未捕获的同步异常
  process.on('uncaughtException', (err) => {
    Sentry.captureException(err);
    // 等待上报完成后再退出进程
    setTimeout(() => process.exit(1), 1000);
  });
  
  // 监听未处理的Promise拒绝
  process.on('unhandledRejection', (reason) => {
    Sentry.captureException(reason);
  });
  

• 检查Sentry后台的Release关联情况
  上传完Source Maps后，去Sentry后台对应项目的Release页面，确认是否已经关联了正确的映射文件。如果上传失败，CLI会给出明确的错误提示，比如路径不匹配、权限问题，一定要仔细看输出信息。

• 纯JS项目的额外注意事项
  纯JS项目也要确保生成了Source Maps（比如用babel编译时开启sourceMap选项），上传参数的要求和TS项目完全一致，别因为是JS就忽略了路径和release的匹配。

我当初就是因为--url-prefix设置错误，导致Source Maps一直不生效，调整后就正常了。你可以按这个顺序一步步排查，应该能解决问题。

内容的提问来源于stack exchange，提问作者Lion