Sentry 是一个开源错误监控工具，通过 SDK 捕获 JavaScript 运行时错误、Promise 异常、资源加载失败等问题，支持自动上报和手动捕获异常，结合 source map、release 版本、用户信息和性能监控，提升前端异常的可见性与排查效率。
前端项目上线后，最怕的就是用户遇到问题却无法定位。JavaScript运行时的报错、Promise异常、资源加载失败等问题，如果没被及时发现，很容易影响用户体验。Sentry 是一个开源的错误监控工具，能帮助开发者实时捕获并分析 JavaScript 错误，快速定位问题根源。
什么是 Sentry？
Sentry 是一个跨平台的错误追踪系统，支持 Web、Node.js、React、Vue 等多种技术栈。它通过 SDK 收集应用中的异常信息（如堆栈跟踪、上下文环境、用户行为等），并集中展示在可视化面板中，方便团队排查和修复。
对于前端项目，Sentry 能自动捕获：
- JavaScript 运行时错误（Uncaught exceptions）
- 未处理的 Promise 异常（unhandledrejection）
- 资源加载失败（如 script、img 加载出错）
- 自定义业务逻辑异常上报
如何接入 Sentry 到前端项目？
以标准 Web 项目为例，接入非常简单：
立即学习“Java免费学习笔记（深入）”；
- 注册 Sentry 账号，创建项目，获取 DSN（数据源名称）
- 引入官方 CDN 脚本或通过 npm 安装
使用 CDN 方式（适合静态页面）：
如果是 React/Vue 项目，推荐使用 npm 安装 @sentry/browser 并集成到代码中：
import * as Sentry from "@sentry/browser";Sentry.init({ dsn: "https://www.php.cn/link/9beff913467a3024cbd3d7a92308347b", integrations: [ new Sentry.BrowserTracing() ], tracesSampleRate: 1.0, });
捕获常见异常类型
Sentry 默认会监听全局错误和 unhandledrejection，但有些场景需要手动上报：
- 异步错误：比如 setTimeout 中抛出的异常，需用 try/catch 包裹后手动发送
- AJAX 请求失败：可结合 fetch 或 axios 拦截器，将非 200 响应作为事件上报
-
自定义业务错误：使用
Sentry.captureException(err)或Sentry.captureMessage("登录失败")
示例：手动捕获并添加上下文
try {
riskyFunction();
} catch (err) {
Sentry.withScope((scope) => {
scope.setExtra("userInfo", { id: 123, name: "test" });
scope.setTag("section", "profile");
Sentry.captureException(err);
});
}
优化错误排查体验
光有错误信息还不够，要提升可读性和定位效率：
- 上传 source map：Sentry 支持反混淆压缩后的 JS 代码，还原原始堆栈。构建时将 sourcemap 上传至 Sentry 即可
- 设置 release 版本：每次发布新版本时更新 release 字段，能精准判断问题是出现在哪个版本
-
绑定用户信息：调用
Sentry.setUser({ id: '123', email: 'user@example.com' })，便于联系用户复现问题 - 性能监控：开启 Tracing 后还能查看页面加载、接口响应等性能数据
基本上就这些。Sentry 让前端异常变得可见、可追踪、可管理，是保障线上稳定性的实用工具。合理配置后，90% 的静默崩溃都能第一时间被发现。
