17370845950

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 项目为例，接入非常简单：

1. 注册 Sentry 账号，创建项目，获取 DSN（数据源名称）
2. 引入官方 CDN 脚本或通过 npm 安装

使用 CDN 方式（适合静态页面）：

如果是 React/Vue 项目，推荐使用 npm 安装 @sentry/browser 并集成到代码中：

import * as Sentry from "@sentry/browser";
Sentry.init({
dsn: "https://www./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% 的静默崩溃都能第一时间被发现。