Sentry JavaScript SDK 使用教程

项目介绍

Sentry JavaScript SDK 是 Sentry 官方提供的用于 JavaScript 环境的错误监控和性能监控工具。它支持多种 JavaScript 运行环境，包括浏览器、Node.js、React、Vue、Angular 等。Sentry JavaScript SDK 通过捕获应用程序中的错误和性能问题，帮助开发者快速定位和修复问题，提升应用的稳定性和性能。

项目快速启动

安装

首先，你需要在你的项目中安装 Sentry JavaScript SDK。你可以使用 npm 或 yarn 进行安装：

npm install @sentry/browser
# 或者
yarn add @sentry/browser

初始化

在你的应用程序入口文件中，初始化 Sentry SDK：

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: [new Sentry.Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

捕获错误

你可以手动捕获错误并发送给 Sentry：

try {
  // 你的代码
} catch (error) {
  Sentry.captureException(error);
}

应用案例和最佳实践

应用案例

假设你正在开发一个 React 应用，并且希望在用户遇到错误时能够及时捕获并处理。你可以使用 Sentry 来监控应用中的错误。

import React from 'react';
import ReactDOM from 'react-dom';
import * as Sentry from '@sentry/react';
import App from './App';

Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: [new Sentry.Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

ReactDOM.render(
  <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
    <App />
  </Sentry.ErrorBoundary>,
  document.getElementById('root')
);

最佳实践

1. 配置环境变量：在生产环境和开发环境中使用不同的 DSN（数据源名称），以便在开发过程中不会将错误发送到生产环境。
2. 性能监控：使用 BrowserTracing 集成来监控应用的性能，并设置 tracesSampleRate 来控制性能数据的采样率。
3. 自定义错误处理：通过 beforeSend 钩子来自定义错误处理逻辑，例如过滤掉某些不需要发送的错误。

典型生态项目

Sentry 官方 SDK

• @sentry/browser：用于浏览器环境的 SDK。
• @sentry/node：用于 Node.js 环境的 SDK。
• @sentry/react：专门为 React 应用设计的 SDK。
• @sentry/vue：专门为 Vue.js 应用设计的 SDK。

社区项目

• @sentry/webpack-plugin：用于在 Webpack 构建过程中自动上传源映射文件。
• @sentry/tracing：用于性能监控的扩展库。

通过这些工具和 SDK，你可以轻松地将 Sentry 集成到你的 JavaScript 项目中，实现全方位的错误监控和性能优化。