react-slingshot 前端监控工具：Sentry 错误跟踪配置

【免费下载链接】react-slingshot React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in 项目地址: https://gitcode.com/gh_mirrors/re/react-slingshot

你是否曾因用户反馈的前端错误难以复现而头疼？是否想实时掌握应用崩溃情况并精准定位问题根源？本文将带你为 react-slingshot 项目集成 Sentry 错误跟踪工具，只需简单几步即可搭建专业级前端监控系统，让你轻松捕获生产环境中的 JavaScript 异常、性能问题和用户行为数据。

准备工作

在开始配置前，请确保你的开发环境满足以下要求：

• Node.js 环境（项目要求 Node.js >=8，推荐使用 Node.js 14+ 稳定版）
• react-slingshot 项目基础框架（通过 git clone https://gitcode.com/gh_mirrors/re/react-slingshot 获取最新代码）
• Sentry 账号（可在 Sentry 官网 免费注册）

项目基础依赖信息可通过 package.json 文件查看，当前项目已集成 React 16.11.0、Redux 4.0.4 和 Webpack 4.41.2 等核心组件，这些版本与 Sentry SDK 完全兼容。

安装 Sentry SDK

首先需要安装 Sentry React SDK 及其依赖包。打开终端，在项目根目录执行以下命令：

npm install @sentry/react @sentry/tracing

如果你使用 yarn 包管理器，可替换为 yarn add @sentry/react @sentry/tracing

安装成功后，你会在项目的 node_modules 目录下看到 @sentry 相关文件夹，同时 package.json 文件的 dependencies 部分会自动添加这两个依赖。

创建 Sentry 配置文件

在 src/utils 目录下创建 Sentry 配置文件，用于初始化和配置 Sentry SDK：

touch src/utils/sentry.js

打开 src/utils/sentry.js 文件，添加以下配置代码：

import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';

// 初始化 Sentry
Sentry.init({
  dsn: "YOUR_SENTRY_DSN", // 替换为你的 Sentry DSN
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
      tracingOrigins: ["localhost", "yourdomain.com", /^\//],
    }),
  ],
  tracesSampleRate: 1.0, // 开发环境采样率设为 1.0，生产环境可适当降低
  environment: process.env.NODE_ENV || 'development', // 自动区分环境
});

export default Sentry;

注意：YOUR_SENTRY_DSN 需要替换为你在 Sentry 项目设置中获取的实际 DSN。DSN 格式通常为 https://xxxxxx@xxxx.ingest.sentry.io/xxxxx

集成到 React 应用

修改应用入口文件

打开项目入口文件 src/index.js，在文件顶部导入并初始化 Sentry：

/* eslint-disable import/default */

// 导入 Sentry 配置
import './utils/sentry';
import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import configureStore, { history } from './store/configureStore';
import Root from './components/Root';
import './styles/styles.scss'; 
require('./favicon.ico'); 

const store = configureStore();

render(
  <AppContainer>
    <Root store={store} history={history} />
  </AppContainer>,
  document.getElementById('app')
);

// ... 热更新相关代码保持不变

包装根组件

为了捕获 React 组件渲染错误，需要使用 Sentry 的 ErrorBoundary 组件包装应用根组件。修改 src/components/Root.js 文件：

import React from 'react';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { ErrorBoundary } from '@sentry/react';
import routes from '../routes';

const Root = ({ store, history }) => (
  <Provider store={store}>
    <ErrorBoundary fallback={<h2>发生错误，请刷新页面重试</h2>}>
      <ConnectedRouter history={history}>
        {routes}
      </ConnectedRouter>
    </ErrorBoundary>
  </Provider>
);

export default Root;

ErrorBoundary 组件会捕获其内部组件树中发生的 JavaScript 错误，并显示回退 UI，同时这些错误会自动上报到 Sentry 后台。

高级配置

捕获 Redux 操作

为了更全面地监控应用状态变化，可集成 Redux 中间件来捕获 Redux 操作和状态：

// src/store/configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import thunk from 'redux-thunk';
import * as Sentry from '@sentry/react';
import rootReducer from '../reducers';

export default function configureStore(initialState, history) {
  const middleware = [
    thunk,
    routerMiddleware(history),
    // 添加 Sentry Redux 中间件
    Sentry.createReduxMiddleware({
      stateTransformer: state => state, // 可选：自定义状态转换函数
    })
  ];

  const store = createStore(
    rootReducer(history),
    initialState,
    compose(applyMiddleware(...middleware))
  );

  return store;
}

性能监控配置

Sentry 不仅能捕获错误，还能监控应用性能。修改 src/utils/sentry.js 中的初始化配置，添加性能监控相关参数：

Sentry.init({
  // ... 已有的配置
  tracesSampleRate: 0.2, // 生产环境采样率，根据流量调整
  profilesSampleRate: 0.1, // 性能剖析采样率
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
      tracingOrigins: ["localhost", "yourdomain.com", /^\//],
      // 添加资源加载性能监控
      enableAutoSessionTracking: true,
    }),
  ],
});

测试与验证

配置完成后，可通过以下步骤测试 Sentry 是否正常工作：

1. 启动开发服务器：npm start
2. 在应用中故意引入一个错误，例如在 src/components/FuelSavingsForm.js 中添加一个按钮点击事件：

<button onClick={() => { throw new Error('测试 Sentry 错误捕获'); }}>
  测试错误上报
</button>

3. 点击该按钮触发错误，然后登录 Sentry 后台查看错误详情。你应该能看到类似以下的错误信息：

错误详情中包含完整的堆栈跟踪、用户设备信息、浏览器版本、发生时间等关键信息，帮助你快速定位问题。

部署注意事项

在将集成了 Sentry 的应用部署到生产环境前，请确保：

1. 使用环境变量配置 Sentry DSN，避免硬编码敏感信息：

// src/utils/sentry.js
Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  // ... 其他配置
});

2. 在构建脚本中添加环境变量，修改 package.json 中的 scripts：

"scripts": {
  "build": "REACT_APP_SENTRY_DSN=your_production_dsn babel-node tools/build.js && npm run open:dist",
  // ... 其他脚本
}

3. 根据生产环境流量调整采样率，避免过多数据影响性能和增加成本。

总结

通过本文的步骤，你已成功为 react-slingshot 项目集成了 Sentry 错误跟踪工具。现在你可以：

• 实时监控生产环境中的前端错误
• 获取详细的错误上下文和堆栈跟踪
• 分析应用性能瓶颈
• 跟踪用户交互和页面加载时间

Sentry 为你的前端应用提供了全方位的监控保障，帮助你提升应用稳定性和用户体验。更多高级功能如用户会话回放、崩溃率分析等，可参考 Sentry 官方文档 进一步探索。

官方文档：docs/FAQ.md
项目源码：src/
配置文件：src/utils/sentry.js

【免费下载链接】react-slingshot React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in 项目地址: https://gitcode.com/gh_mirrors/re/react-slingshot