如何在Sentry中获取React Native的有效可读栈追踪？

核心原因 #

显示无意义栈追踪是因为生产环境代码经过了压缩混淆，没有和源码做映射，需要上传对应版本的source map到Sentry完成匹配即可解析出具体报错位置。

具体操作步骤 #

• 第一步：开启打包工具的source map生成配置
  不同打包工具的配置参考：
  • Vite项目（vite.config.js/ts）：

  export default defineConfig({
    build: {
      // 生成独立的source map文件
      sourcemap: true
    }
  })
  

  • Webpack项目（webpack.config.js）：

  module.exports = {
    // 生成完整的source map文件
    devtool: 'source-map'
  }
  

• 第二步：配置Sentry插件自动上传source map
  安装对应打包工具的Sentry官方插件，在打包配置中加入插件配置，注意release参数必须和你前端代码中Sentry初始化时传入的release值完全一致：
  示例（Vite插件配置）：

  import { sentryVitePlugin } from "@sentry/vite-plugin";
  
  export default defineConfig({
    plugins: [
      sentryVitePlugin({
        org: "你的Sentry组织名",
        project: "你的Sentry项目名",
        // Sentry账号生成的Auth Token，需包含project:write权限
        authToken: "你的Sentry Auth Token",
        release: "和前端初始化一致的版本号",
        // 如果静态资源放在CDN子路径，需要配置对应的urlPrefix，比如`https://yourcdn.com/static/js`
        urlPrefix: "~/js"
      })
    ]
  })
  

• 第三步：确认Sentry初始化配置正确
  前端初始化Sentry时必须传入和上传时一致的release参数：

  Sentry.init({
    dsn: "你的项目DSN",
    release: "和上传source map时一致的版本号",
    environment: "production"
  })
  

注意事项 #

• 生产环境不要把source map文件部署到业务服务器，上传到Sentry后可删除打包生成的.map文件，避免源码泄露
• 若栈追踪中的资源路径和上传时的路径不匹配，可调整插件配置中的urlPrefix参数对齐路径
• 不要在Sentry配置中开启不必要的栈路径裁剪规则，避免路径匹配失败

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