基于Docker集成Sentry CLI实现Source Map上传与解析（React项目实践）
基础配置
使用Sentry CLI进行源码映射上传时，需完成以下核心配置：
- 构建产物（编译/压缩后的文件，如app.min.js）
- 对应的源码映射文件（.map格式）
- 原始源码文件（若源码映射未包含sourcesContent）
Sentry通过版本号（release）匹配错误报告与源码映射。创建新版本执行：
sentry-cli releases new 注意：版本标识符需在组织内唯一，并与SDK初始化参数匹配。
源码映射上传流程
执行源码映射上传命令：
sentry-cli releases files upload-sourcemaps /path/to/files 可通过--ext参数扩展支持的文件类型：
sentry-cli releases files upload-sourcemaps --ext ts --ext map /path/to/files 完成上传后需标记版本为正式发布：
sentry-cli releases finalize Create React App 实践案例
初始化TypeScript项目：
npx create-react-app demo-project --template typescript安装依赖包：
yarn add @sentry/react @sentry/tracingSDK集成配置
修改src/index.tsx：
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
Sentry.init({
dsn: "https://token@your.sentry.com/2",
release: "1.0.0",
integrations: [new Integrations.BrowserTracing()]
});
ReactDOM.render(
<App />
,
document.getElementById('root')
);错误触发测试
修改src/App.tsx：
import React from 'react';
import logo from './logo.svg';
import './App.css';
const handleError = () => {
throw new Error("Break the world");
};
const buttonStyle = {width: "200px", height: "50px", cursor: "pointer", fontSize: "22px"};
function App() {
return (
<div className="App">
<header className="App-header">
<button style={buttonStyle} onClick={handleError}>Break the world</button>
<img src={logo} className="App-logo" alt="logo" />
</header>
</div>
);
}
export default App;配置文件设置
创建.sentryclirc文件：
[auth]
token=your-auth-token
[defaults]
organization=sentry
project=create-react-app-sentry
url=https://x.xxx.com构建与部署
执行构建命令：
yarn build容器环境操作
进入Docker容器执行：
docker run --rm -it -v $(pwd):/work getsentry/sentry-cli /bin/sh设置环境变量：
RELEASE_VERSION="1.0.0"
SOURCE_MAP_DIR="./build/static/js"
URL_PREFIX="~/static/js/"执行完整流程：
sentry-cli releases new "$RELEASE_VERSION"
sentry-cli releases files "$RELEASE_VERSION" upload-sourcemaps "$SOURCE_MAP_DIR" --url-prefix "$URL_PREFIX"
sentry-cli releases finalize "$RELEASE_VERSION"验证结果
在Sentry后台查看错误报告详情：
本地测试可执行：
pushd build; python -m http.server; popd