如何为未使用Webpack的Electron应用添加Sentry Source Map？

一、生成Source Map文件 #

1. 主进程代码（Node.js/TS） #

如果用TypeScript，修改tsconfig.json开启Source Map生成：

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "./dist/main"
  }
}

执行tsc编译后，dist/main目录会自动生成对应.js.map文件。

如果是纯JavaScript，用Babel生成：
安装依赖：

npm install @babel/cli @babel/preset-env --save-dev

创建.babelrc：

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": "both"
}

编译命令：

babel src/main --out-dir dist/main --source-maps

2. 渲染进程代码 #

用轻量工具esbuild生成（替代Webpack）：
安装：

npm install esbuild --save-dev

打包命令：

esbuild src/renderer/index.js --bundle --outfile=dist/renderer/bundle.js --sourcemap

执行后会得到bundle.js和对应的bundle.js.map。

二、上传Source Map到Sentry #

1. 安装Sentry CLI #

npm install -g @sentry/cli

2. 配置项目信息 #

在项目根目录新建sentry.properties：

defaults.url=https://sentry.io/
defaults.org=你的组织名称
defaults.project=你的项目名称
auth.token=你的API令牌（需包含project:releases权限）

API令牌在Sentry后台「账户设置 > API密钥」创建，勾选project:releases和org:read权限。

3. 关联版本并上传 #

• 创建版本：

sentry-cli releases new "v1.0.0"

• 上传Source Map，注意--url-prefix要对应代码在打包后Electron应用内的绝对路径（比如主进程代码在应用内路径是app/dist/main）：

# 主进程
sentry-cli releases files "v1.0.0" upload-sourcemaps ./dist/main --url-prefix "app/dist/main"

# 渲染进程
sentry-cli releases files "v1.0.0" upload-sourcemaps ./dist/renderer --url-prefix "app/dist/renderer"

• 完成版本发布：

sentry-cli releases finalize "v1.0.0"

三、验证Source Map有效性 #

1. Sentry后台检查：进入项目「Releases」，找到v1.0.0版本，查看已上传的Source Map列表，确认状态为「Valid」，路径匹配预期。
2. 本地验证：用CLI检查单个文件：

sentry-cli debug-files check ./dist/main/index.js.map

输出Valid则格式正确。

四、测试错误追踪效果 #

1. 在代码中加入测试错误：

// 主进程示例
function triggerTestError() {
  throw new Error("Sentry Source Map测试错误");
}
triggerTestError();

2. 编译并打包Electron应用（无需将Source Map打包进应用）。
3. 运行打包后的应用触发错误，等待5-10分钟后查看Sentry后台的错误事件。如果错误详情显示原始代码的文件名、行号和代码片段，而非编译后的混淆代码，说明配置生效。

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