告别崩溃！umi项目接入Sentry实现全方位错误监控-优快云博客

告别崩溃！umi项目接入Sentry实现全方位错误监控

【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/umi8/umi

为什么需要错误监控？

在前端开发中，用户遇到的JavaScript错误、API请求失败等问题往往难以复现和定位。根据统计，约38%的用户在遇到首次错误后会停止使用应用，而完善的错误监控系统能将问题发现时间从平均24小时缩短至15分钟。

umi作为React社区的主流框架README.md，虽然提供了基础的错误边界处理，但在生产环境中仍需要专业工具来捕获、分析和告警异常。本文将详细介绍如何在umi项目中集成Sentry（一款开源的错误跟踪工具），构建完整的异常监控体系。

Sentry集成准备工作

环境要求

umi 2.0+版本（项目基于umi8开发，推荐使用最新稳定版）
Node.js 8.0+
Sentry账号（可自建私有化部署或使用官方云服务）

安装依赖包

在项目根目录执行以下命令安装Sentry SDK及umi插件：

npm install @sentry/browser @sentry/tracing --save
npm install @umijs/plugin-sentry --save-dev

配置Sentry插件

创建配置文件

在umi配置文件.umirc.js中添加Sentry插件配置：

export default {
  plugins: [
    [
      '@umijs/plugin-sentry',
      {
        dsn: 'YOUR_SENTRY_DSN', // 替换为你的Sentry项目DSN
        environment: process.env.NODE_ENV || 'development',
        tracesSampleRate: 0.5, // 采样率，生产环境建议0.2-1.0
        disableClientSide: false, // 客户端监控开关
        disableServerSide: true, // umi一般为纯前端项目，关闭服务端监控
      },
    ],
  ],
}

环境变量配置

为避免敏感信息提交到代码仓库，建议通过环境变量注入Sentry DSN。创建.env.production文件：

SENTRY_DSN=https://your-sentry-dsn.sentry.io/project-id

在配置文件中读取环境变量：

dsn: process.env.SENTRY_DSN,

实现自定义错误捕获

全局错误边界组件

创建src/components/ErrorBoundary/index.js文件，实现React错误边界：

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

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ hasError: true });
    // 手动上报错误到Sentry
    Sentry.captureException(error, { extra: errorInfo });
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <h1>发生错误，请刷新页面重试</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

在根组件中使用

修改src/layouts/index.js，用错误边界包裹应用：

import ErrorBoundary from '../components/ErrorBoundary';

export default function Layout(props) {
  return (
    <ErrorBoundary>
      <div className="layout">
        {props.children}
      </div>
    </ErrorBoundary>
  );
}

API请求错误监控

拦截Axios请求

创建src/utils/request.js，使用Axios拦截器捕获请求错误：

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

const request = axios.create({
  baseURL: '/api',
  timeout: 10000,
});

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 添加自定义请求ID，便于追踪
    config.headers['X-Request-ID'] = Math.random().toString(36).substr(2, 9);
    return config;
  },
  error => {
    Sentry.captureException(error);
    return Promise.reject(error);
  }
);

// 响应拦截器
request.interceptors.response.use(
  response => response,
  error => {
    // 捕获HTTP错误状态码
    if (error.response) {
      Sentry.captureMessage(`API Error: ${error.response.status}`, {
        level: 'error',
        extra: {
          url: error.config.url,
          status: error.response.status,
          data: error.response.data,
        },
      });
    }
    return Promise.reject(error);
  }
);

export default request;

性能监控与用户行为追踪

路由性能监控

Sentry Tracing可自动监控路由切换性能，在.umirc.js中添加：

import { Integrations } from '@sentry/tracing';

export default {
  plugins: [
    [
      '@umijs/plugin-sentry',
      {
        // ...其他配置
        integrations: [
          new Integrations.BrowserTracing({
            routingInstrumentation: Sentry.reactRouterV4Instrumentation(history),
            tracingOrigins: ['localhost', /^\//],
          }),
        ],
      },
    ],
  ],
}

自定义性能指标

在关键业务组件中添加性能计时：

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

function ProductList() {
  useEffect(() => {
    const transaction = Sentry.startTransaction({
      op: 'load',
      name: 'Product List Loading',
    });
    
    // 模拟数据加载
    fetchProducts().then(() => {
      transaction.finish(); // 结束计时
    });
    
    return () => transaction.finish(); // 组件卸载时确保结束计时
  }, []);
  
  return <div>产品列表</div>;
}

部署与验证

构建生产版本

执行构建命令生成包含Sentry监控的生产代码：

npm run build

本地验证

使用本地服务器预览构建产物：

npx serve dist

在浏览器中访问应用，可通过以下方式测试错误上报：

手动触发一个错误（如在控制台执行throw new Error('Test Sentry')）
访问不存在的路由触发404错误
提交一个包含错误的表单

常见问题与解决方案

开发环境屏蔽错误上报

在.env.development中设置：

SENTRY_DSN=

错误信息脱敏

某些敏感信息不应上传到Sentry，可在配置中添加数据清理：

export default {
  plugins: [
    [
      '@umijs/plugin-sentry',
      {
        // ...其他配置
        beforeSend(event) {
          // 移除敏感数据
          if (event.request && event.request.data) {
            const data = JSON.parse(event.request.data);
            if (data.password) data.password = '[REDACTED]';
            event.request.data = JSON.stringify(data);
          }
          return event;
        },
      },
    ],
  ],
}

源码映射（Source Map）配置

为了在Sentry中查看原始代码，需要上传Source Map。在package.json中添加脚本：

{
  "scripts": {
    "sentry:upload": "sentry-cli sourcemaps inject --org your-org --project your-project dist && sentry-cli sourcemaps upload --org your-org --project your-project dist"
  }
}

构建后执行上传：

npm run build && npm run sentry:upload

总结与最佳实践

通过本文介绍的方法，我们实现了umi项目与Sentry的完整集成，包括：

基础错误捕获与上报
全局错误边界处理
API请求错误监控
性能指标追踪
敏感数据处理

建议结合Sentry提供的告警功能，配置邮件、钉钉或企业微信通知，及时响应线上问题。更多高级用法可参考Sentry官方文档。

错误监控是保障应用质量的重要环节，合理使用Sentry可显著提升问题解决效率，改善用户体验。建议在所有生产环境的umi项目中部署类似的监控方案。

【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/umi8/umi

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考