首先注册Sentry并创建项目获取DSN，然后安装@sentry/browser并初始化SDK，自动捕获全局错误与Promise异常，支持手动上报及添加用户、标签等上下文信息，并通过上传Source Map还原压缩代码堆栈，提升错误排查效率。
前端项目中，JavaScript错误的捕获与分析对保障用户体验至关重要。Sentry 是一个开源的错误监控工具，能够实时捕获前端异常、堆栈信息和上下文环境，帮助开发团队快速定位并修复问题。本文介绍如何在 Web 项目中集成 Sentry 实现 JavaScript 错误监控。
1. 注册并创建 Sentry 项目
访问 Sentry 官网，注册账号并登录后，按照以下步骤操作：
- 点击“Create Project”创建新项目
- 选择平台为 “JavaScript” 或具体框架（如 React、Vue）
- 系统会生成唯一的 DSN（Data Source Name），用于 SDK 初始化
2. 安装并初始化 Sentry SDK
npm install @sentry/browser --save
在项目的入口文件（如 main.js 或 index.js）中初始化 Sentry：
立即学习“Java免费学习笔记（深入）”；
import * as Sentry from "@sentry/browser";Sentry.init({ dsn: "YOUR_DSN_HERE", environment: process.env.NODE_ENV, release: "my-app@1.0.0", // 建议绑定版本号 tracesSampleRate: 0.2, // 启用性能监控采样 });
说明： DSN 是通信密钥，不要泄露到公开仓库；可通过环境变量注入增强安全性。
3. 捕获常见错误类型
Sentry 自动捕获以下异常：
- 全局未捕获异常（window.onerror）
- 未处理的 Promise 拒绝（unhandledrejection）
- 资源加载失败（可选配置）
- 手动上报错误（Sentry.captureException）
示例：手动捕获业务逻辑中的异常
try {
riskyOperation();
} catch (error) {
Sentry.captureException(error);
}4. 添加上下文信息提升排查效率
通过 setUser、setTag、setContext 提供更多调试线索：
Sentry.setUser({ id: "123", email: "user@example.com" });
Sentry.setTag("section", "checkout");
Sentry.setContext("device", {
model: "iPhone",
os: "iOS 17"
});这些信息会随错误一起上报，便于还原用户操作场景。
5. Source Map 上传以还原压缩代码
生产环境的 JS 通常经过压缩，堆栈难以阅读。Sentry 支持上传 Source Map 进行反混淆：
- 构建时生成 source map 文件
- 使用 sentry-cli 工具上传
npx sentry-cli sourcemaps upload \ --dist 1.0.0 \ --url-prefix "~/static/js" \ ./build/static/js
确保 release 版本与 Sentry.init 中一致，才能正确映射。
基本上就这些。合理配置后，Sentry 能显著提升前端问题响应速度。关键是保证 DSN 安全、版本标识清晰、source map 准确上传。日常开发中结合 issue 分配和告警通知，形成闭环处理机制。不复杂但容易忽略细节。
